Angular 4 基础教程
本系列教程的主要内容来源于 egghead.io get-started-with-angular 视频教程，但针对视频中的介绍的知识点作了适当地补充，建议有兴趣的同窗直接查看该视频教程。
另外建了个群有兴趣的朋友能够加一下 QQ 群：Angular 修仙之路 - 153742079 (群名称规则：城市 + 昵称)
目录
- 第一节 - 基于 Angular CLI 新建项目
- 第二节 - 建立简单的组件
- 第三节 - 事件和模板引用
- 第四节 - 事件进阶
- 第五节 - 注入服务
- 第六节 - 使用 ngFor 指令
- 第七节 - 使用 Input 装饰器
- 第八节 - 使用双向绑定
- 第九节 - 使用 Output 装饰器
- 第十节 - 组件样式
查看新版教程，请访问 Angular 6.x 基础教程
第一节 - 基于 Angular CLI 新建项目
安装 Angular CLI (可选)
- 安装 Angular CLI (可选)
$ npm install -g @angular/cli
- 检测 Angular CLI 是否安装成功
$ ng --version
使用 Angular CLI
- 新建项目
$ ng new angular4-fundamentals
- 启动本地服务器
$ ng serve
若想进一步了解 Angular CLI 的详细信息，请参考 Angular CLI 终极指南。css
第二节 - 建立简单的组件
新建组件
$ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simple-form -it -is # 表示新建组件，该组件使用内联模板和内联样式
在命令行窗口运行以上命令后，将输出如下内容：html
installing component create src/app/simple-form/simple-form.component.spec.ts create src/app/simple-form/simple-form.component.ts update src/app/app.module.ts
即执行上述操做后，建立了两个文件：node
- simple-form.component.spec.ts - 用于单元测试
- simple-form.component.ts - 新建的组件
除此以外，update src/app/app.module.ts 表示执行上述操做后，Angular CLI 会自动帮咱们更新 app.module.ts 文件。所更新的内容是把咱们新建的组件添加到 NgModule 的 declarations 数组中，具体以下：git
@NgModule({
declarations: [
AppComponent,
SimpleFormComponent
],
...
})
export class AppModule { }
使用组件
AppComponent
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';
}
SimpleFormComponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-simple-form',
template: `
<p>
simple-form Works!
</p>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
从生成的 SimpleFormComponent 组件中，咱们发现组件的 selector 是 app-simple-form，而咱们是使用如下命令建立该组件：github
$ ng g c simple-form -it -is
即 Angular CLI 在建立组件时，自动帮咱们添加了前缀。那为何前缀是 app 呢？答案是在项目根目录下的 .angular-cli.json 文件中，已经默认帮咱们配置了默认的前缀，具体以下：typescript
{
...
"apps": [
{
"root": "src",
"outDir": "dist",
...
"prefix": "app",
...
}
],
}
固然你能够根据实际需求，自行更改默认的前缀配置。shell
第三节 - 事件和模板引用
在 Angular 中，咱们可使用 (eventName) 语法，进行事件绑定。此外，可使用 #variableName 的语法，定义模板引用。具体示例以下：npm
SimpleFormComponent
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text">
<button (click)="onClick(myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
onClick(value) {
console.log(value);
}
ngOnInit() {}
}
须要注意的是，若咱们改变绑定的表达式为 (click)="onClick(myInput)" ，当咱们点击按钮时，控制台输出的结果是：json
<input type="text">
经过该输出结果，咱们能够知道 #variableName 语法，咱们获取的对象是对应 DOM 元素的引用。bootstrap
第四节 - 事件进阶
获取鼠标事件
在第三节的示例中，假如咱们须要获取鼠标事件，那应该怎么办呢？这时，咱们能够引入 $event 变量，具体以下：
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
onClick(event, value) {
console.log(event);
console.log(value);
}
ngOnInit() {}
}
成功运行以上代码，当咱们点击按钮时，控制台将输出：
MouseEvent {isTrusted: true, screenX: 180, screenY: 207, clientX: 165,
clientY: 75…}
须要注意的是，参数名必定要使用 $event ，不然没法获取正确的鼠标事件。此外，onClick($event, myInput.value) 表达式中，$event 的顺序是任意的，如：
<button (click)="onClick(myInput.value, $event)">点击</button>
当 Angular 在调用咱们的事件处理函数时，会自动帮咱们处理调用的参数。$event 自动映射为触发的事件，与咱们 Provider 中 Token 的做用相似。除了监听鼠标事件外，咱们还能够监听键盘事件。
获取键盘事件
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text" (keydown.enter)="onEnter($event, myInput.value)">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
// ...
onEnter(event, value) {
console.log(event);
console.log(value);
}
}
以上代码中， (keydown.enter)="onEnter($event, myInput.value)" 表达式表示咱们监听键盘 enter 键的按下事件，当咱们按下键盘的 enter 键时，将会调用组件类中定义的 onEnter() 方法。咱们一样也能够经过 $event 来获取 KeyboardEvent 对象。
第五节 - 注入服务
新建服务
$ ng g s mail
在命令行窗口运行以上命令后，将输出如下内容：
installing service create src/app/mail.service.spec.ts create src/app/mail.service.ts WARNING Service is generated but not provided, it must be provided to be used
即执行上述操做后，建立了两个文件：
- mail.service.spec.ts - 用于单元测试
- mail.service.ts - 新建的服务
除此以外，WARNING Service is generated but not provided,... 表示执行上述操做后，Angular CLI 只会帮咱们建立 MailService 服务，不会自动帮咱们配置该服务。
配置服务
import {MailService} from "./mail.service";
@NgModule({
...
providers: [MailService],
bootstrap: [AppComponent]
})
export class AppModule { }
更新服务
import { Injectable } from '@angular/core';
@Injectable()
export class MailService {
message: string ='该消息来自MailService';
constructor() { }
}
使用服务
import { Component } from '@angular/core';
import {MailService} from "./mail.service";
@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
{{mailService.message}}
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';
constructor(private mailService: MailService) {}
}
除了使用 constructor(private mailService: MailService) 方式注入服务外，咱们也可使用 Inject 装饰器来注入 MailService 服务：
import {Component, Inject} from '@angular/core';
@Component({...})
export class AppComponent {
title = 'Hello, Angular';
constructor(@Inject(MailService) private mailService) {}
}
不过对于 Type 类型(函数类型) 的对象，咱们通常使用 constructor(private mailService: MailService) 方式进行注入。而 Inject 装饰器通常用来注入非 Type 类型的对象。
使用Inject装饰器
AppModule
@NgModule({
...
providers: [
MailService,
{provide: 'apiUrl', useValue: 'https://jsonplaceholder.typicode.com/'}
],
bootstrap: [AppComponent]
})
export class AppModule { }
AppComponent
@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
{{mailService.message}}
<p>API_URL: {{apiUrl}}</p>
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';
constructor(
@Inject(MailService) private mailService,
@Inject('apiUrl') private apiUrl
) {}
}
第六节 - 使用 ngFor 指令
在 Angular 中咱们可使用 ngFor 指令来显示数组中每一项的信息。
使用 ngFor 指令
更新 MailService 服务
import { Injectable } from '@angular/core';
@Injectable()
export class MailService {
messages: string[] = [
'天之骄子，加入修仙之路群',
'Shadows，加入修仙之路群',
'Keriy，加入修仙之路群'
];
}
更新 AppComponent 组件
import {Component} from '@angular/core';
import {MailService} from "./mail.service";
@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<ul>
<li *ngFor="let message of mailService.messages; index as i;">
{{i}} - {{message}}
</li>
</ul>
`
})
export class AppComponent {
title = 'Hello, Angular';
constructor(private mailService: MailService) {}
}
在 AppComponent 组件的模板中，咱们使用 let item of items; 语法迭代数组中的每一项，另外咱们使用 index as i 用来访问数组中每一项的索引值。除了 index 外，咱们还能够获取如下的值：
- first: boolean - 若当前项是可迭代对象的第一项，则返回 true
- last: boolean - 若当前项是可迭代对象的最后一项，则返回 true
- even: boolean - 若当前项的索引值是偶数，则返回 true
- odd: boolean - 若当前项的索引值是奇数，则返回 true
须要注意的是，*ngFor 中的 * 号是语法糖，表示结构指令。由于该语法最终会转换成：
<ng-template ngFor let-item [ngForOf]="items" let-i="index"> <li>...</li> </ng-template>
除了 *ngFor 外，经常使用的结构指令还有 *ngIf、*ngSwitchCase 指令。
第七节 - 使用 Input 装饰器
为了让咱们可以开发更灵活的组件，Angular 为咱们提供了 Input 装饰器，用于定义组件的输入属性。
使用 Input 装饰器
更新 SimpleFormComponent 组件
import {Component, OnInit,Input} from '@angular/core';
@Component({
selector: 'app-simple-form',
template: `
<div>
{{message}}
<input #myInput type="text" (keydown.enter)="onEnter($event, myInput.value)">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
@Input() message: string;
// ...
}
更新 AppComponent 组件
import {Component} from '@angular/core';
import {MailService} from "./mail.service";
@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<app-simple-form *ngFor="let message of mailService.messages;"
[message]="message">
</app-simple-form>
`
})
export class AppComponent {
title = 'Hello, Angular';
constructor(private mailService: MailService) {}
}
在 AppComponent 组件模板中，咱们使用 [message]="message" 属性绑定的语法，实现数据传递。即把数据从 AppComponent 组件，传递到 SimpleFormComponent 组件中。
须要注意的是，当 SimpleFormComponent 组件类的属性名称不是 message 时，咱们须要告诉 Angular 如何进行属性值绑定，具体以下：
export class SimpleFormComponent implements OnInit {
@Input('message') msg: string;
// ...
}
不过通常不推荐这样作，尽可能保持名称一致。
第八节 - 使用双向绑定
使用过 AngularJS 1.x 的同窗，应该很熟悉 ng-model 指令，经过该指令咱们可能方便地实现数据的双向绑定。而在 Angular 中，咱们是经过 ngModel 指令，来实现双向绑定。
使用双向绑定
引入 FormsModule
import {FormsModule} from "@angular/forms";
@NgModule({
// ...
imports: [
BrowserModule,
FormsModule
],
// ...
})
export class AppModule { }
使用 ngModel 指令
@Component({
selector: 'app-simple-form',
template: `
<div>
{{message}}
<input #myInput type="text" [(ngModel)]="message">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit { // ...}
上面示例中，咱们使用 [(ngModel)]="message" 语法实现数据的双向绑定。该语法也称做 Banana in the Box 语法，即香蕉在盒子里 (比较形象生动，记忆该语法)。
除了使用双向绑定，咱们也能够经过 ngModel 指令，实现单向数据绑定，如 [ngModel]="message"。
第九节 - 使用 Output 装饰器
Output 装饰器的做用是用来实现子组件将信息，经过事件的形式通知到父级组件。
在介绍 Output 属性装饰器前，咱们先来介绍一下 EventEmitter 这个幕后英雄：
let numberEmitter: EventEmitter<number> = new EventEmitter<number>(); numberEmitter.subscribe((value: number) => console.log(value)); numberEmitter.emit(10);
接下来咱们来介绍如何使用 Output 装饰器。
使用 Output 装饰器
更新 SimpleFormComponent 组件
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-simple-form',
template: `
<div>
{{message}}
<input #myInput type="text" [(ngModel)]="message">
<button (click)="update.emit({text: message})">更新</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
@Input() message: string;
@Output() update = new EventEmitter<{text: string}>();
ngOnInit() { }
}
更新 MailService 服务
import {Injectable} from '@angular/core';
@Injectable()
export class MailService {
messages: Array<{id: number, text: string}> = [
{id: 0, text: '天之骄子，加入修仙之路群'},
{id: 1, text: 'Shadows，加入修仙之路群'},
{id: 2, text: 'Keriy，加入修仙之路群'}
];
update(id, text) {
this.messages = this.messages.map(msg => {
return msg.id === id ? {id, text} : msg;
});
}
}
更新 AppComponent 组件
import {Component} from '@angular/core';
import {MailService} from "./mail.service";
@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<ul>
<li *ngFor="let message of mailService.messages;">
{{message.text}}
</li>
</ul>
<app-simple-form *ngFor="let message of mailService.messages;"
[message]="message.text"
(update)="onUpdate(message.id, $event.text)">
</app-simple-form>
`
})
export class AppComponent {
title = 'Hello, Angular';
onUpdate(id, text) {
this.mailService.update(id, text);
}
constructor(private mailService: MailService) {}
}
上面示例中，咱们仍然使用 (eventName) 事件绑定的语法，监听咱们自定义的 update 事件。当在 SimpleFormComponent 组件中修改 input 输入框的文本消息后，点击更新按钮，将会调用 AppComponent 组件类中的 onUpdate() 方法，更新对应的信息。
第十节 - 组件样式
在 Angular 中，咱们能够在设置组件元数据时经过 styles 或 styleUrls 属性，来设置组件的内联样式和外联样式。
使用 styles 属性
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-simple-form',
template: `
...
`,
styles: [`
:host { margin: 10px; }
input:focus { font-weight: bold;}
`
]
})
export class SimpleFormComponent implements OnInit {
@Input() message: string;
@Output() update = new EventEmitter<{text: string}>();
ngOnInit() {}
}
上面示例中 :host 表示选择宿主元素，即 AppComponent 组件模板中的 app-simple-form 元素。
用过 AngularJS 1.x 的同窗，对 ng-class 应该很熟悉，经过它咱们可以根据条件，为元素动态的添加或移除对应的样式。在 Angular 中，对应的指令是 ngClass 。接下来咱们来看一下，ngClass 指令的具体应用。
使用 ngClass 指令
ngClass 指令接收一个对象字面量，对象的 key 是 CSS class 的名称，value 的值是 truthy/falsy 的值，表示是否应用该样式。
@Component({
selector: 'app-simple-form',
template: `
<div>
{{message}}
<input #myInput
type="text"
[(ngModel)]="message"
[ngClass]="{mousedown: isMousedown}"
(mousedown)="isMousedown = true"
(mouseup)="isMousedown = false"
(mouseleave)="isMousedown = false"
>
<button (click)="update.emit({text: message})">更新</button>
</div>
`,
styles: [`
:host { margin: 10px; }
.mousedown { border: 2px solid green; }
input:focus { font-weight: bold; outline: none;}
`
]
})
export class SimpleFormComponent implements OnInit {
isMousedown: boolean;
// ...
}
ngClass 指令用法
<!-- 使用布尔值 -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>
<!-- 使用组件实例的属性 -->
<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>
<!-- 样式名包含'-' -->
<div[ngClass]="{'bordered-box': false}">
Class names contains dashes must use single quote
</div>
<!-- 使用样式列表 -->
<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and round corners
</div>
除了 ngClass 指令外，Angular 还为咱们提供了 ngStyle 指令。
使用 ngStyle 指令
ngStyle 指令让咱们能够方便得经过 Angular 表达式，设置 DOM 元素的 CSS 属性。
ngStyle 指令用法
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
Uses fixed white text on blue background
</div>
须要注意的是， background-color 须要使用单引号，而 color 不须要。这其中的缘由是，ng-style 要求的参数是一个 Javascript 对象，color 是一个有效的 key，而 background-color 不是一个有效的 key ，因此须要添加 ''。
对于一些场合，咱们也能够直接利用 Angular 属性绑定的语法，来快速设置元素的样式。
- 设置元素的背景颜色
<div [style.background-color="'yellow'"]> Use fixed yellow background </div>
- 设置元素的字体大小
<!-- 支持单位: px | em | %-->
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
Red Text
</span>
</div>
我有话说
应该如何引入第三方 UI 库，如 bootstrap
若要引入第三方 UI 库，能够在 .angular-cli.json 文件中，配置对应的样式文件地址，具体以下：
{
"apps": {
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
}
}
除了本系列教程外，还有其它入门的资料么？
本系列教程的主要目的是让初学者对 Angular 的相关基础知识，有必定的了解。除了本系列教程外，初学者还能够参考如下教程：