Angular CLI的安裝

安裝Angular CLI

1.首先確認安裝了node.js和npm

// 顯示當前node和npm版本 $ node -v $ npm -v // node 版本高於6.9.3 npm版本高於3.0.0

2.全局安裝typescript（可選）

$ npm install -g typescript 
// 新建項目的時候會自動安裝typescript(非全局)因此這裏也能夠不用安裝。

3.安裝Angular CLI

$ npm install -g @angular/cli

通過不算漫長的等待，你的Angular CLI就裝好了。確認一下：

$ ng v

// 出現下面畫面說明安裝成功，若是不成功你可能須要uninstall一下，再從新來過
$ ng v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ @angular/cli: 1.1.1 node: 7.10.0 os: darwin x64

新建Angular項目

$ ng new my-app

這裏要等好久啊，大概要下載141M東西。
若是你已經建好了項目文件夾就能夠使用ng init my-app來新建項目，ng init和ng new的區別是ng new會幫咱們建立一個和項目名稱相同的文件夾。

趁着它在下載，來看一下運行ng new以後Angular cli已經幫咱們幹了什麼：

$ ng new helloKeriy
installing ng
  create .editorconfig create README.md create src/app/app.component.css // 使用HTML模板、CSS樣式和單元測試定義AppComponent組件。 它是根組件，隨着應用的成長它會成爲一棵組件樹的根節點。 create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts // 定義AppModule，這個根模塊會告訴Angular如何組裝該應用 create src/app/app.module.ts create src/assets/.gitkeep // 這個文件夾下你能夠放圖片等任何東西，在構建應用時，它們全都會拷貝到發佈包中。 create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico // 每一個網站都但願本身在書籤欄中能好看一點。 請把它換成你本身的圖標。 create src/index.html // 宿主頁面 create src/main.ts create src/polyfills.ts create src/styles.css // 公共樣式 create src/test.ts // 這是單元測試的主要入口點 create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json // Anguar 編譯依賴 create e2e/app.e2e-spec.ts // e2e 端對端測試目錄 create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json // Angular 的依賴包 create protractor.conf.js create tsconfig.json // TypeScript 編譯器的參數 create tslint.json Successfully initialized git. Installing packages for tooling via npm. Installed packages for tooling via npm. Project 'helloKeriy' successfully created. 

這裏強烈推薦使用淘寶鏡像安裝：

$ ng new helloKeriy --skip-install // 先跳過npm安裝 $ cd helloKeriy $ cnpm install  // 使用淘寶源安裝

或者

ng set --global packageManager=cnpm

成果展現

安裝完成以後就能夠啓動項目了：

cd helloKeriy ng serve -open

ng serve命令會啓動開發服務器，監聽文件變化，並在修改這些文件時從新構建此應用。
使用--open（或-o）參數能夠自動打開瀏覽器並訪問http://localhost:4200/。
接下來你將看到：