1、Angular整体概述

这系列文章都是通过大漠孤烟的视频教程整理而来，挂个翻译标签不会被说什么侵权吧！

一、集成开发环境@angular/cli

开发angular项目时需要哪些node模块呢？@angular/cli：
- webpack
- TS
- Karma 单元测试
- Jasmine 单元测试
- protractor 量角器，集成测试，端到端测试
- Material Design

自己一个个安装、配置非常麻烦。所以出现了@angular/cli——A command line interface for Angular.

> npm install -g @angular/cli（这个安装修改能翻墙，墙内建议使用cnpm安装）
> ng --version
> ng help
> ng new my-deram-app
> cd my-dream-app
> ng serve



使用@angular/cli可以用命令生成下面的各种东西：
> ng generate cl    // 生成class
> ng generate c     // component
> ng generate d     // directive
> ng generate e     // enum
> ng generate m     // module
> ng generate p     // pipe
> ng generate s     // service
命令有简化版本：
> ng g c User

有这样一个集成了上面所有node模块的angular/cli，这是angular与其他前端框架最大的特色（全家桶式）。

@angular/cli：
- 在windows下面，node-gyp这个包依赖于Visual Studio
- node-sass这个node模块被墙掉了，原因不明
- 所以强烈推荐使用cnpm安装

使用@angular/cli的ng serve命令就会自动开启一个轻量级的server，而不用自己去启动一个重量级的Tomcat之类的。

> ng serve --prod   // 加上prod参数，会自动怎么怎么AOT来着，不懂

在它生成好的模板中写上自己的测试用例，然后运行ng test命令，它就会自动启浏览器去帮你跑你的测试用例，帮你生成报告。

在@angular/cli命令行中运行ng，可以查看ng支持的所有命令，平常用得多的就是：

> ng new
> ng generate
> ng serve

二、Angular中的3大核心概念–围绕组件化

1.组件–Component

组件树（component tree）
单向数据流

AngularJS 1.x中，当一处发生变化之后，都是使用脏检查（dirty check）机制进行全局遍历看是否发生变化，这样在绑定了一个很大数据量的数组的时候，就需要很长时间，所以效率很差。Angular 2之后重新处理了这一块机制。Angular 2中可以在数据发生变动时，精确地从组件树中选取需要遍历检测的组件进行检测，而不需要整体遍历。

2.模块–NgModule

• component组件：展示层，用来显示数据，跟用户做交互
• service服务：真正在写业务时，仅仅有组件是不够的，还需要跟服务端进行交互，从后台拉数据，这些东西Angular都推荐写到Service中
• directive指令：需要操作DOM的代码，放在指令中
• route路由：需要管理浏览器地址栏地址的东西放在路由中

NgModule就是用来管理上面这所有四块东西的地方。

模块划分需要在“文件体积”和“请求数量”中取一个平衡。http请求量是有并发限制的，需要注意。

3.路由–router

前端为什么需要路由？
- 如果没有路由，浏览器的前进后退就没法用了。
- 如果没有路由，你就没有办法f复制地址分享给你的朋友了。

Angular路由用法–静态路由

const homeRoutes = [
    {path: 'home', component: HomeComponent}
];

将一个路径配置给一个component。（这些组件会后面打包成一个trunk。好像是这么说的，暂时还不太懂）

Angular路由用法–异步路由

const appRoutes = [
    {
        path: '',
        loadChildren: 'app/home/home.module'
    },{
        path: 'home',
        loadChildren: 'app/home/home.module'
    },{
        path: 'user',
        loadChildren: 'app/home/user.module'
    },{
        path: 'role',
        loadChildren: 'app/home/role.module'
    },{
        path: '**',
        loadChildren: 'app/home/home.module'
    }
];

把一个路径分配给一个module，（这样一个module就会被打成一个独立的trunk，这样module配合路由配合组件，就会自动划分 trunk，好像是这么说的，同样不懂。）

两种模式可以混用。

Angular路由用法–路由守卫

防止未授权访问

const manageRoutes = [
    {
        path: '',
        component: 'ManageComponent',
        canActivate: [AuthGuard], // 
        children:[
            {
                path: '',
                redirectTo: 'posttable/page/1',
                pathMatch: 'full'
            }, {
                path: 'posttable/page:page',
                conponent: 'PostTableConponent'
            }, {
                path: 'usertable/page:page',
                conponent: 'UserTableConponent'
            }, {
                path: 'usertable/edituser:userId',
                conponent: 'UserProfileConponent'
            }, {
                path: 'usertable/newuser',
                conponent: 'UserProfileConponent'
            }, {
                path: 'sysparam',
                conponent: 'SysParamConponent'
            }, {
                path: '**',
                redirectTo: 'posttable/page/1'
            }
        ]
    }
];

三、Angular架构特色

1，依赖注入

Spring中包含构造器注入，getter/setter注入，还可以通过工厂、反射等。Angular只包含构造器注入。

constructor(private activedRoute:ActivedRoute, private userListService: UserListService) {
    this.users = this.userListService.getUserList();
}

注入后，不用new对象，可以直接生成对象给你使用。这样会形成对象之间的解耦，否则如果直接依赖的话，如果改了a就需要修改依赖a的其他所有东西。

Injector（注射器）

在每一个html节点都有一个对应的Injector实例，所以Injector（注射器）也是一个树形结构。在一个树形结构中，我们就可以玩出很多花样，在子注射器实例中可以访问到父注射器对象，或者root注射器对象，可以访问他们的方法等。

<ul> // 父注射器
    <li></li> // 子注射器
    <li></li>
</ul>

• 每一个HTML标签上都会有一个注射器实例对象
• 注射是通过constructorji进行的
• @Component是@Injectablede 子类

2，双向数据绑定

简而言之，新版本的Angular已经通过使用ZoneJS、RxJS和Imuutable Data彻底重写了脏检查机制。所以在新版本中没有了所谓的绑定效率的问题。

自动找到需要刷新的组件树中的组件链，然后去刷新。

UI库

四个重量级的组件：
- 数据表格（DataGrid =》Ext.js）
- 树(Tree =》zTree）
- 日期选择器（datePicker）包括不同时区的日期转换
- 表单（form）表单的数据校验非常烦

市面上的一些组件库：
- PrimeNG：目前为止最完善的免费开源UI组件库
- NG-Zorro：来自阿里云的开源组件库
- Jigsaw：来自ZTE中兴通讯的开源组件库
- Clarity：来自VMWare的组件库
- Angular-Material：Angular官方提供的组件库（组件不多，但是是material-design的风格）
- Ionic：专门为Angular设计的移动端组件库

参考资源推荐

1，ng2-admin

外观很好看，代码复杂。

2，JHispter-后端基于SpringMVC

包含从前端到后端

3，NiceFish

是一个教学类型–来自大漠孤烟