angular CLI 安裝

1、安裝

 

一、查看 npm 源 是否 淘寶，若是不是 淘寶源 安裝的時候可能出錯！

 

npm config get registry

 

二、清除緩存

 

npm cache clean

 

三、切換 npm 源  

 

//臨時使用
npm --registry https://registry.npm.taobao.org
//持久使用  （通常都是持久使用）
npm config set registry https://registry.npm.taobao.org

 

如下是源地址：

 

 

 

四、查看 npm 配置

 

npm config ls -l

 

五、安裝 @angular/cli

 

npm install -g @angular/cli@latest
// @latest 表示安裝最新版本
// -g 表示全局安裝

 

 

 

2、查看版本

 

//查看 @angular/cli 版本
ng -v

 

3、新建項目

 

//新建項目 --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

 

4、打包項目

 

ng build
// --prod:cli會把用不到的包刪除  --aot:啓動預編譯特性 --aot=false:不啓動預編譯特性
ng build --prod --aot

 

5、經常使用 新建項目文件 命令

 

//新建組件
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

　　

6、事件

 

//當數據綁定輸入屬性的值發生變化時調用
ngOnChanges
//在第一次 ngOnChanges 後調用
ngOnInit
//自定義的方法，用於檢測和處理值的改變
ngDoCheck
//在組件內容初始化以後調用
ngAfterContentInit
//組件每次檢查內容時調用
ngAfterContentChecked
//組件相應的視圖初始化以後調用
ngAfterViewInit
//自檢每次檢查視圖時調用
ngAfterViewChecked
//指令銷燬前調用
ngOnDestroy

　　

7、本地化存儲

 

在網站開發過程當中，總有一些相似記錄用戶喜愛的數據須要保存在客戶端，好比記住用戶名密碼等。常規第一反應是適用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

//AngularJS二、4 父子組件通信 異步問題：
https://segmentfault.com/q/1010000008965321

//AngularJS二、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/