AngularJS5.0 (第一篇)

angular 1中提供了做用域，能夠存儲數據，實現數據綁定，可是出現了性能瓶頸；提供了指令，對DOM拓展，方便開發，佔用了更多的資源，沒有組件開發，一般是沒法複用的。

　　基於ES3.1版本開發的框架，沒法使用class，extends，import等關鍵字，沒法使用面向對象方式開發，不利於大型項目維護。

angular 5從新設計了angular，解決了性能問題，採用了組件開發，使得代碼得以複用。

　　基於ES6 ( 源碼基於Typescript語言開發 ) 語法開發的框架，所以支持，class，extends，import等關鍵字，支持面向對象的開發，着眼於大型項目的開發。

Github地址：https://github.com/angular/angular

　　通常用ng5表示angularjs5.0版本，angular團隊，爲了簡化ng5開發，提供了cli工具，因此須要先安裝cli

1，安裝nodejs：

　　https://nodejs.org/en/

2，全局範圍安裝cli：

　　npm install -g @angular/cli

3，建立一個新項目

　　ng new my-app

4，轉到項目目錄，並啓動服務器

　　cd my-app

　　ng serve --open

該ng serve命令啓動服務器，監視您的文件，並在您對這些文件進行更改時重建應用程序。

使用--open（或只是-o）選項會自動打開您的瀏覽器http://localhost:4200/。

您的應用使用如下消息迎接您：

 

Angular CLI 基本指令

 

名稱	做用
ng init	在當前目錄下建立應用
ng new	建立新的目錄並在新目錄下運行ng init命令
ng serve	啓動
ng doc	在瀏覽器中打開Angular文檔並搜索當前關鍵字
ng e2e	使用 protractor 在當前應用中運行e2e測試
ng format	使用 clang-format 格式化當前項目代碼
ng generate	在項目中構建新代碼
ng g	ng generate的簡寫
ng build	構建項目
ng github-pages:deploy [options]	將項目部署到GitHub Pages
ng version	輸出cli版本, node 版本和操做系統信息
ng set	設置環境

---

ng new

參數名	類型	默認值	做用
–dry-run	boolean	FALSE	只輸出要建立的文件和執行的操做，實際上並無建立項目
–verbose	boolean	FALSE	輸出詳細信息
–link-cli	boolean	FALSE	自動鏈接到angular-cli包
–skip-install	boolean	FALSE	在項目第一次建立時不執行npm install
–skip-bower	boolean	TRUE	不安裝bower
–skip-git	boolean	FALSE	不執行Git repository初始化工做
–directory	string	目錄名	默認與項目名稱同樣
–source-dir	string	‘src’	源文件目錄名
–style	string	‘css’	使用 (‘css’, ‘less’ 仍是 ‘scss’)編寫css
–prefix	string	‘app’	生成新組件的前綴
–mobile	boolean	FALSE	生成 Progressive Web App （PWA）項目
–routing	boolean	FALSE	添加帶路由的模塊(module)並import到main app module中
–inline-style	boolean	FALSE	生成新應用的時候使用inline styles(內聯，不生成單獨的css文件)方式
–inline-template	boolean	FALSE	生成新應用的時候使用 inline templates(內聯，不生成單獨的html文件)方式
0	無	無	使用Angular4的依賴建立空項目，如今默認已是4的版本了

---

ng serve

參數名	類型	默認值	做用
–host	string	12.0.0.1	自定義配置 IP
–disable-host-check	–	–	跟在–host後面,容許使用localhost之外的host打開項目
–port	number	4200	自定義端口號
–live-reload-port	number	4200	時時重載端口號
–hmr	–	–	熱替換

---

ng generate支持的類型

名稱	示例
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module
Route	ng g route my-route 當前已禁用

---

命令參數

ng generate class

參數名	類型	默認值	做用
–spec	boolean	FALSE	生成對應的單元測試文件

---

ng generate component

參數名	類型	默認值	做用
–flat	boolean	FALSE	在src/app中生成component文件，而不是在當前目錄下
–inline-template	boolean	FALSE	使用inline template，而不是獨立的HTML文件
–inline-style	boolean	FALSE	使用inline styles，而不是獨立的CSS文件
–prefix	boolean	TRUE	使用在angular-cli.json指定的前綴來生成component selector（前綴表示selector的第一個單詞）
–spec	boolean	TRUE	生成對應的單元測試文件

---

ng generate directive

參數名	類型	默認值	做用
–flat	boolean	FALSE	在src/app中生成component文件，而不是在當前目錄下
–prefix	boolean	TRUE	默認true, 使用在angular-cli.json指定的前綴來生成component selector（前綴表示selector的第一個單詞）
–spec	boolean	TRUE	生成對應的單元測試文件

---

ng generate module

參數名	類型	默認值	做用
–routing	boolean	FALSE	新增一個與module對應的路由模塊，並import到module中
–spec	boolean	FALSE	用於檢測模塊是否存在

---

ng generate service

參數名	類型	默認值	做用
–flat	boolean	TRUE	在src/app中生成component文件，而不是在當前目錄下
–spec	boolean	TRUE	生成單元測試文件

---

ng build

參數名	類型	默認值	做用
–aot	string	無	預編譯
–base-href	string	‘/’	設置index.html文件中的base href參數
–environment	string	dev	在哪一個環境中使用,prod表明生成環境
–output-path	string	dist	文件輸出目標路徑
–target	string	development	development:默認值，不壓縮混淆，production:壓縮混淆代碼
–watch	boolean	FALSE	在哪一個環境中使用

ng github-pages:deploy

參數名	類型	默認值	做用
–message	string	無	構建的時候提交的message，必須寫在引號中
–target	string	development	使用的環境
–user-page	boolean	FALSE	是否以user/org頁面部署到GitHub上
–skip-build	boolean	FALSE	跳過構建直接部署
–gh-token	string	無	使用Github的token
–gh-username	string	無	使用Github用戶名
–base-href	string	‘/’	在index.html文件中使用的base href值

ng set

參數名	類型	默認值	做用
–global	–	無	是否設置全局
packageManager	string	無	可設置爲npm\cnpm\yarn