Angular

TypeScript  速查手册   https://www.w3cschool.cn/typescript/typescript-basic-types.html

Angular2教程     https://www.w3cschool.cn/angular2/angular2_directives.html

Angular2Training中文版   

https://zhangchen915.gitbooks.io/angular2-training/content/content/bootstrapping/bootstrapping_providers.html

快速开始已经废弃    https://github.com/angular/quickstart    

Angular2样板项目    https://github.com/gdi2290/angular-starter

Angular2 官网文章阅读指南   http://asdfblog.com/angular2-docs.html

0. 新建项目

安装Angular CLI 命令开发工具         npm install -g @angular/cli

（1）新建

ng new No001-HelloWorld

cd No001-HelloWorld

（2）新建后可以重复执行

ng serve              （或者   npm start   ）

http://localhost:4200/

或者       ng serve --open    （或-o）自动打开浏览器

打包发布    ng build --prod --aot     默认会把所有文件压缩并打包放入dist文件夹中，将dist放入服务器即可。????

参考： https://angular.io/guide/quickstart

1.  模块

@NgModule({

  declarations: [ EzComp ],      //本模块创建的组件，指令和管道的数组，加入到这个元数据中的组件才会被编译

  imports: [ BrowserModule ],  // 需要引入的外部NG模块，导入BrowserModule模块是一个根模块

  bootstrap: [ EzComp ],          // 声明启动引导哪个根组件，必须是编译过的组件，创建列在 bootstrap 数组的组件， 并将它们每一个都插入到浏览器的DOM中

  providers: [{

       provide: SensorReader, 

      useClass:MockSensorReader,

      deps:[]

   }] 

})

2. 服务

provide: 就是服务的标识（TOKEN），例如可以使用一个类型：SensorReader 框架用这个标识来存储和提取服务实例。

useClass：服务的提供类，例如：MockSensorReader

deps：服务的依赖项数组，每一项都是一个指向其他服务的标识，没有依赖项时 设置为空数组：[]

3. 组件

@Component({ 

  selector:'my-app',   //组件输出：标签名如<my-app></my-app>，不是类名

  template:'Hello, {{name}}!
',})

exportclassHelloComponent { @Input() name:string;}  //@Input()装饰器定义了一组可以从父组件传递的参数

<my-app name=“world"></my-app> 绑定到原始字符串

<my-app [name]="hello"></my-app> 绑定到父作用域

4. 指令

http://asdfblog.com/angular2-docs.html

@Directive({

selector:'[core-auto-focus]'

})

指令选择器：element-name：使用元素名称选择

.class：使用类名选择

[attribute]：使用属性选择

[attribute=value]：使用属性和值选择

:not(sub_selector)：只有当元素与sub_selector不匹配时才选择

selector1,selector2：选择择selector1或selector2

这里我们采用属性的方式指定选择器，在页面的使用是这样的(加粗部分)

<input type="text" id="name" input-trim />

如果你使用类名选择是这样的

<input type="text" id ="name" class="input-trim" />

5. 显示数据，用户输入

本地模板变量   http://asdfblog.com/angular2-docs.html        http://asdfblog.com/angular2-user-input.html

6. 热替换模式

npm run server:dev:hmr

意味者进入开发模式后，你可以打开 http://localhost:3000，当你修改ts文件时会自动重新编译，并以热替换的形式变更页面效果。