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/