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
欢迎关注公众号获取更多内容： Web后端技术学习社区
参考内容
http://dwz.cn/80xYoe
https://angular.io/guide/quickstart
