Angular4 快速入门

公司项目开发使用的是 Angular ，这里稍微总结一下 Angular 的用法。

学习前知识储备

Angular 相对来说学习起来稍微有点难度，最好有了一定的学习基础后再开始学习。

• 掌握 HTML 基本布局以及 基本的 CSS 样式。
• 掌握 JavaScript 基本语法。
• 至少自己有使用过 HTML + CSS + JavaScript 写过小应用等。
• 有了解过 TypeScript 更容易上手。

满足上面几个条件，学习 Angular 就不至于这么费劲。

同时如果你是一个 Java 程序员，并且有使用过 Spring 框架的经验，那么你学习跟理解 Angular 的基本概念将会轻松许多。

Angular 的一些概念跟 Spring 里面的一些概念极为相似。

1. 什么是Angular ?

Angular 是一个由 Google 公司开发以及维护一款前端框架。

在此之前，Google 在 2009 年开发过一款名为 AngularJS 的框架，这框架目前已经停止维护。

我们现在说的 Angular 框架是 AngularJS 的升级版本， 也可以称作 AngularJS** 2。 不过官方为了突出升级跨度大，就直接改名为 Angular 。

Angular 后续的名称命名都会是以 Angular N 的形式，比如最新的版本就是 Angular 5。 Angular

是由原先的 AngularJS 团队进行完全重写的，从设计理念上两者差别就有点大。

特别是 Angular 使用了微软开发的 TypeScript 语言，TypeScript 中有静态类型定义以及泛型。

2. Angular 的特点

在现在流行的项目开发模式中，前后端分离已经成为大部分企业项目的一个共识。

而 Angular 则是可以被用于开发复杂的前端应用 ， 同时 Angular 则是提供了一整套完整的前端解决方案。

Angular 有以下几个特点：

• 声明式模板。 可以通过扩展 HTML 的语法，写更少的代码来编写用户界面。

• 数据绑定机制。 通过数据绑定机制，可以容易实现组件跟模版之间的数据同步。

• 组件化开发。 Angular 引入了组件的概念，将前端页面划分为一个个独立的，可以被复用的功能单元，这样可以提升代码可维护性以及灵活性。

• 依赖注入。 依赖注入应该是后端引发出来的概念。 比如 Java 程序员很熟悉的 Spring 中就推荐依赖注入。 通过依赖注入可以让组件的创建跟使用变得更加容易。

• 路由机制。 Angular 内置了强大的路由机制，可以让单页应用开发变得更加简单，更加直观。

• 工具链。 Angular 提供了了 Angular cli 工具，可以进行快速的项目初始化、开发、构建、测试。 有点类似于 Java 的 Maven 。

3. Angular 的基本概念、术语

学习 Angular 前需要先了解几个 Angular 的基本概念。

• 组件 Component
• 模版 Template
• 数据绑定 Data Binding
• 服务 Service
• 依赖注入 Dependency Injection

下面会通过几个例子来先了解下这些特性，稍微看看即可。

3.1 组件

组件是 Angular 应用的基本单元。 每一个组件都包含一个 TypeScript 类以及 一个 HTML 模版文件。

TypeScript 类用来处理数据以及业务逻辑。HTML 模版文件用来定义渲染的视图等，这里跟普通的 HTML 文件作用几乎是一样的。

第一个组件例子 app-hello-world.component.ts 如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello {{name}}!</h1>`
})
export class HelloWorldComponent {
  name: string = 'Angular';
}

上面这个例子中，定义了一个很简单的 HelloWorldComponent 组件。它通过装饰器 @Component 指定了选择器 selector 和 模板 template 。 这个组件将在页面上显示 “Hello Angular!“。

但是 Angular 官方是推荐将 HTML 内容定义到一个单独的文件的，所以常用的写法会是下面这种：

app-hello-world.component.html：

<h1>Hello {{name}}!</h1>

app-hello-world.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './app-hello-world.html',
})
export class HelloWorldComponent {
  name: string = 'Angular';
}

这样可以将布局跟业务逻辑进行分离，在逻辑复杂的时候更好的进行维护。

3.2 模版

所谓的模版就是就是用于定义页面的 HTML 标签。

模版文件就是一个 HTML 文件，但是可以包含 Angular 自定义的一些语法，比如数据绑定、指令等等。

模版可以写在 @Component 装饰器里面，也可以写在单独的 HTML 文件中，在上一个小节中已经演示过。

模版中也可以定义一个事件触发回调函数，比如：

click-example.component.html：

<button (click)="click()">按钮</button>

click-example.component.ts：

@Component({
  selector: 'app-click-example',
  templateUrl: './click-example.component.html'
})
export class ClickExampleComponent {

  click() {
    // 处理点击事件
  }
}

3.3 数据绑定

所谓的数据绑定就是可以让模版 ( HTML ) 跟 组件 ( TypeScript 类) 进行数据同步。

当 HTML 中输入框输入值，那么最终业务逻辑是在 TypeScript 类中进行处理的，所以 TypeScript 类中必须要能够立马拿到值进行校验等。

反过来，当 TypeScript 中的属性值变化了，那么相对应的 HTML 中做展示的值也应该进行变动。

Angular 目前支持的数据绑定方式有下面几种：

<!-- 单向数据绑定 > 使用插值表达式 -->
<p>{{ username }}</p>


<!-- 双向数据绑定 -->
<input [(ngModel)]="username" />

<!-- 事件绑定 > 监听按钮点击事件 -->
<button (click)="changeUsername()">Change Username</button>

上面几种绑定的区别：

• 单向绑定就是数据只能从 TypeScript 代码（组件）传到模板（HTML 视图）中，数据只可以单向流动。 HTML 中无论怎么去更改， TypeScript 中属性的值都是不会变更。

• 双向数据绑定就是 TypeScript 代码 跟 HTML 视图中的值会互相影响，互相同步。比如上面例子中，假如在页面中更改了 username 的值，那么在 TypeScript 中对应的属性值也会被更新。 TypeScript 中对应属性值变动了，HTML 页面上 username 的值也会立即发生变动。

• 事件绑定就是可以监听 HTML 元素上的事件（如点击、鼠标移动等），并调用 TypeScript 类中的方法做相对应的业务逻辑处理。

3.4 服务

服务在 Angular 应用中的应用很广泛。 主要是用于封装复用逻辑、数据管理等功能。这样的话组件就可以共享，然后被其他组件进行调用。

使用服务中是需要进行服务注入，这种服务创建跟服务注入的概念，对于前端来说并不是很好理解。

看一个服务的例子 data.service，

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AccessDatabaseDataService {

  constructor() { }

  
  getData() {
      // 这里调用后台接口查询数据库数据
    return 'This is data from the database';
  }
}

上面的 @Injectable 装饰器声明了这个类是一个服务，通过 providedIn: 'root' 配置告诉 Angular 用单例模式提供给整个应用。

上面是服务注册的流程，下面开始时服务注入的例子：

import { Component } from '@angular/core';
import { AccessDatabaseDataService } from './data.service';

@Component({
  selector: 'app-my-component',
  template: `<p>{{ data }}</p>`
})
export class MyComponent {
  data: string;

  constructor(private dataService: AccessDatabaseDataService) {
    this.data = this.dataService.getData();
  }
}

AccessDatabaseDataService 被注入到 MyComponent 的构造函数中。

然后组件通过 dataService 实例调用 getData() 方法，将返回的数据存储在本地的 data 属性中，之后可以在组件的模板中显示这些数据。

这样就完成了一个服务注册、服务注入的例子。看到这里，如果你是一个 Java 程序员的话，就会想到，这不是跟 Spring 那一套依赖注入的机制一模一样，不一样的地方在于这是在前端语言的应用。

3.5 依赖注入

依赖注入其实是一种设计模式， 说是 Angular 的特点倒是有点不太恰当。

Angular 使用它来管理各种组件跟服务之间的依赖关系。

通过依赖注入来将服务注册到要使用的组件中去，不需要开发自己来创建服务的实例。

在上一小节中，已经见识过完整的服务注册以及依赖注入的例子。

5. Angular 的 HelloWorld

由于有 Angular-cli 这种工具存在，所以我们初始化一个 HelloWorld 程序将会非常简单。

• 首先安装 Node.js ，官网地址 https://nodejs.org/ 。

• 安装完成后命令行输入验证是否安装成功。

   node -v

• 检查 npm 是否正常运行，在命令行输入如下命令查看是否输出正确。

  npm -v

• 安装 Angular cli 工具

    npm install -g @angular/cli@1.7.4

• 使用 ng 命令初始化项目

  ng new my-app

• 耐心等待项目创建，在国内这种网络环境中需要比较多的时间，因为大部分时间都在安装 npm 包。

• 进入 my-app 文件夹。

• 输入命令启动服务

  ng serve --open

上面这条命令会启动服务，同时监视项目中的文件，在修改这些文件时会自动重新构建应用。

• 这时候可能会自动打开浏览器，或者你手动输入 http://localhost:4200/ 进入浏览器。

• 当你看到上面这个界面时，说明第一个 Angular HelloWolrd 已经执行成功。

参考链接

• https://zh.wikipedia.org/wiki/AngularJS
• https://v5.angular.io/guide/quickstart