angular-cli快速创建angular6项目

angular介绍

是Google开发的js前端框架；
可以开发移动端和桌面端；
已被Google用到600多种不同产品中，能满足不同场景下的开发需求，更适合开发现代Web应用；
从工程化角度出发的一个大而全的框架，提供了针对不同需求的多套完整的解决方案；
基于TS强类型开发，增强了ng项目的可维护性；性能高，体积小。Ivy是ng新一代的渲染引擎，ng和webpack的合作中，采用webpack的tree shaking的理念，将项目未用到的内容从框架中剥离出去，从而达到体积的缩减。
ng版本说明：

AngularJS -->  v1.x

Angular  -->  v2.x及其以上版本

项目是基于angular v6版本

angular-cli快速搭建项目

官方中文文档：http://www.angular.cn

Demo地址：https://github.com/lmy01/angular6_demo

开发环境：node 需要在8.0以上版本，npm需要在5.0以上版本

npm install -g @angular/cli

ng -v

ng new my-project

cd my-project

ng serve --open

项目目录介绍

配置tslint：修改成自己的开发风格
第一种方法：直接修改根目录下的/tslint.json；
第二种方法：在根目录下的/tslint.json找到需要的配置，将其复制到/src/tslint.json中并修改成需要的配置。

组件
组成部分：
[组件名称].component.html
[组件名称].component.css
[组件名称].component.ts
单元测试文件（可选）：[组件名称].component.spec.ts

模块

脚手架回自动会创建一个根模块/src/app/app.module.ts，每个应用至少要有一个根模块，命名为AppModule，根模块用来启动应用，每个模块是独立且封闭的，模块之间的引用通过导入导出来完成。
两个内置的模块：HttpModule/BrowserModule，另外可以自定义模块，如登录模块，用户管理模块等等。
模块中包含的内容：组件、服务、指令，这些内容必须要在模块中配置后才有效
根模块中@NgModule()装饰器，是一个函数，用来修饰紧随其后的类或者属性。
装饰器是JS的一种语言特性，处于语法天的stage2阶段，是一个实验特性。装饰器又叫注解，用来告诉ng将后面输出的AppModule当做模块来处理。

语法：@ngmModule({ 元数据对象 })
元数据对象说明：
declarations：该模块所拥有的组件和指令
imports：该模块所依赖的其他模块
providers：该模块所用的服务提供商，即服务
bootstrap:[AppModules]：引入，指定根组件，只有根模块中需要该配置，ng会把根组件插入到html中
exports：公开该模块其中的一部分，一边外部模块引用它们
组件的装饰器：app.component.ts

语法：@Component({ 元数据对象 })
元数据对象说明：
selector：‘选择器（组建名称）’，对应HTML中的组件名称，ng中的组件名称都要以ng-开头
templateUrl：’组件模板的路径’，或者如果模板结构简单，直接用template:”标签”也可以
styleUrls：[]，组件样式文件的路径，是一个数组可以指定多个样式文件

数据绑定

插值表达式：{{数据}}，可以直接用在标签的属性值上
属性绑定：[属性名]=“数据“，用插值表达式也可以，推荐属性绑定就使用属性绑定的方式
事件绑定：(事件名)=”方法调用”，事件对象在方法调用里写上$event，方法里也要写上形参
双向数据绑定：[(ng ngModel)]=”数据”， [(ngModel)]是固定写法，并且需要在根模块导入一个表单模块才能正确的进行数据双向绑定 import { FormsModule } from ‘@angular/forms’，然后在根模块的imports中导入这个模块
语言服务
在模板中能获得如下功能：vscode中安装Angular Language Service插件
自动完成，类似写js的时候的智能提示

指令

自定义的标签或者给现有标签中添加一些标记，给标签增加一个功能。上面的数据绑定的写法其实都是指令。

指令分类：

1.组件指令：拥有模板的指令：
2.属性型指令：改变匀速外观和行为的指令
[ngClass] 动态批量添加和移除CSS类名
[class.类名] 动态添加和移除一个类
[ngStyle] 动态添加内联样式
[style.fontSize] 动态添加一个样式

3.结构型指令：
*ngIf=“数据”，添加和移除DOM元素改变DOM布局的指令，非隐藏显示
*ngFor=“let item of数据; let i = index; let odd = odd; trackBy: trackById”，重复器，遍历数据，生成元素，
index无法再标签外使用，所以需要赋值给i变量，
odd奇数列返回true，偶数列返回false；
添加trackBy提升渲染对象数组的性能，只有在是遍历一个对象数组的时候才会出现性能问题（不添加trackBy时，修改一个数组中的值页面会全部刷新，加上trackBy时则只会刷新修改的值），如果是普通数组则不需要进行trackBy。

》》》未完待续…》》》》》》》