在本地開發前，可以先來到線上感受一下 angular。 打開[https://stackblitz.com](https://stackblitz.com/)并如圖點擊:  接下來選擇Angular  稍等片刻，頁面啟動功能后有三部分組成：  從左至右為：文件目錄區、代碼區、閱覽區。 在最左側的文件目錄中，通過觀察發現與以前接觸jquery項目略有不同：jquery或其它的傳統項目，一般由主體的三個文件組件：html、css及js文件。比如：[jquery示例](https://codepen.io/shivasurya/pen/FatiB)，再比如[vue示例](https://codepen.io/wa23/pen/pObyrq)、[angularjs示例](https://codepen.io/chrisoncode/pen/xFcdI)；而angular一個最簡單的demo，竟然使用了10多個文件，而且有的文件竟然有上100行。不得不說這的確是由于angular的特點而帶來了上手難度大的缺點。在這種情況下手工來一行行代碼來初始一個項目便顯示不現實了。這好比以前只要掌握基本的打鐵技術就可以制造用來耕種的農具一樣，在現在農業高度自動化的時代，僅靠手工已然制造不出聯合收割機了。 Anguar當然也想到了這個問題。Anguar已經友善的提供了`Angular-cli`，有了這個工具便可以輕松的來初始化一個angular項目了。 > 如果你僅僅是學習前臺，那么完全可以在參考[angular中文網入門教程](https://www.angular.cn/start)的基礎上使用stackblitz提供的在線環境。 # angular-cli `Angular-cli`( `cli` = `command line interface` 命令行接)是一個用于生產`Anuglar`應用程序的智能生產線，在開發`Angular`之前，我們必須首先安裝`Angular-cli`。 > 和生活中的生產線一線，如果沒有它一些產品也是可以生產的，只是生產效率和質量難以得到控制罷了。 ## 安裝 `npm install -g @angular/cli@8.3.4 --registry=https://registry.npm.taobao.org` ```shell panjiedeMac-Pro:~ panjie$ npm install -g @angular/cli@8.3.4 --registry=https://registry.npm.taobao.org /usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng > @angular/cli@8.3.4 postinstall /usr/local/lib/node_modules/@angular/cli > node ./bin/postinstall/script.js + @angular/cli@8.3.4 added 7 packages from 5 contributors, removed 1322 packages and updated 236 packages in 18.462s ``` ## 驗證 `ng --version` ```shell panjiedeMac-Pro:~ panjie$ ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 8.3.4 Node: 10.16.3 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.803.4 @angular-devkit/core 8.3.4 @angular-devkit/schematics 8.3.4 @schematics/angular 8.3.4 @schematics/update 0.803.4 rxjs 6.4.0 ``` > 官方教程中的命令是`npm install -g @angular/cli`，在這被改動成`npm install -g @angular/cli@8.3.4 --registry=https://registry.npm.taobao.org`主要是為了統一版本及解決慢網絡問題。 # 項目初始化 一、首先打開D盤建立angularStudy文件夾，并使用shell進入該文件夾。 >[info] OSX及Liunx用戶，推薦使用`~/angularStudy`文件夾。 `~/`表示當前登錄用戶文件夾，在OSX中位于`/Users/當前登錄用戶`；在Windows中，默認位于`C:/Users/當前登錄用戶`;在ubuntu中，默認位于`/usr/home/當前登錄用戶`。 二、然后運行以下命令： `ng new hello-world` 第一個提示問我們是否添加`Anguar routing`，輸入`y`，回車。 ``` panjiedeMac-Pro:angularStudy panjie$ ng new hello-world ? Would you like to add Angular routing? (y/N) y ``` 接著使用上下鍵選擇`Sass`，回車。 ``` panjiedeMac-Pro:angularStudy panjie$ ng new hello-world ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS SCSS [ https://sass-lang.com/documentation/syntax#scss ] ? Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ] Stylus [ http://stylus-lang.com ] ``` 最后是耐心的等待，等待的時間取決于你的網絡環境及CPU配置情況。安裝完成后，得到如下提示表示安裝成功。 ``` added 1456 packages from 1071 contributors and audited 18840 packages in 165.665s found 0 vulnerabilities Successfully initialized git. ``` ## 慢網絡問題 解決慢網絡的方法有很多種，這貌似已經成為了一門專門的學問，在此我們給出最笨的一種。 前面的幾個步驟與正常網絡相同，即：`ng new hello-world` -> `y` -> `sass`。回車后，會顯示自動為我們創建了一些文件，并開始進行網絡請求安裝第三方包。 ``` CREATE hello-world/e2e/protractor.conf.js (810 bytes) CREATE hello-world/e2e/tsconfig.json (214 bytes) CREATE hello-world/e2e/src/app.e2e-spec.ts (644 bytes) CREATE hello-world/e2e/src/app.po.ts (262 bytes) ? ?????????????????? ? fetchMetadata: sill pacote range manifest for aria-query@^3.0.0 fetched in 8` ``` 此時使用Ctrl-C組合鍵來終止安裝，接下來在`shell`中進入`hello-world`文件夾。使用`npm install --registry=https://registry.npm.taobao.org`來繼續完成安裝。 ``` panjiedeMac-Pro:hello-world panjie$ npm install --registry=https://registry.npm.taobao.org up to date in 7.226s ``` ## 驗證 在`hello-world`文件夾中，使用`ng serve --open`來啟動第一個`angular`應用并在瀏覽器中查看效果。 ``` panjiedeMac-Pro:hello-world panjie$ ng serve --open 10% building 3/3 modules 0 active? ?wds?: Project is running at http://localhost:4200/webpack-dev-server/ ? ?wds?: webpack output is served from / ? ?wds?: 404s will fallback to //index.html chunk {main} main.js, main.js.map (main) 49.4 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 10.1 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered] Date: 2019-09-18T07:16:28.646Z - Hash: 7f1e5facc82a553e3e7b - Time: 6999ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ? ?wdm?: Compiled successfully. ``` 編譯成功后瀏覽器自動打開了頁面：[http://localhost:4200/](http://localhost:4200/)  # Hello Angular 使用最喜愛的編輯器打開`hello-world`文件夾，找到`src/app/app.component.html`，只保留最后一行，其它的代碼全部刪除：  刪除后代碼： ```html <router-outlet></router-outlet> ``` 加入Hello Angular! ```html <h1 style="text-align: center; margin-top: 100px;"> Hello Angular! </h1> <router-outlet></router-outlet> ``` 使用ctrl+s保存文件后，瀏覽器將自動刷新展示最新的效果。  至此：熟悉的Hello World展現在我們的面前。恭喜你，已經邁出了堅實的第一步。 # 參考文檔 [https://www.angular.cn/guide/setup-local](https://www.angular.cn/guide/setup-local) [www.angular.cn](https://www.angular.cn/guide/setup-local)