一、安装
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
以下是源地址:
![](https://i-blog.csdnimg.cn/blog_migrate/e1b702aeb515ab9928067313d72a6ddc.png)
4、查看 npm 配置
npm config ls -l
5、安装 @angular/cli
npm install -g @angular/cli@latest
// @latest 表示安装最新版本
// -g 表示全局安装
![](https://i-blog.csdnimg.cn/blog_migrate/38b82224d86c51fafa4a3596f96c5678.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8c0ca9c3d6a26bf21f9d94e881d9483e.png)
二、查看版本
//查看 @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/