Angular-Session2

模板简介

应用程序中的每个 Angular 模板都是一块 HTML，Angular 中的 HTML 模板与常规 HTML 一样，可以在浏览器中渲染视图或用户界面，但功能要多得多，比如Angular 可以通过内置的模板函数、变量、事件监听和数据绑定等功能来帮助你动态获取和设置 DOM（文档对象模型）中的值。

文本插值

将动态字符串值合并到 HTML 模板中。优点：可以动态更改应用视图中显示的内容。

使用插值语法显示值

<label>Company Name: {{ companyName }}</label>
<img src="{{ imageUrl }}">

模板表达式

Angular 解析该表达式并将其赋值给绑定目标的某个属性。目标可以是 HTML 元素、组件或指令。

<p>{{ 1 + 1 }}</p>
<!-- 2 -->
<p>{{ '1' + 1 }}</p>
<!-- 11 -->
<p>{{1 + getTen()}}</p>
getTen() {
  return 10
}
<!-- 11 -->
<!-- 报错 -->
<p>{{ 1 - '1' }}</p>
<p>{{1 + Math.random()*10}}</p>
<!-- 模板表达式不能引用全局命名空间中的任何东西，比如 window 或 document。它们也不能调用 console.log 或 Math.max。 它们只能引用表达式上下文中的成员。 -->

不支持包括：

• 赋值 (=, +=, -=, …)
• 运算符，比如 new、typeof 或 instanceof 等。
• 使用 ; 或 , 串联起来的表达式
• 自增和自减运算符：++ 和 —
• 一些 ES2015+ 版本的运算符
• 不支持位运算，比如 | 和 &
• 新的模板表达式运算符，例如 |，?. 和 !

表达式上下文

组件实例

<label>Company Name: {{ companyName }}</label>
<img src="{{ imageUrl }}">

表达式也可以引用模板上下文中的属性：

模板输入变量

<div *ngFor="let item of imageList">
    <img src="{{ item }}">
</div>

模板引用变量

<label>Type something:
  <input #customerInput>{{ customerInput.value }}
</label>

防止命名冲突

Angular 将应用以下逻辑来确定上下文：

1. 模板变量的名称。
2. 指令上下文中的名称。
3. 组件成员的名称。

规则

• 使用短表达式：尽可能使用属性名称或方法调用
• 快速执行：尽快完成，以保持用户体验的性能
• 没有可见的副作用：视图应在整个渲染过程中保持稳定

代替{{ }}

interpolation?: [string, string]

@Component({
    selector: 'xxxx',
    templateUrl: './xxxx.component.html',
    styleUrls: [ './xxxx.component.less' ],
    interpolation: ["((","))"]
})

模板语句

模板语句是可在 HTML 中用于响应用户事件的方法或属性。使用模板语句，你的应用可以通过诸如显示动态内容或提交表单之类的动作吸引用户。

<button (click)="helloWorld()">Hello Word</button>
<!-- 这里的helloWorld()就是模板语句 -->

不支持：

• new
• 递增和递减运算符 ++ 和 —
• 赋值运算符，例如 += 和 -=
• 按位运算符，例如 | 和 &
• 管道操作符

语句上下文

组件实例

<button (click)="helloWorld()">Hello Word</button>

模板自身属性

<button (click)="clickBtn($event)">Btn</button>

模板输入变量

<button *ngFor="let imageUrl of imageList" (click)="showImgUrl(imageUrl)">{{imageUrl}}</button>

模板引用变量

<input #customerInput (keyup)="0">
    <!-- (keyup)="0"使angular更新屏幕 -->
<button (click)="showCustomerInput(customerInput)">customerInput</button>

规则

• 简明：只使用方法调用或基本属性赋值，让模板语句最少化
• 在上下文中工作：模板语句无法引用全局名称空间中的任何内容，例如 window 或 document。例如，模板语句不能调用 console.log() 或 Math.max()

管道

管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值。

Angular 为典型的数据转换提供了内置的管道，数据格式化常用的内置管道如下：

• DatePipe：根据本地环境中的规则格式化日期值。
• UpperCasePipe：把文本全部转换成大写。
• LowerCasePipe ：把文本全部转换成小写。
• CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
• DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
• PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

基本用法

<p>{{ nowDate | date }}</p>
nowDate = new Date();

使用参数和管道链来格式化数据

<!-- 用可选参数微调管道的输出 -->
{{ amount | currency:'EUR' }}   // €1,000.00
<!-- 如果管道能接受多个参数，就用冒号分隔这些值。 -->
{{ amount | currency:'EUR':'Euros '}}   // Euros 1,000.00
<!-- SlicePipe从一个 Array 或 String 中创建其元素一个新子集（slice）。 -->
{{ '12345' | slice:1:3 }}   // 23
{{ ['1', '2', '3', '4', '5'] | slice:1:3 }}   // 2,3
<!-- 参数还可以是一个函数 -->
<p>{{ nowDate | date:format }}</p>
<button (click)="toggle = !toggle">Toggle Date</button>
get format(){
    return this.toggle ? 'shortDate' : 'fullDate';
}

通过串联管道应用两种格式

<p>{{ nowDate | date | uppercase }}</p>
<!-- 注意逻辑顺序，以下顺序会报错 -->
<!-- <p>{{ nowDate | uppercase | date }}</p> -->

创建自定义管道

ng g pipe <pipeName>

在产生的.pipe.ts文件里，添加管道逻辑。

检测变更

通过默认情况下，管道会定义成纯的(pure)，这样 Angular 只有在检测到输入值发生了纯变更时才会执行该管道。纯变更是对原始输入值（比如 String、Number、Boolean 或 Symbol ）的变更，或是对对象引用的变更（比如 Date、Array、Function、Object）。
使用纯管道，Angular 会忽略复合对象中的变化。如果修改了输入数组，纯管道就不会执行。如果替换了输入数组，就会执行该管道并更新显示。

检测复合对象中的非纯变更

要在复合对象内部进行更改后执行自定义管道（例如更改数组元素），就需要把管道定义为 impure 以检测非纯的变更。每当按键或鼠标移动时，Angular 都会检测到一次变更，从而执行一个非纯管道。

@Pipe({
  name: 'xxxxx',
  pure: false
})

• 虽然非纯管道很实用，但要小心使用。长时间运行非纯管道可能会大大降低你的应用速度。

管道优先级

管道操作符要比三目运算符(?:)的优先级高，这意味着 a ? b : c | x 会被解析成 a ? b : (c | x)。
由于这种优先级设定，如果你要用管道处理三目元算符的结果，就要把整个表达式包裹在括号中，比如 (a ? b : c) | x。

属性绑定

Angular 中的属性绑定可帮助你设置 HTML 元素或指令的属性值。

方括号 [] 使 Angular 将等号的右侧看作动态表达式进行求值

<input [id]="title">

不使用方括号，Angular 就会将右侧视为字符串字面量并将此属性设置为该静态值

<input id="title">

设置指令属性

Angular 会将 special 类应用到 元素

<label [ngClass]="classes"></label>
classes = 'special';

组件之间绑定

<child-demo [childItem]="parentItem"></child-demo>

安全性

这里不会处理 HTML，而是原样显示它

<p>{{ riskStr }}</p>
riskStr = 'KPMG Company<script>alert("hahahaha")</script>NJ KDI'
<!-- KPMG Company<script>alert("hahahaha")</script>NJ KDI -->
<!-- Angular 不允许带有 <script> 标记的 HTML，既不能用于插值也不能用于属性绑定 -->

无害化

<p [innerHTML]="riskStr"></p>
riskStr = 'KPMG Company<script>alert("hahahaha")</script>NJ KDI'
<!-- KPMG CompanyNJ KDI -->

属性绑定和插值

插值和属性绑定可以达到相同的结果。以下绑定会做相同的事

<img [src]="imageUrl">
<img src="{{imageUrl}}">

• 将数据值渲染为字符串时，可以使用任一种形式，只是插值形式更易读。但是，要将元素属性设置为非字符串数据值时，必须使用属性绑定。

Attribute、class、style绑定

Attribute绑定

有时你没有可绑定的元素 Property。在这种情况下，可以使用 Attribute 绑定。（ARIA/SVG）
ARIA：

<button [attr.aria-label]="title">{{title}} with Aria</button>
<table border='1'>
    <tr><td [attr.colspan]="1 + 1">合并单元格</td></tr>
    <tr><td>1</td><td>2</td></tr>
</table>

单class绑定

<div [class.active]="active"></div>

多class绑定

<!-- 字符串 -->
<div [class]="'redBorder blueBackground'"></div>
<!-- 数组 -->
<div [class]="['redBorder', 'blueBackground']"></div>
<!-- 对象 -->
<div [class]="{redBorder:true, blueBackground:true}"></div>

• 对于任何类似对象的表达式（例如 object、Array、Map 或 Set，必须更改对象的引用，Angular 才能更新类列表。在不更改对象引用的情况下只更新其 Attribute 是不会生效的。

单style绑定

<div [style.background-color]="'lightblue'"></div>

多style绑定

<div [style]="'width:100px;height:100px;background:lightblue'"></div>
<div [style]="{width:'100px',height:'100px',background:'lightblue',marginTop:'10px'}"></div>

• 不支持把数组绑定给 [style]
• 当把 [style] 绑定到对象表达式时，该对象的引用必须改变，这样 Angular 才能更新这个类列表。在不改变对象引用的情况下更新其属性值是不会生效的。

注入属性值

场景：需要知道 或 元素的 type 值。

<app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>
@Component({
  selector: 'app-my-input-with-attribute-decorator',
  template: 'The type of the input is: {{ type }}'
})
export class MyInputWithAttributeDecoratorComponent {
  constructor(@Attribute('type') public type: string) { }
}
<!-- The type of the input is: number -->

事件绑定

基本用法

通过事件绑定，你可以侦听并响应用户操作，例如按键、鼠标移动、点击和触摸。

子父组件通讯

<child-demo (childRequest)="fatherFunc()"></child-demo>

模板引用变量

模板变量可以帮助你在模板的另一部分使用这个部分的数据。

<!-- 在 <input> 元素上声明了一个名为 phone 的变量 -->
<input #phone placeholder="phone number" />
<!-- 在组件模板中的任何地方引用某个模板变量。这里的 <button> 就引用了 phone 变量。 -->
<button (click)="callPhone(phone.value)">Call</button>

NgForm 与模板变量一起使用

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
    <label for="name">Name <input class="form-control" name="name" ngModel required />
    </label>
    <button type="submit">Submit</button>
</form>
<div [hidden]="!itemForm.form.valid">
    <p>valid</p>
</div>
<!-- 如果没有 ngForm 这个属性值，itemForm 引用的值将是 HTMLFormElement 也就是 <form> 元素 -->
<!-- 使用了 NgForm 之后，itemForm 就是对 NgForm 指令的引用，可以用它来跟踪表单中每一个控件的值和有效性 -->

模板变量的作用域

<input #phone2 placeholder="phone number" />
<button *ngIf="true" (click)="callPhone(phone2.value)">Call</button>

上面的button可以正确访问到#phone2的value值，因为子模板会从父模板继承上下文

<input *ngIf="true" #phone3 placeholder="phone number" />
<button (click)="callPhone(phone3.value)">Call</button> -->

而这样则会报错，原因在于上面的代码有一个包含 的隐式 ，如下

<ng-template [ngIf]="true">
  <input #phone3 placeholder="phone number" />
</ng-template>

从外部的父模板访问本模板中的变量是行不通的

访问 的模板变量

在 上声明变量时，该变量会引用一个 TemplateRef 实例来表示该模板

<ng-template #ref3></ng-template>
<button (click)="log(ref3)">Log type of #ref</button>
<!-- TemplateRef {_declarationLView: LComponentView_MainComponent(721), _declarationTContainer: TNode, elementRef: ElementRef} -->
<!-- 因为 #ref 变量在 <ng-template> 上，所以它的值是一个 TemplateRef -->

SVG 用作模板

SVG 也可以用作模板，下面的例子是使用了属性绑定事件绑定与来改变svg的颜色。

<svg>
    <g>
        <rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" />
        <text x="120" y="50">click the rectangle to change the fill color</text>
    </g>
</svg>

angular 模块的理解

1. 前端模块化的理解
2. Angular Module 有什么作用
3. 如何定义一个Angular module @ngModule()装饰器的使用
4. Angular 本身有哪些常用的Module
5. 在工程中实际运用Module

Angular Module

前端模块化的发展

JavaScript脚本语言的推出处理浏览器人机交互，可随着web应用的交互复杂化，丰富化，脚本代码的可组织重用性、隔离性、可维护性、版本管理、依赖管理等问题就浮现出来，自然而然的javascript 就走上了模块化发展的道路。

最初的javascript模块化特性实现

最早使用 Script 标签、组织目录文件，闭包，利用对象模拟命名空间等方法来实现一个重用性，隔离性的特性

var app = {};
app.hello = {
    sayHi: function(){
        console.log('Hi');
    },
  sayHello: function(){
        console.log('Hello');
  }
}

CommonJS模块化规范的制定

• 上面的这些方法并不能很好的解决可组织重用性、隔离性、可维护性、版本管理、依赖管理这些问题，09年CommonJS 社区以此发展出了很多的模块化规范（CMD,AMD之类的）（node.js 基于CommonJs规范发布），这些规范以及加载库的提出解决了前端依赖管理等一些问题,

• 模块化写法浏览器并不能直接执行， webpack 工具的出现解决打包编译的问题。 ```bash //hello.js function hello(){ this.sayHi = function(){ console.log( “Hello foo” ); }

  this.sayHello = function(){ console.log( “Hello bar” ); } }

module.exports.hello = hello;

var hello = require(“./hello”).hello, test = new hello(); test.hello()

<a name="feCXt"></a>
#### 原生语言层面的支持
- ES6 中将Module作为标准模块化规范，ES6 module与CommonJS CMD 规范的差异？？？
<a name="Jm3jC"></a>
#### Angular Module
- Angular 定义了@NgModule(） 装饰器 ，为一个组件集声明了编译的上下文环境，（意味着angular Module 是angular 打包的最小单位）它专注于某个应用领域、某个工作流或一组紧密相关的能力，它可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。
- 像 JavaScript 模块一样，NgModule 也可以从其它 NgModule 中导入功能，并允许导出它们自己的功能供其它 NgModule 使用
- 得益于angular module 的设计，配置了异步模块后，angular cli comper 会自动把模块切分成独立的chunk,其他的框架需要webpack 去配置代码分割
<a name="LXSuI"></a>
### Angular @NgModule的使用
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LifecycleComponent } from "./lifecycle/lifecycle.component";
import { MainComponent } from "./main/main.component";
import { OnChangeComponent } from "./onChange/on-change.component";
import { SetterComponent } from "./setter/setter.component";
import { ViewChildComponent } from "./viewChild/view-child.component";
import { MyInputComponent } from "./my-input/my-input.component";
import { TemplateOutletComponent } from "./template-outlet/template-outlet.component";
@NgModule({
    /**
     * 那些属于本 NgModule 的组件、指令、管道
     * */
    declarations: [
        AppComponent,
        MainComponent,
        LifecycleComponent,
        OnChangeComponent,
        SetterComponent,
        ViewChildComponent,
        MyInputComponent,
        TemplateOutletComponent
    ],
    /**
     *  用来导入外部模块
     * */
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule
    ],
    /**
     *  需要使用的 Service 都放在这里
     * */
    providers: [],
    /**
     *  应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性
     * */
    bootstrap: [ AppComponent ]
})
export class AppModule {
}
    /**
     *  应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性
     * */

Angular 本身有哪些常用的Module

本次小练习：
1.在工程中新建一个share.module 作为共用 module,并将此组件集成到这个module 中，作为共用组件
2.在此module 增加一个 DatePipe组件，组件接受传入一个日期类型属性date，和一个日期format 属性 可传入’yyyy-mm-dd’等日类型，通过日期管道 将传入的 date，按照传入format 做日期转换
3.在其他的module 中的组件里使用这个组件