zoukankan      html  css  js  c++  java
  • Angular8入门-2 第一个页面

    学的前端框架多了,可以靠经验入门了,看上节建的示例

    官网资料

    https://angular.io/guide/architecture-components

    1、启动位置

     2、AppComponent

     html 和 less分别是页面和样式

    3、app.component.html

    清空中间内容如下

     增加一个helloWorld

    <div class="header">HelloWorld</div>

     在less里增加如下内容

     跟着改变颜色

     4、换一种写法

    修改 I:angular gstudysrcappapp.component.ts如下

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.less'],
    })
    export class AppComponent {
      title = 'ngstudy';
      info="hello world1";
    }

    html 内容如下

    <div class="header">{{info}}</div>
    
    <router-outlet></router-outlet>

    运行正常

     5、下面搞一个点击事件试试,修改html和component代码如下

    <div class="header" (click)="test()">{{info}}</div>
    
    <router-outlet></router-outlet>
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.less'],
      
    })
    export class AppComponent {
      title = 'ngstudy';
      info="hello world1";
      test() {
        this.info="hello world2";
      } 
    }

    点击helloworld1,

     运行成功,注意(click)不要写成ng-click,感觉挺简单的。。

  • 相关阅读:
    搜索框练习
    左侧菜单练习
    Maven Assembly插件介
    (总结)Nginx配置文件nginx.conf中文详解
    nginx、php-fpm、mysql用户权限解析
    全文检索引擎Solr的配置
    解决Discuz安装时报错“该函数需要 php.ini 中 allow_url_fopen 选项开启…”
    solr添加多个core
    精品站
    Win7下IIS的安装与配置
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/12354857.html
Copyright © 2011-2022 走看看