Angular学习笔记（第一天）

1、概述
   框架:
     是一套优秀的代码集合，需要学习框架的理念，再按照框架的规则和语法要求来使用框架 来完成快速开发
   库。09年 由Google所推出的js框架，采用模块化的开发方式，在各个模块中 来封装组件、服务、指令、管道等来实现业务功能。

2、应用场景：中大型 超大型SPA(单页面应用 single page application)

3、与vue对比：

        vue：整个应用全是组件
       angular：整个应用，可以分两层，先有模块，再有组件

4.优势： 

     ①angular可以面对更复杂的开发需求
     ②采用ts(TypeScript 微软所推出 是es6的超集) ts是一种强类型约束的语言
     ③angular有着非常丰富的类
     ④强大的cli工具

 

5、环境搭建：

      注：确认node版本

       npm install -g @angular/cli
       ng new my-app
       cd my-app
       ng serve --open

6、开发方式：

       采用组件来封装视图
       采用管道来封装筛选功能
       采用服务来实现方法或者数据的共享
       采用指令来增强html功能

7、组件的创建：
      在ng的工程中，借助于cli工具
      ng g component demo01
    在根组件页页面调用:
      <app-demo01></app-demo01>

8、常用指令：

     <any *ngFor="let tmp of myList">
    </any>
        <any *ngFor="let tmp of myList;let myIndex=index">
    </any>

//实现多重分支判断
    <div [ngSwitch]="answer">
      <p *ngSwitchCase="'a'">正确答案是A</p>
      <p *ngSwitchCase="'b'">正确答案是B</p>
      <p *ngSwitchCase="'c'">正确答案是C</p>
      <p *ngSwitchCase="'d'">正确答案是D</p>
      <p *ngSwitchDefault>请输入正确的答案</p>
    </div>
        score = 70
    <div [ngSwitch]="true">
      <p *ngSwitchCase="score>90">A</p>
      <p *ngSwitchCase="score>=80 && score<90">B</p>
      <p *ngSwitchCase="score>=60&&score<80">C</p>
      <p *ngSwitchDefault>D</p>
    </div>

9、事件绑定:
        <any (event)="handleEvent()"></any>
        触发了event事件 就会执行handleEvent这个方法（注意事项：事件处理函数携带括号）

10、属性绑定：

    <any [myProp]="expression"></any>
    将expression表达式执行的结果 给当前的标签的myProp属性去用

11、双向数据绑定：

①找到app.module.ts
      ②引入表单模块
       import {FormsModule} from '@angular/forms'
      ③调用表单模块
       在app.module.ts
       @NgModule({
         imports:[
           FormsModule
         ]
       })
     
     <表单元素 [(ngModel)]="变量"></表单元素>