一、安装

 

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/angular2todoeshttps://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#articleHeader17http://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.htmlhttp://www.cnblogs.com/longhx/p/6960288.htmlhttp://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/