前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular 6.x 快速入门

Angular 6.x 快速入门

作者头像
阿宝哥
发布2019-11-05 15:45:31
14.1K0
发布2019-11-05 15:45:31
举报
文章被收录于专栏:全栈修仙之路

第一节 - Angular 环境搭建

基础要求

Angular 开发环境

代码语言:javascript
复制
$ npm install -g @angular/cli
  • 检测 Angular CLI 是否安装成功
代码语言:javascript
复制
$ ng --version
  • 创建新的项目
代码语言:javascript
复制
$ ng new project-name
  • 启动本地服务器
代码语言:javascript
复制
$ cd project-name
$ ng serve

第二节 - 插值表达式

在 Angular 中,我们可以使用插值语法实现数据绑定。

绑定普通文本

代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{ name }}</h1>`,
})
export class AppComponent  {
  name = 'Angular'; 
}

绑定对象属性

代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h2>大家好,我是{{ name }}</h2>
    <p>我来自<strong>{{ address.province }}</strong>省,
      <strong>{{ address.city }}</strong>市
    </p>
  `,
})
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门'
  }
}

在 Angular 内部为我们提供了 json 管道,它用来来显示对象信息:

代码语言:javascript
复制
@Component({
  selector: 'my-app',
  template: `
    ...
    <p>{{address | json}}</p>
  `,
})
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门'
  }
}

第三节 - 自定义组件

在 Angular 中,我们可以通过 Component 装饰器和组件类来创建自定义组件。

基础知识

定义组件的元信息

在 Angular 中,我们可以使用 Component 装饰器来定义组件的元信息:

代码语言:javascript
复制
@Component({
  selector: 'my-app', // 用于定义组件在HTML代码中匹配的标签
  template: `<h1>Hello {{name}}</h1>`, // 定义组件内嵌视图
})
定义组件类
代码语言:javascript
复制
export class AppComponent  {
  name = 'Angular'; 
}
定义数据接口

在 TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象外,也可用于对「对象的形状(Shape)」进行描述。

代码语言:javascript
复制
interface Person {
  name: string;
  age: number;
}

let semlinker: Person = {
  name: 'semlinker',
  age: 31
};

自定义组件示例

创建 UserComponent 组件
代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好,我是{{ name }}</h2>
    <p>我来自<strong>{{ address.province }}</strong>省,
      <strong>{{ address.city }}</strong>市
    </p>
    `
})
export class UserComponent {
    name = 'Semlinker';
    address = {
        province: '福建',
        city: '厦门'
    };
}
声明 UserComponent 组件
代码语言:javascript
复制
// ...
import { UserComponent } from './user.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, UserComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
使用 UserComponent 组件
代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <sl-user></sl-user>
  `,
})
export class AppComponent {}
在构造函数中执行数据初始化
代码语言:javascript
复制
@Component({...})
export class UserComponent {
    name: string;
    address: any;

    constructor() {
      this.name = 'Semlinker';
      this.address = {
        province: '福建',
        city: '厦门'
      }
    }
}

接口使用示例

定义 Address 接口
代码语言:javascript
复制
interface Address {
    province: string;
    city: string;
}
使用 Address 接口
代码语言:javascript
复制
export class UserComponent {
    name: string;
    address: Address;
    // ...
}

第四节 - 常用指令简介

在 Angular 实际项目中,最常用的指令是 ngIfngFor 指令。

基础知识

ngIf 指令简介

该指令用于根据表达式的值,动态控制模板内容的显示与隐藏。它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。

ngIf 指令语法
代码语言:javascript
复制
<div *ngIf="condition">...</div>
ngFor 指令简介

该指令用于基于可迭代对象中的每一项创建相应的模板。它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。

ngFor 指令语法
代码语言:javascript
复制
<li *ngFor="let item of items;">...</li>

ngIf 与 ngFor 指令使用示例

代码语言:javascript
复制
import { Component } from '@angular/core';

interface Address {
    province: string;
    city: string;
}

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好,我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        <ul>
            <li *ngFor="let skill of skills">
                {{skill}}
            </li>
        </ul>
    </div>
    `
})
export class UserComponent {
    name: string;
    address: Address;
    showSkills: boolean;
    skills: string[];

    constructor() {
      this.name = 'Semlinker';
      this.address = {
        province: '福建',
        city: '厦门'
      };
      this.showSkills = true;
      this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x', 'Angular 6.x'];
    }
}

第五节 - 事件绑定

在 Angular 中,我们可以通过 (eventName) 的语法,实现事件绑定。

基础知识

事件绑定语法
代码语言:javascript
复制
<date-picker (dateChanged)="statement()"></date-picker>

介绍完事件绑定的语法,接下来我们来为第五节中的 UserComponent 组件,开发一个功能,即可以让用户动态控制技能信息的显示与隐藏。

事件绑定示例

代码语言:javascript
复制
@Component({
    selector: 'sl-user',
    template: `
    ...
    <button (click)="toggleSkills()">
       {{ showSkills ? "隐藏技能" : "显示技能" }}
    </button>
    ...
    `
})
export class UserComponent {
    // ...
    toggleSkills() {
      this.showSkills = !this.showSkills;
    }
}

第六节 - 表单模块简介

Angular 中有两种表单:

  • Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )
  • Reactive Forms - 响应式表单

本小节主要介绍模板驱动式的表单,接下来我们来演示如何通过表单来为我们的之前创建的 UserComponent 组件,增加让用户自定义技能的功能。

基础知识

导入表单模块
代码语言:javascript
复制
import { FormsModule } from '@angular/forms';
// ...
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
模板变量语法
代码语言:javascript
复制
<video #player></video> 
<button (click)="player.pause()">Pause</button>

表单使用示例

代码语言:javascript
复制
@Component({
    selector: 'sl-user',
    template: `
    ...
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        ...
        <form (submit)="addSkill(skill.value)">
            <label>添加技能</label>
            <input type="text" #skill>
        </form>
    </div>
    `
})
export class UserComponent {
   // ...
    addSkill(skill: string) {
        let skillStr = skill.trim();
        if (this.skills.indexOf(skillStr) === -1) {
            this.skills.push(skillStr);
        }
    }
}

第七节 - Http 模块简介

基础知识

导入 HttpClientModule 模块
代码语言:javascript
复制
// ... 
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
使用 HttpClient 服务步骤

(1) 从 @angular/common/http 模块中导入 HttpClient;

(2) 使用构造注入,注入 http 服务;

(3) 调用 http 服务的 get() 方法,设置请求地址并发送 HTTP 请求;

(4) 把请求的结果,赋值给对应的属性。

HttpClient 服务使用示例

使用 HttpClient 服务
代码语言:javascript
复制
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // (1)

interface Member {
  id: string;
  login: string;
  avatar_url: string;
}

@Component({
  selector: 'sl-members',
  template: `
    <h3>Angular Orgs Members</h3>
    <ul *ngIf="members">
      <li *ngFor="let member of members;">
        <p>
          <img [src]="member.avatar_url" width="48" height="48"/>
          ID:<span>{{member.id}}</span>
          Name: <span>{{member.login}}</span>
        </p>
      </li>
    </ul>
    `
})
export class MembersComponent implements OnInit {
  members: Member[];

  constructor(private http: HttpClient) { } // (2)

  ngOnInit() {
    this.http.get<Member[]>(`https://api.github.com/orgs/angular/members?	page=1&per_page=5`) // (3)
      .subscribe(data => {
        if (data) this.members = data; // (4)
      });
  }
}
声明 MembersComponent 组件
代码语言:javascript
复制
// ...
import { MembersComponent } from './members.component';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpClientModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
使用 MembersComponent 组件
代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <sl-members></sl-members>
  `,
})
export class AppComponent {}

第八节 - 注入服务

基础知识

组件中注入服务步骤

(1) 创建服务,如:

代码语言:javascript
复制
@Injectable({
  providedIn: 'root'
})
export class MemberService {}

(2) 在应用的地方,导入已创建的服务,如:

代码语言:javascript
复制
import { MemberService } from '../member.service';

(3) 使用构造注入方式,注入服务:

代码语言:javascript
复制
export class MembersComponent implements OnInit {
   // ...
   constructor(private memberService: MemberService) { }
}

服务使用示例

创建 MemberService 服务
代码语言:javascript
复制
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable }from 'rxjs';

import { Member } from './members.component'

@Injectable({
  providedIn: 'root'
})
export class MemberService {
    constructor(private http: HttpClient) { }

    getMembers(): Observable<Member[]>{
      return this.http
            .get<Member[]>(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
    }
}
使用 MemberService 服务
代码语言:javascript
复制
// ...
import { MemberService } from "./member.service";

@Component({...})
export class MembersComponent implements OnInit {
  members: Member[];

  constructor(private memberService: MemberService) { } // (3)

  ngOnInit() {
    this.memberService.getMembers()
      .subscribe(members => {
        if (members) this.members = members;
      });
  }
}

第九节 - 路由模块简介

基础知识

导入路由模块
代码语言:javascript
复制
// ...
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpClientModule, RouterModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
配置路由信息
代码语言:javascript
复制
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user.component';

export const ROUTES: Routes = [
  { path: 'user', component: UserComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
  // ...
})
export class AppModule {}
routerLink 指令

为了让我们链接到已设置的路由,我们需要使用 routerLink 指令,具体示例如下:

代码语言:javascript
复制
<nav>
  <a routerLink="/">首页</a>
  <a routerLink="/user">我的</a>
</nav>

当我们点击以上的任意链接时,页面不会被重新加载。反之,我们的路径将在 URL 地址栏中显示,随后进行后续视图更新,以匹配 routerLink 中设置的值。

router-outlet 指令

该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载的组件时,它将动态创建对应的组件,并将其作为兄弟元素,插入到 router-outlet 元素中。具体示例如下:

代码语言:javascript
复制
@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}

路由使用示例

配置路由信息
代码语言:javascript
复制
export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'user' },
  { path: 'user', component: UserComponent },
  { path: 'members', component: MembersComponent }
];

@NgModule({
  imports: [BrowserModule, FormsModule, HttpClientModule,
    RouterModule.forRoot(ROUTES)],
  // ...
})
export class AppModule { }
配置路由导航
代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h1>欢迎来到 {{name}} 的世界</h1>
      <nav>
        <a routerLink="/user">我的信息</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,
  styles: [`
    a {
      margin: 5px;
    }
  `]
})
export class AppComponent {
  name = 'Angular';
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/08/09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一节 - Angular 环境搭建
    • 基础要求
      • Angular 开发环境
      • 第二节 - 插值表达式
        • 绑定普通文本
          • 绑定对象属性
          • 第三节 - 自定义组件
            • 基础知识
              • 定义组件的元信息
              • 定义组件类
              • 定义数据接口
            • 自定义组件示例
              • 创建 UserComponent 组件
              • 声明 UserComponent 组件
              • 使用 UserComponent 组件
              • 在构造函数中执行数据初始化
            • 接口使用示例
              • 定义 Address 接口
              • 使用 Address 接口
          • 第四节 - 常用指令简介
            • 基础知识
              • ngIf 指令简介
              • ngIf 指令语法
              • ngFor 指令简介
              • ngFor 指令语法
            • ngIf 与 ngFor 指令使用示例
            • 第五节 - 事件绑定
              • 基础知识
                • 事件绑定语法
              • 事件绑定示例
              • 第六节 - 表单模块简介
                • 基础知识
                  • 导入表单模块
                  • 模板变量语法
                • 表单使用示例
                • 第七节 - Http 模块简介
                  • 基础知识
                    • 导入 HttpClientModule 模块
                    • 使用 HttpClient 服务步骤
                  • HttpClient 服务使用示例
                    • 使用 HttpClient 服务
                    • 声明 MembersComponent 组件
                    • 使用 MembersComponent 组件
                • 第八节 - 注入服务
                  • 基础知识
                    • 组件中注入服务步骤
                  • 服务使用示例
                    • 创建 MemberService 服务
                    • 使用 MemberService 服务
                • 第九节 - 路由模块简介
                  • 基础知识
                    • 导入路由模块
                    • 配置路由信息
                    • routerLink 指令
                    • router-outlet 指令
                  • 路由使用示例
                    • 配置路由信息
                    • 配置路由导航
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档