Angular笔记一

目录

    使用 Angular CLI 创建了初始的应用结构。

    学会了使用 Angular 组件来显示数据。

    使用双花括号插值表达式显示了应用标题

    使用 CLI 创建了第二个组件 HeroesComponent。

    把 HeroesComponent 添加到了壳组件 AppComponent 中，以便显示它。

    使用 UppercasePipe 来格式化英雄的名字。

    用 ngModel 指令实现了双向数据绑定。

    知道了 AppModule。

    把 FormsModule 导入了 AppModule，以便 Angular 能识别并应用 ngModel 指令。

    知道了把组件声明到 AppModule 是很重要的，并认识到 CLI 会自动帮你声明它。

    英雄指南应用在一个主从视图中显示了英雄列表。

    用户可以选择一个英雄，并查看该英雄的详情。

    使用 *ngFor 显示了一个列表。

    使用 *ngIf 来根据条件包含或排除了一段 HTML。

    可以用 class 绑定来切换 CSS 的样式类。

angular

1、安装node.js，npm

2、安装angular cli,使用 Angular CLI 来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布

3、使用npm安装 npm install -g @angular/cli

4、创建工作区和初始应用 ng new my-app，ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值

    Angular CLI 会安装必要的 Angular npm 包及其它依赖

    将创建下列工作区和初始项目文件：

        一个新的工作区，根目录名叫 my-app

        一个初始的骨架应用项目，也叫 my-app（但位于 src 子目录下）

        一个端到端测试项目（位于 e2e 子目录下）

        相关的配置文件

5、启用开发服务器

    cd my-app

    ng serve --open

6、使用 Angular CLI 创建一个名为 heroes 的新组件 ng generate component heroes

        1、CLI 创建了一个新的文件夹 src/app/heroes/，并生成了 HeroesComponent 的三个文件

        import { Component, OnInit } from '@angular/core';

        //要从 Angular 核心库中导入 Component 符号，并为组件类加上 @Component 装饰器

        //@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据

        @Component({

         selector: 'app-heroes', // 组件的选择器（css元素选择器）

         //CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。

         templateUrl: './heroes.component.html', //组件模板文件的位置

         styleUrls: ['./heroes.component.css']  //组件私有CSS样式表文件的位置

        })

        export class HeroesComponent implements OnInit {

         constructor() { }

        

        //ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方

        //始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它

         ngOnInit() {

         }

        }

7、使用 UppercasePipe 进行格式化

    <h2>{{hero.name | uppercase}} Details</h2> 将其字母转换为大写

    

8、[(ngModel)] 是 Angular 的双向数据绑定语法，属于一个可选模块FormsModule，你必须自行添加此模块才能使用该指令

     <input [(ngModel)]="hero.name" placeholder="name">

9、导入FormsModule

    Angular需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。这些信息被称为元数据（metadata）。

    有些元数据位于 @Component 装饰器中，你会把它加到组件类上。 另一些关键性的元数据位于 @NgModule 装饰器中。

    最重要的 @NgModule 装饰器位于顶级类 AppModule 上

        打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号

        然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中

10、创建模拟（mock）的英雄数据

    在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 的文件。 定义一个包含十个英雄的常量数组 HEROES，并导出它

11、使用 *ngFor 列出这些英雄，*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素

        <li *ngFor="let hero of heroes">

        <li> 就是 *ngFor 的宿主元素

        heroes 就是来自 HeroesComponent 类的列表。

        当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。

12、主从结构，添加 click 事件绑定

    再往 <li> 元素上插入一句点击事件的绑定代码：<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

    click 外面的圆括号会让 Angular 监听这个 <li> 元素的 click 事件。 当用户点击 <li> 时，Angular 就会执行表达式 onSelect(hero)

    onSelect() 是 HeroesComponent 上的一个方法，你很快就要写它。 Angular 会把所点击的 <li> 上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个

13、添加 click 事件处理器

    把该组件的 hero 属性改名为 selectedHero，但不要为它赋值。 因为应用刚刚启动时并没有所选英雄

    添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性

        selectedHero: Hero;

        onSelect(hero: Hero): void {

        this.selectedHero = hero;}

14、使用 *ngIf 隐藏空白的详情 <div *ngIf="selectedHero">

15、使用css给所选英雄添加样

        Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。

        只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了

            [class.selected]="hero === selectedHero"

        如果当前行的英雄和 selectedHero 相同，Angular 就会添加 CSS 类 selected，否则就会移除它

            <li *ngFor="let hero of heroes"

            [class.selected]="hero === selectedHero"

            (click)="onSelect(hero)">

            <span class="badge">{{hero.id}}</span> {{hero.name}}

            </li>

16、待续---