Angular 6.0.0 于2018年5月4日正式发布，今天我们一起来跟着其官网(https://angular.io/guide/quickstart)的例子做个简单入门吧！

“Angular 6.0.0 正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。这次更新还包括框架包（@angular/core、@angular/common、@angular/compiler 等）、Angular CLI、Angular Material + CDK，这主要是为了解决兼容问题，这些项目的补丁版本将根据项目需求发布。” (前端之巅)

关于 TypeScript :

Angular 使用 TypeScript 编写。

TypeScript 是一种由微软开发的自由和开源的编程语言，主要提供了类型系统和对 ES6 的支持。 TypeScript 是 JavaScript 的一个超集，它可以编译成普通的 JavaScript 代码。 TypeScript 代码文件后缀为 .ts。

Angular2.0 之前的版本（1.x）叫做 AngularJS。

AngularJS 是一款开源的 JavaScript MV*（MVW、MVVM、MVC）框架。AngularJS 最初由 Misko Hevery 和 Adam Abrons 于2009年开发，后来由 Google 公司接管。

关于 Angular CLI 命令行接口:

Angular CLI 是一个命令行工具，可以很方便的进行创建项目、添加文件、测试、构建部署等操作。

步骤1: 设置开发环境

需要安装有 Node.js 和 npm, 可以使用 -v 命令查看其版本:

$ node -v v10.2.0  $ npm -v        6.1.0 

全局安装 Angular CLI :

npm install -g @angular/cli

执行实例如下:

$ sudo npm install -g @angular/cli /usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng  > @angular/cli@6.0.7 postinstall /usr/local/lib/node_modules/@angular/cli > node ./bin/ng-update-message.js  + @angular/cli@6.0.7 updated 1 package in 3.482s 

查看安装结果:

$ ng -v Angular CLI: 6.0.7 Node: 10.2.0 OS: darwin x64 Angular:  ...   Package                      Version -------------------------------------- @angular-devkit/architect    0.6.7 @angular-devkit/core         0.6.7 @angular-devkit/schematics   0.6.7 @schematics/angular          0.6.7 @schematics/update           0.6.7 rxjs                         6.2.0 typescript                   2.7.2 

步骤2: 创建一个项目

打开终端，使用 ng new 命令来创建:

ng new my-app

执行实例如下:

$ ng new my-app CREATE my-app/README.md (1022 bytes) CREATE my-app/angular.json (3548 bytes) CREATE my-app/package.json (1310 bytes) CREATE my-app/tsconfig.json (384 bytes) CREATE my-app/tslint.json (2805 bytes) CREATE my-app/.editorconfig (245 bytes) CREATE my-app/.gitignore (503 bytes) CREATE my-app/src/environments/environment.prod.ts (51 bytes) CREATE my-app/src/environments/environment.ts (631 bytes) CREATE my-app/src/favicon.ico (5430 bytes) CREATE my-app/src/index.html (292 bytes) CREATE my-app/src/main.ts (370 bytes) CREATE my-app/src/polyfills.ts (3194 bytes) CREATE my-app/src/test.ts (642 bytes) CREATE my-app/src/assets/.gitkeep (0 bytes) CREATE my-app/src/styles.css (80 bytes) CREATE my-app/src/browserslist (375 bytes) CREATE my-app/src/karma.conf.js (964 bytes) CREATE my-app/src/tsconfig.app.json (194 bytes) CREATE my-app/src/tsconfig.spec.json (282 bytes) CREATE my-app/src/tslint.json (314 bytes) CREATE my-app/src/app/app.module.ts (314 bytes) CREATE my-app/src/app/app.component.css (0 bytes) CREATE my-app/src/app/app.component.html (1141 bytes) CREATE my-app/src/app/app.component.spec.ts (989 bytes) CREATE my-app/src/app/app.component.ts (207 bytes) CREATE my-app/e2e/protractor.conf.js (752 bytes) CREATE my-app/e2e/src/app.e2e-spec.ts (302 bytes) CREATE my-app/e2e/src/app.po.ts (208 bytes) CREATE my-app/e2e/tsconfig.e2e.json (213 bytes)  > fsevents@1.2.4 install /Users/wang/angular/my-app/node_modules/fsevents > node install  [fsevents] Success: "/Users/wang/angular/my-app/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed Pass --update-binary to reinstall or --build-from-source to recompile  > node-sass@4.9.0 install /Users/wang/angular/my-app/node_modules/node-sass > node scripts/install.js  Cached binary found at /Users/wangtest/.npm/node-sass/4.9.0/darwin-x64-64_binding.node  > node-sass@4.9.0 postinstall /Users/wang/angular/my-app/node_modules/node-sass > node scripts/build.js  Binary found at /Users/wang/angular/my-app/node_modules/node-sass/vendor/darwin-x64-64/binding.node Testing binary Binary is fine  > @angular/cli@6.0.7 postinstall /Users/wang/angular/my-app/node_modules/@angular/cli > node ./bin/ng-update-message.js  added 1167 packages from 1293 contributors and audited 21844 packages in 39.505s found 13 vulnerabilities (9 low, 4 high)   run `npm audit fix` to fix them, or `npm audit` for details     Successfully initialized git. 

进入 my-app 目录，查看一下目录结构:

$ cd my-app  $ ll total 752 -rw-r--r--    1 wangtest  staff   1.0K  6  6 09:35 README.md -rw-r--r--    1 wangtest  staff   3.5K  6  6 09:35 angular.json drwxr-xr-x    5 wangtest  staff   170B  6  6 09:35 e2e drwxr-xr-x  810 wangtest  staff    27K  6  6 09:35 node_modules -rw-r--r--    1 wangtest  staff   354K  6  6 09:36 package-lock.json -rw-r--r--    1 wangtest  staff   1.3K  6  6 09:36 package.json drwxr-xr-x   16 wangtest  staff   544B  6  6 09:35 src -rw-r--r--    1 wangtest  staff   384B  6  6 09:35 tsconfig.json -rw-r--r--    1 wangtest  staff   2.7K  6  6 09:35 tslint.json 

步骤3: 启动应用

进入 my-app 目录，使用 ng serve 命令来启动服务。

$ ng serve --open ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **                                                                                            Date: 2018-06-06T01:37:56.467Z Hash: e7f3a0dd961d09e46007 Time: 8915ms chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.39 MB [initial] [rendered] ℹ ｢wdm｣: Compiled successfully. 

命令 ng serve， 创建一个服务，并监控项目中的文件，如果文件有变动，会自动构建应用，可以在浏览器中实时查看效果。
参数 --open， 可以在自动直接打开浏览器，并访问应用。

步骤4: 编辑 Angular 组件 (Angular component)

通过 Angular CLI 命令行工具，已经创建了 Angular component 组件。 在根目录的 component 叫做 app-root . 在 ./src/app/app.component.ts 文件中可以看到根组件内容。

打开 src/app/app.component.ts 文件:

修改 title 内容， 将 “app” 为 “My First Angular App”。 再增加一个变量 author， 内容为 "Web后端技术学习社区"， 一会将在模板文件中展示。

// src/app/app.component.ts import { Component } from '@angular/core';  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent {   title = 'My First Angular App';   author = 'Web后端技术学习社区'; }  

浏览器会自动展示修改后的内容。

打开 src/app/app.component.html 文件，修改模板内容：

<div style="text-align:center">   <h1>      Welcome to {{ title }}!   </h1>    <p> {{ author }} </p> </div> 

打开 src/app/app.component.css 文件，可以修改样式文件:

h1 {   color: #369;   font-family: Arial, Helvetica, sans-serif;   font-size: 250%; } 

关于代码 src 目录

我们的代码都在 src 目录中，所有的 Angular 的 组件(components), 模板文件(templates), 样式文件(styles), 图片(images)等都会放置在这个目录中。

大概看一下这个 src 目录的的基本结构:

$ tree src  src ├── app  // 应用的组件、模块 │   ├── app.component.css  // css样式文件 │   ├── app.component.html // html模板文件 │   ├── app.component.spec.ts  // 测试用例 │   ├── app.component.ts   // 组件 │   └── app.module.ts      // 模块 ├── assets  // 资源目录，存储静态资源的,比如图片 ├── browserslist ├── environments // 环境配置。比如开发、测试、生产环境做不同配置 │   ├── environment.prod.ts  │   └── environment.ts ├── favicon.ico    // 网站标志图标 ├── index.html     // 整个应用的根html，程序启动就是访问这个页面 ├── karma.conf.js  // 前端单元测试Karma配置 ├── main.ts      // 项目入口，通过这个文件来启动项目 ├── polyfills.ts // 主要是用来导入一些必要库, 兼容老版本 ├── styles.css   // 全局的样式文件 ├── test.ts      // 自动化测试用的 ├── tsconfig.app.json   // 指定ts编译的一些参数信息 ├── tsconfig.spec.json  // 测试 └── tslint.json  // JSLint检测js语法 3 directories, 18 files 

参考内容

http://dwz.cn/80xYoe
https://angular.io/guide/quickstart