学习Angular2框架

知识点

一.环境配置

1. 安装node (node -v /npm -v)
2. 安装Angular-cli (ng -v)

二.项目启动 ng serve

1. 搭建Angular项目:ng new 项目名称
2. 依赖文件包node_moudle：npm install 依据文件package.json 配置
3. 第三方文件引用：.angular-cli.json配置
4. 全局样式styles.scss写入，可以import导入第三方css文件
5. 编译压缩启动 ng serve --prod --aot
6. 创建组件 ng g c xxxx(组件名称) ; ng g c user
7. 了解@NgModule
   1.概念
   一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。
   NgModule 最根本的意义是帮助开发者组织业务代码，开发者可以利用 NgModule 把关系比较紧密的组件组织到一起，这是首要的。
   NgModule 用来控制组件、指令、管道等的可见性，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 NgModule 导出（ exports ）的内容，这一特性非常类似 Java 里面 package 的概念。也就是说，如果你定义的 NgModule 不 exports 任何内容，那么外部使用者即使 import 了你这个模块，也没法使用里面定义的任何内容。
   它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。
   NgModule 是 @angular/cli 打包的最小单位。
   2.属性
   declarations：用来放组件、指令、管道的声明。
   imports：用来导入外部模块。
   exports（导出表） — 那些能在其它模块的组件模板中使用的可声明对象的子集
   providers：需要使用的 Service 都放在这里。
   bootstrap：定义启动组件。——应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
   
8. 了解 @ViewChild
   @ViewChild和@ViewChildren是Angular提供给我们的装饰器，用于从模板视图中获取匹配的元素。
   需要注意的是@ViewChild和@ViewChildren会在父组件钩子方法ngAfterViewInit调用之前赋值。
   实际上就是父Component把子Component的东西拿过来用而已。

能够拿哪些东西呢？

整个的Component：（通过class名称）@ViewChild(TodoComponent) private todoList: TodoComponent; 然后就可以任意调用子Component中的方法了
拿变量：如子Component中构造器中接收的Service、一些非private的变量
拿DOM：直接获取子组件HTML页面中的DOM，该DOM需要用#命名。如<div #domLabel>cba</div>。这个设置的命名，有个单独的名称，模板应用变量。
拿指令：添加exportAs属性，方便查找。