在本地开发前，可以先来到线上感受一下 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)