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,感觉挺简单的。。

  • 相关阅读:
    MongoDB简单使用
    mongodb安装部署
    分布式通信-序列化
    分布式通信协议
    分布式概念
    springboot-事件
    spring-事件
    spring-@Component/@ComponentScan注解
    springboot-Date日期时间问题
    enginx:基于openresty,一个前后端统一,生态共享的webstack实现
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/12354857.html
Copyright © 2011-2022 走看看