Angular 4 快速入门

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了Angular 4 快速入门，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

建了个群有兴趣的朋友可以加一下 QQ 群：Angular 修仙之路 - 153742079 (群名称规则：城市 + 昵称)。

目录

  • 第一节 - Angular 简介

  • 第二节 - Angular 环境搭建

  • 第三节 - 插值表达式

  • 第四节 - 自定义组件

  • 第五节 - 常用指令简介

  • 第六节 - 事件绑定

  • 第七节 - 表单模块简介

  • 第八节 - Http 模块简介

  • 第九节 - 注入服务

  • 第十节 - 路由模块简介

第一节 Angular 简介

Angular 是什么

Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。

Angular 有什么特点

  • 基于 Angular 我们可以构建适用于所有平台的应用。比如：Web 应用、移动 Web 应用、移动应用和桌面应用等。

  • 通过 Web Worker和服务端渲染 (SSR)，达到在如今Web平台上所能达到的最高渲染速度。

  • Angular 让你能够有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。

Angular 提供了哪些功能

  • 动态HTML

  • 强大的表单系统 (模板驱动和模型驱动)

  • 强大的视图引擎

  • 事件处理

  • 快速的页面渲染

  • 灵活的路由

  • HTTP 服务

  • 视图封装

  • AOT、Tree Shaking

Angular 与 AngularJS 有什么区别

  • 不再有Controller和 Scope

  • 更好的组件化及代码复用

  • 更好的移动端支持

  • 引入了 RxJS 与 Observable

  • 引入了 Zone.js，提供更加智能的变化检测

第二节 - Angular 环境搭建

基础要求

Angular 开发环境配置方式

配置开发环境

本快速入门教程，选用第一种配置方式搭建 Angular 开发环境：

@H_403_186@基于 Angular Quickstart

  • 使用 Git 克隆 quickstart 项目

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

  • 安装项目所需依赖

npm i

  • 验证环境是否搭建成功

npm start
@H_403_186@基于 Angular CLI 
npm install -g @angular/cli

  • 检测 Angular CLI 是否安装成功

ng --version

  • 创建新的项目

ng new PROJECT-NAME

  • 启动本地服务器

cd PROJECT-NAME
ng serve

第三节 - 插值表达式

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

绑定普通文本

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

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

绑定对象属性

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 管道，来显示对象信息：

@Component({
  selector: 'my-app',template: `
    ...
    <p>{{address | json}}</p>
  `,city: '厦门'
  }
}

第四节 - 自定义组件

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

基础知识

@H_403_186@定义组件的元信息

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

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

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

interface Person {
  name: string;
  age: number;
}

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

自定义组件示例

@H_403_186@创建 UserComponent 组件 
import { Component } from '@angular/core';

@Component({
    selector: 'sl-user',<strong>{{address.city}}</strong>市
    </p>
    `
})
export class UserComponent {
    name = 'Semlinker';
    address = {
        province: '福建',city: '厦门'
    };
}
@H_403_186@声明 UserComponent 组件 
// ...
import { UserComponent } from './user.component';
@NgModule({
  imports:      [ BrowserModule ],declarations: [ AppComponent,UserComponent],bootstrap:    [ AppComponent ]
})
export class AppModule { }
@H_403_186@使用 UserComponent 组件 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',template: `
    <sl-user></sl-user>
  `,})
export class AppComponent {}
@H_403_186@使用构造函数初始化数据 
@Component({...})
export class UserComponent {
    name: string;
    address: any;

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

接口使用示例

@H_403_186@定义 Address 接口 
interface Address {
    province: string;
    city: string;
}
@H_403_186@使用 Address 接口 
export class UserComponent {
    name: string;
    address: Address;
    // ...
}

第五节 - 常用指令简介

在 Angular 实际项目中，最常用的指令是 ngIf 和 ngFor 指令。

基础知识

@H_403_186@ngIf 指令简介

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

@H_403_186@ngIf 指令语法 
<div *ngIf="condition">...</div>
@H_403_186@ngFor 指令简介

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

@H_403_186@ngFor 指令语法 
<li *ngFor="let item of items;">...</li>

ngIf 与 ngFor 指令使用示例

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

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

@Component({
    selector: 'sl-user',<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 中，我们可以通过 (eventName) 的语法，实现事件绑定。

基础知识

@H_403_186@事件绑定语法 
<date-picker (dateChanged)="statement()"></date-picker>

等价于

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

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

事件绑定示例

@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 组件，增加让用户自定义技能的功能。

基础知识

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

等价于

<video ref-player></video>

表单使用示例

@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 模块简介

基础知识

@H_403_186@导入 Http 模块 
// ... 
import { HttpModule } from '@angular/http';

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

(1) 从 @angular/http 模块中导入 Http 类

(2) 导入 RxJS 中的 map 操作符

(3) 使用 DI 方式注入 http 服务

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

(5) 调用 Response 对象的 json() 方法，把响应体转成 JSON 对象

(6) 把请求的结果，赋值给对应的属性

Http 服务使用示例

@H_403_186@使用 Http 服务 
import { Component,OnInit } from '@angular/core';
import { Http } from '@angular/http'; // (1)
import 'rxjs/add/operator/map'; // (2)

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: Http) { } // (3)

  ngOnInit() {
    this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) // (4)
        .map(res => res.json()) // (5)
        .subscribe(data => {
           if (data) this.members = data; // (6)
        });
    }
}
@H_403_186@声明 MembersComponent 组件 
// ...
import { MembersComponent } from './members.component';

@NgModule({
  imports: [BrowserModule,UserComponent,MembersComponent],bootstrap: [AppComponent]
})
export class AppModule { }
@H_403_186@使用 MembersComponent 组件 
import { Component } from '@angular/core';

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

第九节 - 注入服务

基础知识

@H_403_186@组件中注入服务步骤

(1) 配置已创建的服务，如：

@NgModule({
  // ...
  providers: [MemberService]
})
export class AppModule { }

(2) 导入已创建的服务，如：

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

(3) 使用构造注入方式，注入服务：

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

服务使用示例

@H_403_186@创建 MemberService 服务 
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class MemberService {
    constructor(private http: Http) { }

    getMembers() {
        return this.http
            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json())
    }
}
@H_403_186@配置 MemberService 服务 
import { MemberService } from "./member.service";

@NgModule({
  // ...
  providers:[MemberService],bootstrap: [AppComponent]
})
export class AppModule { }
@H_403_186@使用 MemberService 服务 
// ...
import { MemberService } from "./member.service";

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

    constructor(private memberService: MemberService) { }

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

第十节 - 路由模块简介

基础知识

@H_403_186@导入路由模块 
// ...
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [BrowserModule,HttpModule,RouterModule],bootstrap: [AppComponent]
})
export class AppModule { }
@H_403_186@配置路由信息 
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 {}
@H_403_186@routerLink 指令

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

<nav>
  <a routerLink="/">首页</a>
  <a routerLink="/user">我的</a>
</nav>

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

@H_403_186@router-outlet 指令

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

@Component({
  selector: 'app-root',template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}

路由使用示例

@H_403_186@配置路由信息 
export const ROUTES: Routes = [
  { path: '',pathMatch: 'full',redirectTo: 'user' },{ path: 'user',component: UserComponent },{ path: 'members',component: MembersComponent }
];

@NgModule({
  imports: [BrowserModule,RouterModule.forRoot(ROUTES)],// ...
})
export class AppModule { }
@H_403_186@配置路由导航 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',template: `
    <div class="app">
      <h1>欢迎来到Angular的世界</h1>
      <nav>
        <a routerLink="/user">我的</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,})
export class AppComponent { }

完整示例

AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule,Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { UserComponent } from './user.component';
import { MembersComponent } from './members.component';
import { MemberService } from "./member.service";

export const ROUTES: Routes = [
  { path: '',providers: [MemberService],bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent

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

@Component({
  selector: 'my-app',})
export class AppComponent { }

UserComponent

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


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

@Component({
    selector: 'sl-user',<strong>{{address.city}}</strong>市
    </p>
    <button (click)="toggleSkills()">
        {{ showSkills ? "隐藏技能" : "显示技能" }}
    </button>
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        <ul>
            <li *ngFor="let skill of skills">
                {{skill}}
            </li>
        </ul>
        <form (submit)="addSkill(skill.value)">
            <label>添加技能</label>
            <input type="text" #skill>
        </form>
    </div>
    `
})
export class UserComponent {
    name: string;
    address: Address;
    showSkills: boolean;
    skills: string[];

    constructor() {
        this.name = 'Semlinker';
        this.address = {
            province: '福建','Angular 4.x'];
    }

    toggleSkills() {
        this.showSkills = !this.showSkills;
    }

    addSkill(skill: string) {
        let skillStr = skill.trim();
        if (this.skills.indexOf(skillStr) === -1) {
            this.skills.push(skillStr);
        }
    }
}

MembersComponent

import { Component,OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

import { MemberService } from "./member.service";

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 memberService: MemberService) { }

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

MemberService

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

@Injectable()
export class MemberService {
    constructor(private http: Http) { }

    getMembers() {
        return this.http
            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json())
    }
}

我有话说

除了本系列教程外，还有其它学习资源么？

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

猜你在找的Angularjs相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作