Angular 4 基础教程

前端之家收集整理的这篇文章主要介绍了Angular 4 基础教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本系列教程的主要内容来源于 egghead.io get-started-with-angular 视频教程,但针对视频中的介绍的知识点做了适当地补充,建议有兴趣的同学直接查看该视频教程。
另外建了个群有兴趣的朋友可以加一下 QQ 群:Angular 修仙之路 - 153742079 (群名称规则:城市 + 昵称)

目录

  • 第一节 - 基于 Angular CLI 新建项目

  • 第二节 - 创建简单的组件

  • ​第三节 - 事件和模板引用

  • 第四节 - 事件进阶

  • 第五节 - 注入服务

  • 第六节 - 使用 ngFor 指令

  • 第七节 - 使用 Input 装饰器

  • 第八节 - 使用双向绑定

  • 第九节 - 使用 Output 装饰器

  • 第十节 - 组件样式

第一节 - 基于 Angular CLI 新建项目

安装 Angular CLI (可选)

  1. $ npm install -g @angular/cli
  • 检测 Angular CLI 是否安装成功

  1. $ ng --version

使用 Angular CLI

  • 新建项目

  1. $ ng new angular4-fundamentals
  • 启动本地服务器

  1. $ ng serve

若想进一步了解 Angular CLI 的详细信息,请参考 Angular CLI 终极指南

第二节 - 创建简单的组件

新建组件

  1. $ ng generate component simple-form --inline-template --inline-style
  2. # Or
  3. $ ng g c simple-form -it -is # 表示新建组件,该组件使用内联模板和内联样式

在命令行窗口运行以上命令后,将输出以下内容

  1. installing component
  2. create src/app/simple-form/simple-form.component.spec.ts
  3. create src/app/simple-form/simple-form.component.ts
  4. update src/app/app.module.ts

即执行上述操作后,创建了两个文件

  • simple-form.component.spec.ts - 用于单元测试

  • simple-form.component.ts - 新建的组件

除此之外,update src/app/app.module.ts 表示执行上述操作后,Angular CLI 会自动帮我们更新 app.module.ts 文件。所更新的内容是把我们新建的组件添加NgModuledeclarations 数组中,具体如下:

  1. @NgModule({
  2. declarations: [
  3. AppComponent,SimpleFormComponent
  4. ],...
  5. })
  6. export class AppModule { }

使用组件

AppComponent

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-root',template: `
  5. <h3>{{title}}</h3>
  6. <div>
  7. <app-simple-form></app-simple-form>
  8. </div>
  9. `
  10. })
  11. export class AppComponent {
  12. title = 'Hello,Angular';
  13. }

SimpleFormComponent

  1. import { Component,OnInit } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-simple-form',template: `
  5. <p>
  6. simple-form Works!
  7. </p>
  8. `,styles: []
  9. })
  10. export class SimpleFormComponent implements OnInit {
  11. constructor() { }
  12. ngOnInit() {
  13. }
  14. }

生成SimpleFormComponent 组件中,我们发现组件的 selectorapp-simple-form,而我们是使用以下命令创建该组件:

  1. $ ng g c simple-form -it -is

即 Angular CLI 在创建组件时,自动帮我们添加了前缀。那为什么前缀是 app 呢?答案是在项目根目录下的 .angular-cli.json 文件中,已经默认帮我们配置了默认的前缀,具体如下:

  1. {
  2. ...
  3. "apps": [
  4. {
  5. "root": "src","outDir": "dist",...
  6. "prefix": "app",...
  7. }
  8. ],}

当然你可以根据实际需求,自行更改默认的前缀配置。

第三节 - 事件和模板引用

在 Angular 中,我们可以使用 (eventName) 语法,进行事件绑定。此外,可以使用 #variableName 的语法,定义模板引用。具体示例如下:

SimpleFormComponent

  1. import {Component,OnInit} from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-simple-form',template: `
  5. <div>
  6. <input #myInput type="text">
  7. <button (click)="onClick(myInput.value)">点击</button>
  8. </div>
  9. `,styles: []
  10. })
  11. export class SimpleFormComponent implements OnInit {
  12. onClick(value) {
  13. console.log(value);
  14. }
  15.  
  16. ngOnInit() {}
  17. }

需要注意的是,若我们改变绑定的表达式为 (click)="onClick(myInput)" ,当我们点击按钮时,控制台输出的结果是:

  1. <input type="text">

通过该输出结果,我们可以知道 #variableName 语法,我们获取的对象是对应 DOM 元素的引用。

第四节 - 事件进阶

获取鼠标事件

在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event 变量,具体如下:

  1. import {Component,template: `
  2. <div>
  3. <input #myInput type="text">
  4. <button (click)="onClick($event,myInput.value)">点击</button>
  5. </div>
  6. `,styles: []
  7. })
  8. export class SimpleFormComponent implements OnInit {
  9. onClick(event,value) {
  10. console.log(event);
  11. console.log(value);
  12. }
  13. ngOnInit() {}
  14. }

成功运行以上代码,当我们点击按钮时,控制台将输出

  1. MouseEvent {isTrusted: true,screenX: 180,screenY: 207,clientX: 165,clientY: 75…}

需要注意的是,参数名一定要使用 $event ,否则无法获取正确的鼠标事件。此外,onClick($event,myInput.value) 表达式中,$event 的顺序是任意的,如:

  1. <button (click)="onClick(myInput.value,$event)">点击</button>

当 Angular 在调用我们的事件处理函数时,会自动帮我们处理调用的参数。$event 自动映射为触发的事件,与我们 ProviderToken 的作用类似。除了监听鼠标事件外,我们还可以监听键盘事件。

获取键盘事件

  1. import {Component,template: `
  2. <div>
  3. <input #myInput type="text" (keydown.enter)="onEnter($event,myInput.value)">
  4. <button (click)="onClick($event,styles: []
  5. })
  6. export class SimpleFormComponent implements OnInit {
  7. // ...
  8. onEnter(event,value) {
  9. console.log(event);
  10. console.log(value);
  11. }
  12. }

以上代码中, (keydown.enter)="onEnter($event,myInput.value)" 表达式表示我们监听键盘 enter 键的按下事件,当我们按下键盘enter 键时,将会调用组件类中定义的 onEnter() 方法。我们同样也可以通过 $event获取 KeyboardEvent 对象。

第五节 - 注入服务

新建服务

  1. $ ng g s mail

在命令行窗口运行以上命令后,将输出以下内容

  1. installing service
  2. create src/app/mail.service.spec.ts
  3. create src/app/mail.service.ts
  4. 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 服务,不会自动帮我们配置该服务。

配置服务

  1. import {MailService} from "./mail.service";
  2.  
  3. @NgModule({
  4. ...
  5. providers: [MailService],bootstrap: [AppComponent]
  6. })
  7. export class AppModule { }

更新服务

  1. import { Injectable } from '@angular/core';
  2.  
  3. @Injectable()
  4. export class MailService {
  5. message: string ='该消息来自MailService';
  6. constructor() { }
  7. }

使用服务

  1. import { Component } from '@angular/core';
  2. import {MailService} from "./mail.service";
  3.  
  4. @Component({
  5. selector: 'app-root',template: `
  6. <h3>{{title}}</h3>
  7. <div>
  8. <app-simple-form></app-simple-form>
  9. {{mailService.message}}
  10. </div>
  11. `
  12. })
  13. export class AppComponent {
  14. title = 'Hello,Angular';
  15. constructor(private mailService: MailService) {}
  16. }

除了使用 constructor(private mailService: MailService) 方式注入服务外,我们也可以使用 Inject 装饰器来注入 MailService 服务:

  1. import {Component,Inject} from '@angular/core';
  2.  
  3. @Component({...})
  4. export class AppComponent {
  5. title = 'Hello,Angular';
  6. constructor(@Inject(MailService) private mailService) {}
  7. }

不过对于 Type 类型(函数类型) 的对象,我们一般使用 constructor(private mailService: MailService) 方式进行注入。而 Inject 装饰器一般用来注入非 Type 类型的对象。

使用Inject装饰器

AppModule

  1. @NgModule({
  2. ...
  3. providers: [
  4. MailService,{provide: 'apiUrl',useValue: 'https://jsonplaceholder.typicode.com/'}
  5. ],bootstrap: [AppComponent]
  6. })
  7. export class AppModule { }

AppComponent

  1. @Component({
  2. selector: 'app-root',template: `
  3. <h3>{{title}}</h3>
  4. <div>
  5. <app-simple-form></app-simple-form>
  6. {{mailService.message}}
  7. <p>API_URL: {{apiUrl}}</p>
  8. </div>
  9. `
  10. })
  11. export class AppComponent {
  12. title = 'Hello,Angular';
  13.  
  14. constructor(
  15. @Inject(MailService) private mailService,@Inject('apiUrl') private apiUrl
  16. ) {}
  17. }

第六节 - 使用 ngFor 指令

在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。

使用 ngFor 指令

更新 MailService 服务

  1. import { Injectable } from '@angular/core';
  2.  
  3. @Injectable()
  4. export class MailService {
  5. messages: string[] = [
  6. '天之骄子,加入修仙之路群','Shadows,加入修仙之路群','Keriy,加入修仙之路群'
  7. ];
  8. }

更新 AppComponent 组件

  1. import {Component} from '@angular/core';
  2. import {MailService} from "./mail.service";
  3.  
  4. @Component({
  5. selector: 'app-root',template: `
  6. <h3>{{title}}</h3>
  7. <ul>
  8. <li *ngFor="let message of mailService.messages; index as i;">
  9. {{i}} - {{message}}
  10. </li>
  11. </ul>
  12. `
  13. })
  14. export class AppComponent {
  15. title = 'Hello,Angular';
  16.  
  17. constructor(private mailService: MailService) {}
  18. }

在 AppComponent 组件的模板中,我们使用 let item of items; 语法迭代数组中的每一项,另外我们使用 index as i 用来访问数组中每一项的索引值。除了 index 外,我们还可以获取以下的值:

  • first: boolean - 若当前项是可迭代对象的第一项,则返回 true

  • last: boolean - 若当前项是可迭代对象的最后一项,则返回 true

  • even: boolean - 若当前项的索引值是偶数,则返回 true

  • odd: boolean - 若当前项的索引值是奇数,则返回 true

需要注意的是,*ngFor 中的 * 号是语法糖,表示结构指令。因为该语法最终会转换成:

  1. <ng-template ngFor let-item [ngForOf]="items" let-i="index">
  2. <li>...</li>
  3. </ng-template>

除了 *ngFor 外,常用的结构指令还有 *ngIf*ngSwitchCase 指令。

第七节 - 使用 Input 装饰器

为了让我们能够开发更灵活的组件,Angular 为我们提供了 Input 装饰器,用于定义组件的输入属性

使用 Input 装饰器

更新 SimpleFormComponent 组件

  1. import {Component,OnInit,Input} from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-simple-form',template: `
  5. <div>
  6. {{message}}
  7. <input #myInput type="text" (keydown.enter)="onEnter($event,styles: []
  8. })
  9. export class SimpleFormComponent implements OnInit {
  10. @Input() message: string;
  11. // ...
  12. }

更新 AppComponent 组件

  1. import {Component} from '@angular/core';
  2. import {MailService} from "./mail.service";
  3.  
  4. @Component({
  5. selector: 'app-root',template: `
  6. <h3>{{title}}</h3>
  7. <app-simple-form *ngFor="let message of mailService.messages;"
  8. [message]="message">
  9. </app-simple-form>
  10. `
  11. })
  12. export class AppComponent {
  13. title = 'Hello,Angular';
  14.  
  15. constructor(private mailService: MailService) {}
  16. }

在 AppComponent 组件模板中,我们使用 [message]="message" 属性绑定的语法,实现数据传递。即把数据从 AppComponent 组件,传递到 SimpleFormComponent 组件中。

需要注意的是,当 SimpleFormComponent 组件类的属性名称不是 message 时,我们需要告诉 Angular 如何进行属性值绑定,具体如下:

  1. export class SimpleFormComponent implements OnInit {
  2. @Input('message') msg: string;
  3. // ...
  4. }

不过一般不推荐这样做,尽量保持名称一致。

第八节 - 使用双向绑定

使用过 AngularJS 1.x 的同学,应该很熟悉 ng-model 指令,通过该指令我们可能方便地实现数据的双向绑定。而在 Angular 中,我们是通过 ngModel 指令,来实现双向绑定。

使用双向绑定

引入 FormsModule

  1. import {FormsModule} from "@angular/forms";
  2.  
  3. @NgModule({
  4. // ...
  5. imports: [
  6. BrowserModule,FormsModule
  7. ],// ...
  8. })
  9. export class AppModule { }

使用 ngModel 指令

  1. @Component({
  2. selector: 'app-simple-form',template: `
  3. <div>
  4. {{message}}
  5. <input #myInput type="text" [(ngModel)]="message">
  6. <button (click)="onClick($event,styles: []
  7. })
  8. export class SimpleFormComponent implements OnInit { // ...}

上面示例中,我们使用 [(ngModel)]="message" 语法实现数据的双向绑定。该语法也称作 Banana in the Box 语法,即香蕉在盒子里 (比较形象生动,记忆该语法)。

除了使用双向绑定,我们也可以通过 ngModel 指令,实现单向数据绑定,如 [ngModel]="message"

第九节 - 使用 Output 装饰器

Output 装饰器的作用是用来实现子组件将信息,通过事件的形式通知到父级组件。

在介绍 Output 属性装饰器前,我们先来介绍一下 EventEmitter 这个幕后英雄:

  1. let numberEmitter: EventEmitter<number> = new EventEmitter<number>();
  2. numberEmitter.subscribe((value: number) => console.log(value));
  3. numberEmitter.emit(10);

接下来我们来介绍如何使用 Output 装饰器。

使用 Output 装饰器

更新 SimpleFormComponent 组件

  1. import {Component,Input,Output,EventEmitter} from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-simple-form',template: `
  5. <div>
  6. {{message}}
  7. <input #myInput type="text" [(ngModel)]="message">
  8. <button (click)="update.emit({text: message})">更新</button>
  9. </div>
  10. `,styles: []
  11. })
  12. export class SimpleFormComponent implements OnInit {
  13. @Input() message: string;
  14. @Output() update = new EventEmitter<{text: string}>();
  15.  
  16. ngOnInit() { }
  17. }

更新 MailService 服务

  1. import {Injectable} from '@angular/core';
  2.  
  3. @Injectable()
  4. export class MailService {
  5.  
  6. messages: Array<{id: number,text: string}> = [
  7. {id: 0,text: '天之骄子,加入修仙之路群'},{id: 1,text: 'Shadows,加入修仙之路群'},{id: 2,text: 'Keriy,加入修仙之路群'}
  8. ];
  9.  
  10. update(id,text) {
  11. this.messages = this.messages.map(msg => {
  12. return msg.id === id ? {id,text} : msg;
  13. });
  14. }
  15. }

更新 AppComponent 组件

  1. import {Component} from '@angular/core';
  2. import {MailService} from "./mail.service";
  3.  
  4. @Component({
  5. selector: 'app-root',template: `
  6. <h3>{{title}}</h3>
  7. <ul>
  8. <li *ngFor="let message of mailService.messages;">
  9. {{message.text}}
  10. </li>
  11. </ul>
  12. <app-simple-form *ngFor="let message of mailService.messages;"
  13. [message]="message.text"
  14. (update)="onUpdate(message.id,$event.text)">
  15. </app-simple-form>
  16. `
  17. })
  18. export class AppComponent {
  19. title = 'Hello,Angular';
  20.  
  21. onUpdate(id,text) {
  22. this.mailService.update(id,text);
  23. }
  24.  
  25. constructor(private mailService: MailService) {}
  26. }

上面示例中,我们仍然使用 (eventName) 事件绑定的语法,监听我们自定义update 事件。当在 SimpleFormComponent 组件中修改 input 输入框的文本消息后,点击更新按钮,将会调用 AppComponent 组件类中的 onUpdate() 方法,更新对应的信息。

第十节 - 组件样式

在 Angular 中,我们可以在设置组件元数据时通过 stylesstyleUrls 属性,来设置组件的内联样式和外联样式。

使用 styles 属性

  1. import {Component,template: `
  2. ...
  3. `,styles: [`
  4. :host { margin: 10px; }
  5. input:focus { font-weight: bold;}
  6. `
  7. ]
  8. })
  9. export class SimpleFormComponent implements OnInit {
  10. @Input() message: string;
  11. @Output() update = new EventEmitter<{text: string}>();
  12.  
  13. ngOnInit() {}
  14. }

上面示例中 :host 表示选择宿主元素,即 AppComponent 组件模板中的 app-simple-form 元素。

用过 AngularJS 1.x 的同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。在 Angular 中,对应的指令是 ngClass 。接下来我们来看一下,ngClass 指令的具体应用。

使用 ngClass 指令

ngClass 指令接收一个对象字面量,对象的 key 是 CSS class 的名称value 的值是 truthy/falsy 的值,表示是否应用该样式。

  1. @Component({
  2. selector: 'app-simple-form',template: `
  3. <div>
  4. {{message}}
  5. <input #myInput
  6. type="text"
  7. [(ngModel)]="message"
  8. [ngClass]="{mousedown: isMousedown}"
  9. (mousedown)="isMousedown = true"
  10. (mouseup)="isMousedown = false"
  11. (mouseleave)="isMousedown = false"
  12. >
  13. <button (click)="update.emit({text: message})">更新</button>
  14. </div>
  15. `,styles: [`
  16. :host { margin: 10px; }
  17. .mousedown { border: 2px solid green; }
  18. input:focus { font-weight: bold; outline: none;}
  19. `
  20. ]
  21. })
  22. export class SimpleFormComponent implements OnInit {
  23. isMousedown: boolean;
  24. // ...
  25. }

ngClass 指令用法

  1. <!-- 使用布尔值 -->
  2. <div [ngClass]="{bordered: false}">This is never bordered</div>
  3. <div [ngClass]="{bordered: true}">This is always bordered</div>
  4.  
  5. <!-- 使用组件实例的属性 -->
  6. <div [ngClass]="{bordered: isBordered}">
  7. Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
  8. </div>
  9.  
  10. <!-- 样式名包含'-' -->
  11. <div[ngClass]="{'bordered-Box': false}">
  12. Class names contains dashes must use single quote
  13. </div>
  14.  
  15. <!-- 使用样式列表 -->
  16. <div class="base" [ngClass]="['blue','round']">
  17. This will always have a blue background and round corners
  18. </div>

除了 ngClass 指令外,Angular 还为我们提供了 ngStyle 指令。

使用 ngStyle 指令

ngStyle 指令让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性

ngStyle 指令用法

  1. <div [ngStyle]="{color: 'white','background-color': 'blue'}">
  2. Uses fixed white text on blue background
  3. </div>

需要注意的是, background-color 需要使用单引号,而 color 不需要。这其中的原因是,ng-style 要求的参数是一个 Javascript 对象,color 是一个有效的 key,而 background-color 不是一个有效的 key ,所以需要添加 ''

对于一些场合,我们也可以直接利用 Angular 属性绑定的语法,来快速设置元素的样式。

  • 设置元素的背景颜色

  1. <div [style.background-color="'yellow'"]>
  2. Use fixed yellow background
  3. </div>
  • 设置元素的字体大小

  1. <!-- 支持单位: px | em | %-->
  2. <div>
  3. <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
  4. Red Text
  5. </span>
  6. </div>

我有话说

应该如何引入第三方 UI 库,如 bootstrap

若要引入第三方 UI 库,可以在 .angular-cli.json 文件中,配置对应的样式文件地址,具体如下:

  1. {
  2. "apps": {
  3. "styles": [
  4. "styles.css","../node_modules/bootstrap/dist/css/bootstrap.min.css"
  5. ]
  6. }
  7. }

除了本系列教程外,还有其它入门的资料么?

本系列教程的主要目的是让初学者对 Angular 的相关基础知识,有一定的了解。除了本系列教程外,初学者还可以参考以下教程:

猜你在找的Angularjs相关文章