Angular 测试和使用记录

Angular 开发环境配置方式

• 基于 Angular Quickstart

https://github.com/angular/quickstart

• 基于 Angular CLI

npm install -g @angular/cli

我这次采用了第一种方式搭建环境

1. 下载项目包后解压

2. 使用vscode打开项目目录并执行npm install命令，也可以之间命令行进入目录执行npm install，安装相关依赖

3. 依赖安装完后vscode执行npm start命令启动项目

4. 项目启动完毕后，浏览器会弹出http://localhost:3000/，页面上显示了Hello Angular字样

看代码之前，先把Angular2语法快速指南挂上

Angular for TypeScript 语法快速指南 (基于2.0.0版本)

引导	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);	使用JIT编译器引导一个AppModule模块定义的应用

NgModules	import { NgModule } from '@angular/core';
@NgModule({ declarations: ..., imports: ...,      exports: ..., providers: ..., bootstrap: ...}) class MyModule {}	定义一个模块，其中包括组件、指令、管道和提供商。
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]	一个数组，包括从属于当前模块的组件、指令和管道。
imports: [BrowserModule, SomeOtherModule]	一个数组，包括被导入到当前模块中的所有模块。来自被导入模块的declarations也同样对当前模块有效。
exports: [MyRedComponent, MyDatePipe]	一个数组，包括对导入当前模块的模块可见的组件、指令、管道。
providers: [MyService, { provide: ... }]	一个数组，包括在对前模块及导入当前模块的模块中的内容物（组件、指令、管道、提供商等）可见的依赖注入提供商。
bootstrap: [MyAppComponent]	一个数组，包括由当前模块引导时应该引导的组件

模板语法
<input [value]="firstName">	把属性value绑定到表达式firstName的结果。
<div [attr.role]="myAriaRole">	把role这个Attribute绑定到表达式 myAriaRole的结果。
<div [class.extra-sparkle]="isDelightful">	把元素是否出现CSS类extra-sparkle，绑定到一个表达式isDelightful的结果是否为真。
<div [style.width.px]="mySize">	把样式的width属性绑定到表达式mySize的结果，以px为单位。这个单位是可选的。
<button (click)="readRainbow($event)">	当按钮(及其子元素)上的click事件被触发时，调用readRainbow方法，并把事件对象作为参数传入。
<div title="Hello { {ponyName}}">	把属性绑定到一个插值表达式字符串，比如 "Hello Seabiscuit"。它等价于： <div [title]="'Hello ' + ponyName">
<p>Hello { {ponyName}}</p>	把文本内容绑定到一个插值表达式，比如 "Hello Seabiscuit".
<my-cmp [(title)]="name">	设置双向数据绑定。等价于：<my-cmp [title]="name" (titleChange)="name=$event">
<video #movieplayer ...>   &l