Angular 4 快速入門(mén)

2018-08-28 10:29 更新

查看新版 Angular 6.x 快速入門(mén)

目錄

  • 第一節(jié) - Angular 簡(jiǎn)介
  • 第二節(jié) - Angular 環(huán)境搭建
  • 第三節(jié) - 插值表達(dá)式
  • 第四節(jié) - 自定義組件
  • 第五節(jié) - 常用指令簡(jiǎn)介
  • 第六節(jié) - 事件綁定
  • 第七節(jié) - 表單模塊簡(jiǎn)介
  • 第八節(jié) - Http 模塊簡(jiǎn)介
  • 第九節(jié) - 注入服務(wù)
  • 第十節(jié) - 路由模塊簡(jiǎn)介

第一節(jié) Angular 簡(jiǎn)介

Angular 是什么

Angular 是由谷歌開(kāi)發(fā)與維護(hù)一個(gè)開(kāi)發(fā)跨平臺(tái)應(yīng)用程序的框架，同時(shí)適用于手機(jī)與桌面。

Angular 有什么特點(diǎn)

  • 基于 Angular 我們可以構(gòu)建適用于所有平臺(tái)的應(yīng)用。比如：Web 應(yīng)用、移動(dòng) Web 應(yīng)用、移動(dòng)應(yīng)用和桌面應(yīng)用等。
  • 通過(guò) Web Worker和服務(wù)端渲染 (SSR)，達(dá)到在如今Web平臺(tái)上所能達(dá)到的最高渲染速度。
  • Angular 讓你能夠有效掌控可伸縮性?；?RxJS、Immutable.js 和其它推送模型，能適應(yīng)海量數(shù)據(jù)需求。

Angular 提供了哪些功能

  • 動(dòng)態(tài)HTML
  • 強(qiáng)大的表單系統(tǒng) (模板驅(qū)動(dòng)和模型驅(qū)動(dòng))
  • 強(qiáng)大的視圖引擎
  • 事件處理
  • 快速的頁(yè)面渲染
  • 靈活的路由
  • HTTP 服務(wù)
  • 視圖封裝
  • AOT、Tree Shaking

Angular 與 AngularJS 有什么區(qū)別

  • 不再有Controller和 Scope
  • 更好的組件化及代碼復(fù)用
  • 降低了學(xué)習(xí)曲線
  • 更好的移動(dòng)端支持
  • 引入了 RxJS 與 Observable
  • 引入了 Zone.js，提供更加智能的變化檢測(cè)

第二節(jié) - Angular 環(huán)境搭建

基礎(chǔ)要求

Angular 開(kāi)發(fā)環(huán)境配置方式

配置開(kāi)發(fā)環(huán)境

本快速入門(mén)教程，選用第一種配置方式搭建 Angular 開(kāi)發(fā)環(huán)境：

  • 使用 Git 克隆 quickstart 項(xiàng)目

  1. git clone https://github.com/angular/quickstart ng4-quickstart

  • 使用 IDE 打開(kāi)已新建的項(xiàng)目 (本教程使用的 IDE 是 Visual Studio Code)

  1. code ./ng4-quickstart

  • 安裝項(xiàng)目所需依賴(lài)

  1. npm i

  • 驗(yàn)證環(huán)境是否搭建成功

  1. npm start

第三節(jié) - 插值表達(dá)式

在 Angular 中，我們可以使用 {{}} 插值語(yǔ)法實(shí)現(xiàn)數(shù)據(jù)綁定。

綁定普通文本

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'my-app',
  6.   template: `<h1>Hello {{name}}</h1>`,
  7. })
  8. export class AppComponent  {
  9.   name = 'Angular'; 
  10. }

綁定對(duì)象屬性

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'my-app',
  6.   template: `
  7.     <h2>大家好，我是{{name}}</h2>
  8.     <p>我來(lái)自<strong>{{address.province}}</strong>省,
  9.       <strong>{{address.city}}</strong>市
  10.     </p>
  11.   `,
  12. })
  13. export class AppComponent {
  14.   name = 'Semlinker';
  15.   address = {
  16.     province: '福建',
  17.     city: '廈門(mén)'
  18.   }
  19. }

值得一提的是，我們可以使用 Angular 內(nèi)置的 json 管道，來(lái)顯示對(duì)象信息：

  1. @Component({
  2.   selector: 'my-app',
  3.   template: `
  4.     ...
  5.     <p>{{address | json}}</p>
  6.   `,
  7. })
  8. export class AppComponent {
  9.   name = 'Semlinker';
  10.   address = {
  11.     province: '福建',
  12.     city: '廈門(mén)'
  13.   }
  14. }

第四節(jié) - 自定義組件

在 Angular 中，我們可以通過(guò) Component 裝飾器和自定義組件類(lèi)來(lái)創(chuàng)建自定義組件。

基礎(chǔ)知識(shí)

定義組件的元信息

在 Angular 中，我們可以使用 Component 裝飾器來(lái)定義組件的元信息：

  1. @Component({
  2.   selector: 'my-app', // 用于定義組件在HTML代碼中匹配的標(biāo)簽
  3.   template: `<h1>Hello {{name}}</h1>`, // 定義組件內(nèi)嵌視圖
  4. })

定義組件類(lèi)

  1. export class AppComponent  {
  2.   name = 'Angular'; 
  3. }

定義數(shù)據(jù)接口

在 TypeScript 中的接口是一個(gè)非常靈活的概念，除了可用于對(duì)類(lèi)的一部分行為進(jìn)行抽象以外，也常用于對(duì)「對(duì)象的形狀（Shape）」進(jìn)行描述。

  1. interface Person {
  2.   name: string;
  3.   age: number;
  4. }
  7. let semlinker: Person = {
  8.   name: 'semlinker',
  9.   age: 31
  10. };

自定義組件示例

創(chuàng)建 UserComponent 組件

  1. import { Component } from '@angular/core';
  4. @Component({
  5.     selector: 'sl-user',
  6.     template: `
  7.     <h2>大家好，我是{{name}}</h2>
  8.     <p>我來(lái)自<strong>{{address.province}}</strong>省,
  9.       <strong>{{address.city}}</strong>市
  10.     </p>
  11.     `
  12. })
  13. export class UserComponent {
  14.     name = 'Semlinker';
  15.     address = {
  16.         province: '福建',
  17.         city: '廈門(mén)'
  18.     };
  19. }

聲明 UserComponent 組件

  1. // ...
  2. import { UserComponent } from './user.component';
  3. @NgModule({
  4.   imports:      [ BrowserModule ],
  5.   declarations: [ AppComponent, UserComponent],
  6.   bootstrap:    [ AppComponent ]
  7. })
  8. export class AppModule { }

使用 UserComponent 組件

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'my-app',
  6.   template: `
  7.     <sl-user></sl-user>
  8.   `,
  9. })
  10. export class AppComponent {}

使用構(gòu)造函數(shù)初始化數(shù)據(jù)

  1. @Component({...})
  2. export class UserComponent {
  3.     name: string;
  4.     address: any;
  7.     constructor() {
  8.         this.name = 'Semlinker';
  9.         this.address = {
  10.             province: '福建',
  11.             city: '廈門(mén)'
  12.         }
  13.     }
  14. }

接口使用示例

定義 Address 接口

  1. interface Address {
  2.     province: string;
  3.     city: string;
  4. }

使用 Address 接口

  1. export class UserComponent {
  2.     name: string;
  3.     address: Address;
  4.     // ...
  5. }

第五節(jié) - 常用指令簡(jiǎn)介

在 Angular 實(shí)際項(xiàng)目中，最常用的指令是 ngIf 和 ngFor 指令。

基礎(chǔ)知識(shí)

ngIf 指令簡(jiǎn)介

該指令用于根據(jù)表達(dá)式的值，動(dòng)態(tài)控制模板內(nèi)容的顯示與隱藏。它與 AngularJS 1.x 中的 ng-if 指令的功能是等價(jià)的。

ngIf 指令語(yǔ)法

  1. <div *ngIf="condition">...</div>

ngFor 指令簡(jiǎn)介

該指令用于基于可迭代對(duì)象中的每一項(xiàng)創(chuàng)建相應(yīng)的模板。它與 AngularJS 1.x 中的 ng-repeat 指令的功能是等價(jià)的。

ngFor 指令語(yǔ)法

  1. <li *ngFor="let item of items;">...</li>

ngIf 與 ngFor 指令使用示例

  1. import { Component } from '@angular/core';
  4. interface Address {
  5.     province: string;
  6.     city: string;
  7. }
  10. @Component({
  11.     selector: 'sl-user',
  12.     template: `
  13.     <h2>大家好，我是{{name}}</h2>
  14.     <p>我來(lái)自<strong>{{address.province}}</strong>省,
  15.       <strong>{{address.city}}</strong>市
  16.     </p>
  17.     <div *ngIf="showSkills">
  18.         <h3>我的技能</h3>
  19.         <ul>
  20.             <li *ngFor="let skill of skills">
  21.                 {{skill}}
  22.             </li>
  23.         </ul>
  24.     </div>
  25.     `
  26. })
  27. export class UserComponent {
  28.     name: string;
  29.     address: Address;
  30.     showSkills: boolean;
  31.     skills: string[];
  34.     constructor() {
  35.         this.name = 'Semlinker';
  36.         this.address = {
  37.             province: '福建',
  38.             city: '廈門(mén)'
  39.         };
  40.         this.showSkills = true;
  41.         this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
  42.     }
  43. }

第六節(jié) - 事件綁定

在 Angular 中，我們可以通過(guò) (eventName) 的語(yǔ)法，實(shí)現(xiàn)事件綁定。

基礎(chǔ)知識(shí)

事件綁定語(yǔ)法

  1. <date-picker (dateChanged)="statement()"></date-picker>

等價(jià)于

  1. <date-picker on-dateChanged="statement()"></date-picker>

介紹完事件綁定的語(yǔ)法，接下來(lái)我們來(lái)為第五節(jié)中的 UserComponent 組件，開(kāi)發(fā)一個(gè)功能，即可以讓用戶(hù)動(dòng)態(tài)控制技能信息的顯示與隱藏。

事件綁定示例

  1. @Component({
  2.     selector: 'sl-user',
  3.     template: `
  4.     ...
  5.     <button (click)="toggleSkills()">
  6.         {{ showSkills ? "隱藏技能" : "顯示技能" }}
  7.     </button>
  8.     ...
  9.     `
  10. })
  11. export class UserComponent {
  12.     // ...
  13.     toggleSkills() {
  14.         this.showSkills = !this.showSkills;
  15.     }
  16. }

第七節(jié) - 表單模塊簡(jiǎn)介

Angular 中有兩種表單：

  • Template Driven Forms - 模板驅(qū)動(dòng)式表單 (類(lèi)似于 AngularJS 1.x 中的表單 )
  • Reactive Forms - 響應(yīng)式表單

本小節(jié)主要介紹模板驅(qū)動(dòng)式的表單，接下來(lái)我們來(lái)演示如何通過(guò)表單來(lái)為我們的之前創(chuàng)建的 UserComponent 組件，增加讓用戶(hù)自定義技能的功能。

基礎(chǔ)知識(shí)

導(dǎo)入表單模塊

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

模板變量語(yǔ)法

  1. <video #player></video> 
  2. <button (click)="player.pause()">Pause</button>

等價(jià)于

  1. <video ref-player></video>

表單使用示例

  1. @Component({
  2.     selector: 'sl-user',
  3.     template: `
  4.     ...
  5.     <div *ngIf="showSkills">
  6.         <h3>我的技能</h3>
  7.         ...
  8.         <form (submit)="addSkill(skill.value)">
  9.             <label>添加技能</label>
  10.             <input type="text" #skill>
  11.         </form>
  12.     </div>
  13.     `
  14. })
  15. export class UserComponent {
  16.    // ...
  17.     addSkill(skill: string) {
  18.         let skillStr = skill.trim();
  19.         if (this.skills.indexOf(skillStr) === -1) {
  20.             this.skills.push(skillStr);
  21.         }
  22.     }
  23. }

第八節(jié) - Http 模塊簡(jiǎn)介

基礎(chǔ)知識(shí)

導(dǎo)入 Http 模塊

  1. // ... 
  2. import { HttpModule } from '@angular/http';
  5. @NgModule({
  6.   imports: [BrowserModule, FormsModule, HttpModule],
  7.   declarations: [AppComponent, UserComponent],
  8.   bootstrap: [AppComponent]
  9. })
  10. export class AppModule { }

使用 Http 服務(wù)步驟

(1) 從 @angular/http 模塊中導(dǎo)入 Http 類(lèi)

(2) 導(dǎo)入 RxJS 中的 map 操作符

(3) 使用 DI 方式注入 http 服務(wù)

(4) 調(diào)用 http 服務(wù)的 get() 方法，設(shè)置請(qǐng)求地址并發(fā)送 HTTP 請(qǐng)求

(5) 調(diào)用 Response 對(duì)象的 json() 方法，把響應(yīng)體轉(zhuǎn)成 JSON 對(duì)象

(6) 把請(qǐng)求的結(jié)果，賦值給對(duì)應(yīng)的屬性

Http 服務(wù)使用示例

使用 Http 服務(wù)

  1. import { Component, OnInit } from '@angular/core';
  2. import { Http } from '@angular/http'; // (1)
  3. import 'rxjs/add/operator/map'; // (2)
  6. interface Member {
  7.     id: string;
  8.     login: string;
  9.     avatar_url: string;
  10. }
  13. @Component({
  14.     selector: 'sl-members',
  15.     template: `
  16.     <h3>Angular Orgs Members</h3>
  17.     <ul *ngIf="members">
  18.       <li *ngFor="let member of members;">
  19.         <p>
  20.           <img [src]="member.avatar_url" width="48" height="48"/>
  21.           ID：<span>{{member.id}}</span>
  22.           Name: <span>{{member.login}}</span>
  23.         </p>
  24.       </li>
  25.     </ul>
  26.     `
  27. })
  28. export class MembersComponent implements OnInit {
  29.   members: Member[];
  32.   constructor(private http: Http) { } // (3)
  35.   ngOnInit() {
  36.     this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) // (4)
  37.         .map(res => res.json()) // (5)
  38.         .subscribe(data => {
  39.            if (data) this.members = data; // (6)
  40.         });
  41.     }
  42. }

聲明 MembersComponent 組件

  1. // ...
  2. import { MembersComponent } from './members.component';
  5. @NgModule({
  6.   imports: [BrowserModule, FormsModule, HttpModule],
  7.   declarations: [AppComponent, UserComponent, MembersComponent],
  8.   bootstrap: [AppComponent]
  9. })
  10. export class AppModule { }

使用 MembersComponent 組件

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'my-app',
  6.   template: `
  7.     <sl-members></sl-members>
  8.   `,
  9. })
  10. export class AppComponent {}

第九節(jié) - 注入服務(wù)

基礎(chǔ)知識(shí)

組件中注入服務(wù)步驟

(1) 配置已創(chuàng)建的服務(wù)，如：

  1. @NgModule({
  2.   // ...
  3.   providers: [MemberService]
  4. })
  5. export class AppModule { }

(2) 導(dǎo)入已創(chuàng)建的服務(wù)，如：

  1. import { MemberService } from '../member.service';

(3) 使用構(gòu)造注入方式，注入服務(wù)：

  1. export class MembersComponent implements OnInit {
  2.    // ...
  3.    constructor(private memberService: MemberService) { }
  4. }

服務(wù)使用示例

創(chuàng)建 MemberService 服務(wù)

  1. import { Injectable } from '@angular/core';
  2. import { Http } from '@angular/http';
  5. @Injectable()
  6. export class MemberService {
  7.     constructor(private http: Http) { }
  10.     getMembers() {
  11.         return this.http
  12.             .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
  13.             .map(res => res.json())
  14.     }
  15. }

配置 MemberService 服務(wù)

  1. import { MemberService } from "./member.service";
  4. @NgModule({
  5.   // ...
  6.   providers:[MemberService],
  7.   bootstrap: [AppComponent]
  8. })
  9. export class AppModule { }

使用 MemberService 服務(wù)

  1. // ...
  2. import { MemberService } from "./member.service";
  5. @Component({...})
  6. export class MembersComponent implements OnInit {
  7.     members: Member[];
  10.     constructor(private memberService: MemberService) { }
  13.     ngOnInit() {
  14.         this.memberService.getMembers()
  15.             .subscribe(data => {
  16.                 if (data) this.members = data;
  17.             });
  18.     }
  19. }

第十節(jié) - 路由模塊簡(jiǎn)介

基礎(chǔ)知識(shí)

導(dǎo)入路由模塊

  1. // ...
  2. import { RouterModule } from '@angular/router';
  5. @NgModule({
  6.   imports: [BrowserModule, FormsModule, HttpModule, RouterModule],
  7.   declarations: [AppComponent, UserComponent, MembersComponent],
  8.   bootstrap: [AppComponent]
  9. })
  10. export class AppModule { }

配置路由信息

  1. import { Routes, RouterModule } from '@angular/router';
  2. import { UserComponent } from './user.component';
  5. export const ROUTES: Routes = [
  6.   { path: 'user', component: UserComponent }
  7. ];
  10. @NgModule({
  11.   imports: [
  12.     BrowserModule,
  13.     RouterModule.forRoot(ROUTES)
  14.   ],
  15.   // ...
  16. })
  17. export class AppModule {}

routerLink 指令

為了讓我們鏈接到已設(shè)置的路由，我們需要使用 routerLink 指令，具體示例如下：

  1. <nav>
  2.   <a routerLink="/">首頁(yè)</a>
  3.   <a routerLink="/user">我的</a>
  4. </nav>

當(dāng)我們點(diǎn)擊以上的任意鏈接時(shí)，頁(yè)面不會(huì)被重新加載。反之，我們的路徑將在 URL 地址欄中顯示，隨后進(jìn)行后續(xù)視圖更新，以匹配 routerLink 中設(shè)置的值。

router-outlet 指令

該指令用于告訴 Angular 在哪里加載組件，當(dāng) Angular 路由匹配到響應(yīng)路徑，并成功找到需要加載的組件時(shí)，它將動(dòng)態(tài)創(chuàng)建對(duì)應(yīng)的組件，并將其作為兄弟元素，插入到 router-outlet 元素中。具體示例如下：

  1. @Component({
  2.   selector: 'app-root',
  3.   template: `
  4.     <div class="app">
  5.       <h3>Our app</h3>
  6.       <router-outlet></router-outlet>
  7.     </div>
  8.   `
  9. })
  10. export class AppComponent {}

路由使用示例

配置路由信息

  1. export const ROUTES: Routes = [
  2.   { path: '', pathMatch: 'full', redirectTo: 'user' },
  3.   { path: 'user', component: UserComponent },
  4.   { path: 'members', component: MembersComponent }
  5. ];
  8. @NgModule({
  9.   imports: [BrowserModule, FormsModule, HttpModule,
  10.     RouterModule.forRoot(ROUTES)],
  11.   // ...
  12. })
  13. export class AppModule { }

配置路由導(dǎo)航

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'my-app',
  6.   template: `
  7.     <div class="app">
  8.       <h1>歡迎來(lái)到Angular的世界</h1>
  9.       <nav>
  10.         <a routerLink="/user">我的</a>
  11.         <a routerLink="/members">Angular成員</a>
  12.       </nav>
  13.       <router-outlet></router-outlet>
  14.     </div>
  15.   `,
  16. })
  17. export class AppComponent { }

完整示例

AppModule

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { FormsModule } from '@angular/forms';
  4. import { HttpModule } from '@angular/http';
  5. import { RouterModule, Routes } from '@angular/router';
  8. import { AppComponent } from './app.component';
  9. import { UserComponent } from './user.component';
  10. import { MembersComponent } from './members.component';
  11. import { MemberService } from "./member.service";
  14. export const ROUTES: Routes = [
  15.   { path: '', pathMatch: 'full', redirectTo: 'user' },
  16.   { path: 'user', component: UserComponent },
  17.   { path: 'members', component: MembersComponent }
  18. ];
  21. @NgModule({
  22.   imports: [BrowserModule, FormsModule, HttpModule,
  23.     RouterModule.forRoot(ROUTES)],
  24.   declarations: [AppComponent, UserComponent, MembersComponent],
  25.   providers: [MemberService],
  26.   bootstrap: [AppComponent]
  27. })
  28. export class AppModule { }

AppComponent

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'my-app',
  6.   template: `
  7.     <div class="app">
  8.       <h1>歡迎來(lái)到Angular的世界</h1>
  9.       <nav>
  10.         <a routerLink="/user">我的</a>
  11.         <a routerLink="/members">Angular成員</a>
  12.       </nav>
  13.       <router-outlet></router-outlet>
  14.     </div>
  15.   `,
  16. })
  17. export class AppComponent { }

UserComponent

  1. import { Component } from '@angular/core';
  6. interface Address {
  7.     province: string;
  8.     city: string;
  9. }
  12. @Component({
  13.     selector: 'sl-user',
  14.     template: `
  15.     <h2>大家好，我是{{name}}</h2>
  16.     <p>我來(lái)自<strong>{{address.province}}</strong>省,
  17.       <strong>{{address.city}}</strong>市
  18.     </p>
  19.     <button (click)="toggleSkills()">
  20.         {{ showSkills ? "隱藏技能" : "顯示技能" }}
  21.     </button>
  22.     <div *ngIf="showSkills">
  23.         <h3>我的技能</h3>
  24.         <ul>
  25.             <li *ngFor="let skill of skills">
  26.                 {{skill}}
  27.             </li>
  28.         </ul>
  29.         <form (submit)="addSkill(skill.value)">
  30.             <label>添加技能</label>
  31.             <input type="text" #skill>
  32.         </form>
  33.     </div>
  34.     `
  35. })
  36. export class UserComponent {
  37.     name: string;
  38.     address: Address;
  39.     showSkills: boolean;
  40.     skills: string[];
  43.     constructor() {
  44.         this.name = 'Semlinker';
  45.         this.address = {
  46.             province: '福建',
  47.             city: '廈門(mén)'
  48.         };
  49.         this.showSkills = true;
  50.         this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
  51.     }
  54.     toggleSkills() {
  55.         this.showSkills = !this.showSkills;
  56.     }
  59.     addSkill(skill: string) {
  60.         let skillStr = skill.trim();
  61.         if (this.skills.indexOf(skillStr) === -1) {
  62.             this.skills.push(skillStr);
  63.         }
  64.     }
  65. }

MembersComponent

  1. import { Component, OnInit } from '@angular/core';
  2. import { Http } from '@angular/http';
  3. import 'rxjs/add/operator/map';
  6. import { MemberService } from "./member.service";
  9. interface Member {
  10.     id: string;
  11.     login: string;
  12.     avatar_url: string;
  13. }
  16. @Component({
  17.     selector: 'sl-members',
  18.     template: `
  19.     <h3>Angular Orgs Members</h3>
  20.     <ul *ngIf="members">
  21.       <li *ngFor="let member of members;">
  22.         <p>
  23.           <img [src]="member.avatar_url" width="48" height="48"/>
  24.           ID：<span>{{member.id}}</span>
  25.           Name: <span>{{member.login}}</span>
  26.         </p>
  27.       </li>
  28.     </ul>
  29.     `
  30. })
  31. export class MembersComponent implements OnInit {
  32.     members: Member[];
  35.     constructor(private memberService: MemberService) { }
  38.     ngOnInit() {
  39.         this.memberService.getMembers()
  40.             .subscribe(data => {
  41.                 if (data) this.members = data;
  42.             });
  43.     }
  44. }

MemberService

  1. import { Injectable } from '@angular/core';
  2. import { Http } from '@angular/http';
  5. @Injectable()
  6. export class MemberService {
  7.     constructor(private http: Http) { }
  10.     getMembers() {
  11.         return this.http
  12.             .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
  13.             .map(res => res.json())
  14.     }
  15. }

我有話說(shuō)

除了本系列教程外，還有其它學(xué)習(xí)資源么？

本系列教程的主要目的是讓初學(xué)者對(duì) Angular 的相關(guān)基礎(chǔ)知識(shí)，有一定的了解。除了本系列教程外，初學(xué)者還可以參考以下教程：

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)