Angular 6.0已发版: Angular快速入门-阿里云开发者社区

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%;
}

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

Angular显示效果

关于代码 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

原文发布时间为：2018年06月06日

本文作者：王永濤

本文来源：开源中国如需转载请联系原作者

Angular 6.0已发版: Angular快速入门

步骤1: 设置开发环境

步骤2: 创建一个项目

步骤3: 启动应用

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

关于代码 src 目录

参考内容

热门文章

最新文章

相关课程

相关电子书