angular CLI 安装
一、安装
1、查看 npm 源 是否 淘宝，如果不是 淘宝源 安装的时候可能出错！
npm config get registry
2、清除缓存
npm cache clean
3、切换 npm 源
//临时使用 npm --registry https://registry.npm.taobao.org //持久使用 （一般都是持久使用） npm config set registry https://registry.npm.taobao.org
以下是源地址：
4、查看 npm 配置
npm config ls -l
5、安装 @angular/cli
npm install -g @angular/cli@latest // @latest 表示安装最新版本 // -g 表示全局安装
二、查看版本
//查看 @angular/cli 版本 ng -v
三、新建项目
//新建项目 --style为项目采用什么样式（scss、sass、less、css）来进行编写（自己使用的是scss） ng new project_name --style=scss //进入项目盘符 cd project_name //启动项目 ng serve ng start //自定义启动项目 --host为配置IP --port为端口号 --live-reload-port为重载端口号 ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
四、打包项目
ng build // --prod:cli会把用不到的包删除 --aot:启动预编译特性 --aot=false:不启动预编译特性 ng build --prod --aot
五、常用 新建项目文件 命令
//新建组件 ng g component my-new-component //新建指令 ng g directive my-new-direcive //新建管道 ng g pipe my-new-pipe //新建服务 ng g service my-new-service //新建类 ng g class my-new-class //新建接口 ng g interface my-new-interface //新建枚举 ng g enum my-new-enum //新建模型 ng g module my-new-module
六、事件
//当数据绑定输入属性的值发生变化时调用 ngOnChanges //在第一次 ngOnChanges 后调用 ngOnInit //自定义的方法，用于检测和处理值的改变 ngDoCheck //在组件内容初始化之后调用 ngAfterContentInit //组件每次检查内容时调用 ngAfterContentChecked //组件相应的视图初始化之后调用 ngAfterViewInit //自检每次检查视图时调用 ngAfterViewChecked //指令销毁前调用 ngOnDestroy
七、本地化存储
在网站开发过程中，总有一些类似记录用户喜好的数据需要保存在客户端，比如记住用户名密码等。常规第一反应是适用cookie，但是cookie的使用有诸多的限制。于是HTML5规范出来了LocalStorage，大小为5M。
Angular2 关于 LocalStorage 的使用在 GitHub 上有些例子，但大多都是基于2.0.*或是beta版本的。以下是通过 GitHub 的例子进行修改出来的！
参考 GitHub 项目
https://github.com/NilsHolger/angular2todoes https://github.com/rrgarciach/angular2-local-storage
相关资料：
//理解 Angular 基础概念和结构： http://www.cnblogs.com/1wen/p/5446863.html //Angular 依赖包详解： http://blog.csdn.net/feiying008/article/details/53033704 //Angular CLI 使用教程指南参考： https://segmentfault.com/a/1190000007874819#articleHeader17 http://www.cnblogs.com/ckAng/p/6693702.html //Angular CLI 项目如何使用SASS： http://www.cnblogs.com/yujunhua/p/6762256.html //如何优雅升级 Angular 项目： http://blog.csdn.net/shrimpcolo/article/details/53225066 //AngularJS4 组件通讯方法大全： http://www.cnblogs.com/huangenai/p/7246651.html http://www.cnblogs.com/longhx/p/6960288.html http://blog.csdn.net/liuyu5210/article/details/76559957 //Angular 修仙之路： https://segmentfault.com/a/1190000008754631?utm_source=debugrun&utm_medium=referral //Angular 关于组件的生命周期： http://blog.csdn.net/kuangshp128/article/details/71194188 //AngularJS2、4 父子组件通讯 异步问题： https://segmentfault.com/q/1010000008965321 //AngularJS2、4 Directive 指令： https://segmentfault.com/a/1190000008626070 //Angular初学者快速上手教程： http://gitbook.cn/gitchat/column/59dae2081e6d652a5a9c3603 //Element Angular 发布了 0.3.1 版本，全面更新至 Element UI 2.0。大部分组件都得到改版升级。有兴趣的同学可以看项目： https://github.com/eleme/element-angular //Angular ngModel双向绑定原理揭秘： https://segmentfault.com/a/1190000009126012 //Angular Output： https://segmentfault.com/a/1190000008794323 //TypeScript接口： http://www.typescriptlang.org/docs/handbook/interfaces.html //Web Api： https://developer.mozilla.org/zh-CN/docs/Web/API //NodeJS Event模块： http://blog.csdn.net/u011127019/article/details/52399410 //大漠穷秋的相关网站： //达人课： http://gitbook.cn/gitchat/column/59dae2081e6d652a5a9c3603 //博客： https://my.oschina.net/mumu/blog/?sort=time&temp=1509587924696 //慕课网： http://www.imooc.com/u/103747/courses //Bootstrap Admin： https://colorlib.com/wp/bootstrap-admin-templates/
