文档章节

Angular 英雄编辑器

honeymoose
 honeymoose
发布于 05/25 03:04
字数 1901
阅读 10
收藏 0

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。

创建英雄组件

使用 Angular CLI 创建一个名为 heroes 的新组件。

ng generate component heroes

CLI 创建了一个新的文件夹, src/app/heroes/,并生成了 HeroesComponent 的 4 个文件。

HeroesComponent 的类文件如下:

heroes.component.ts

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

 

@Component({

  selector: 'app-heroes',

  templateUrl: './heroes.component.html',

  styleUrls: ['./heroes.component.css']

})

export class HeroesComponent implements OnInit {

 

  constructor() { }

 

  ngOnInit() {

  }

 

}

你要从 Angular 核心库中导入 

Component

 符号,并为组件类加上 @

Component

 注解。

@Component 是一个修饰器函数,这个函数为组件指定了 Angular 元数据。

CLI 自动生成了三个元数据属性:

  1. selector — 组件的 CSS 元素选择器。
  2. templateUrl — 组件模板文件的位置。
  3. styleUrls — 组件私有 CSS 样式表文件的位置。

CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称,以识别出该组件。

ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。

始终要 export 这个组件类,以便于在其它地方(比如 AppModule)导入它。

添加一个 hero 属性

往 HeroesComponent 中添加一个 hero 属性,用来表示一个名叫 “Windstorm” 的英雄。

hero = 'Windstorm';

显示英雄

打开模板文件 heroes.component.html。删除 Angular CLI 自动生成的默认内容,改为到 hero 属性的数据绑定。

heroes.component.html

{{hero}}

显示 HeroesComponent 视图

要显示 HeroesComponent 你必须把它加到壳组件 AppComponent 的模板中。

别忘了,app-heroes 就是 HeroesComponent 的 元素选择器(element selector)。 所以,只要把 <app-heroes> 元素添加到 AppComponent 的模板文件(app.component.html)中就可以了,就放在标题下方。

app.component.html

<h1>{{title}}</h1>

<app-heroes></app-heroes>

如果 CLI 的 ng serve 命令仍在运行,浏览器就会自动刷新,并且同时显示出应用的标题和英雄的名字。

创建一个 Hero 类

真实的英雄当然不仅仅只有一个名字。

在 src/app 文件夹中为 Hero 类创建一个文件,并添加 id 和 name 属性。

src/app/hero.ts

export class Hero {

  id: number;

  name: string;

}

回到 HeroesComponent 类,并且导入这个 Hero 类。

把组件的 hero 属性的类型重构为 Hero。 然后以 1 为 id、以 “Windstorm” 为名字初始化它。

修改后的 HeroesComponent 类应该是这样的:

src/app/heroes/heroes.component.ts

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

import {Hero} from '../hero';

 

@Component({

  selector: 'app-heroes',

  templateUrl: './heroes.component.html',

  styleUrls: ['./heroes.component.css']

})

export class HeroesComponent implements OnInit {

 

  hero: Hero = {

    id: 1,

    name: 'Windstorm'

  };

 

  constructor() {

  }

 

  ngOnInit() {

  }

 

}

页面显示变得不正常了,因为你刚刚把 hero 从字符串改成了对象。

显示 hero 对象

修改模板中的绑定,以显示英雄的名字,并在详情中显示 id 和 name,就像这样:

heroes.component.html (HeroesComponent 的模板)

<h2>{{hero.name}} Details</h2>

<div><span>id: </span>{{hero.id}}</div>

<div><span>name: </span>{{hero.name}}</div>

浏览器自动刷新,并显示这位英雄的信息。

使用 UppercasePipe 进行格式化

把 hero.name 的绑定修改成这样:

<h2>{{hero.name | uppercase}} Details</h2>

对浏览器进行刷新。现在,你会发现英雄的名字显示成了大写字母。

位于管道操作符( | )的右边的单词 uppercase 表示的是一个插值绑定,用于调用内置的 UppercasePipe。

管道(Pipes) 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道,当然你还可以创建自己的管道。

编辑英雄

用户应该能在一个 <input> 文本输入框(textbox)中编辑英雄的名字。

当用户输入时,这个输入框应该能同时显示修改英雄的 name 属性。 也就是说,数据流从组件类流出到屏幕,并且从屏幕流回到组件类

要想让这种数据流动自动化,就要在表单元素 <input> 和组件的 hero.name 属性之间建立双向数据绑定。

双向绑定

把 HeroesComponent 模板中的英雄详情区重构成这样:

src/app/heroes/heroes.component.html (HeroesComponent 模板)

<div>

  <label>name:

    <input [(ngModel)]="hero.name" placeholder="name"/>

  </label>

</div>

[(ngModel)] 是 Angular 的双向数据绑定句法。

这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上,以便数据流可以双向流动:从 hero.name 属性流动到 textbox,并且从 textbox 流回到 hero.name 。

缺少 FormsModule

注意,当你加上 [(ngModel)] 之后这个应用无法工作了。

打开浏览器的开发工具,就会在控制台中看到如下信息:

Uncaught Error: Template parse errors:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

虽然 ngModel 是一个有效的 Angular 指令,不过它在默认情况下是不可用的。

它属于一个可选模块 FormsModule,你必须自行添加此模块才能使用该指令。

AppModule

Angular 需要知道如何把应用程序的各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)

最重要的 @NgModule 装饰器位于顶级类 AppModule 上。

Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。 这里也就是你要添加 FormsModule 的地方。

导入 FormsModule

打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。

app.module.ts (FormsModule 符号导入)

import {FormsModule} from '@angular/forms';

然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中,这里是该应用所需外部模块的列表。

app.module.ts(@NgModule 导入)

imports: [

  BrowserModule,

  FormsModule

],

刷新浏览器,应用又能正常工作了。你可以编辑英雄的名字,并且会看到这个改动立刻体现在这个输入框上方的 <h2> 中。

声明 HeroesComponent

每个组件都必须声明在(且只能声明在)一个 NgModule 中。

没有声明过 HeroesComponent,可为什么应用却正常工作呢?

这是因为 Angular CLI 在生成 HeroesComponent 组件的时候就自动把它加到了 AppModule 中。

打开 src/app/app.module.ts 你可以在顶部找到 HeroesComponent 已经被导入过了。

src/app/app.module.ts

import {HeroesComponent} from './heroes/heroes.component';

HeroesComponent 也已经声明在了 @NgModule.declarations 数组中。

declarations: [

  AppComponent,

  HeroesComponent

],

注意:AppModule 声明了应用中的所有组件,AppComponent 和 HeroesComponent

 

最终代码预览

应用跑起来应该是这样的:在线例子 / 下载范例

如果你想直接在 stackblitz 运行本页中的例子,请单击链接:https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

本页中所提及的代码如下:https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

对应的文件列表和代码链接如下:

文件名

源代码

src/app/heroes/heroes.component.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/heroes/heroes.component.ts
src/app/heroes/heroes.component.html https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/heroes/heroes.component.html
src/app/app.module.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.module.ts
src/app/app.component.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.ts
src/app/app.component.html https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.html
src/app/hero.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/hero.ts
 

小结

  • 你使用 CLI 创建了第二个组件 HeroesComponent
  • 你把 HeroesComponent 添加到了壳组件 AppComponent 中,以便显示它。
  • 你使用 UppercasePipe 来格式化英雄的名字。
  • 你用 ngModel 指令实现了双向数据绑定。
  • 你知道了 AppModule
  • 你把 FormsModule 导入了 AppModule,以便 Angular 能识别并应用 ngModel 指令。
  • 你知道了把组件声明到 AppModule 是很重要的,并认识到 CLI 会自动帮你声明它。

https://www.cwiki.us/display/AngularZH/The+Hero+Editor

© 著作权归作者所有

honeymoose
粉丝 4
博文 485
码字总数 232746
作品 0
宝山
私信 提问
AngularDart4.0 英雄之旅-教程-03英雄编辑器

码云项目页:https://gitee.com/scooplolwiki/toh-1 在这一部分,您将修改起始应用程序以显示有关英雄的信息。 然后,您将添加编辑英雄信息的功能。 完成后,应用程序应该看起来像这个实例(...

scooplol
2017/10/22
0
0
AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走
2018/05/11
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
6.8K
22
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.5K
14

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL build

https://buildfarm.postgresql.org/cgi-bin/show_log.pl?nm=lumpsucker&dt=2019-06-23%2020%3A57%3A27...

MtrS
今天
3
0
八、Docker Swarm

Docker Swarm有两件事:一个企业级的Docker主机安全集群,另一个是用于协调微服务应用程序的引擎。 在集群方面,它将一个或多个Docker节点组合在一起,并允许你将他们作为一个集群来管理。开...

倪伟伟
昨天
7
0
Fragment懒加载其实很简单

前言 记得去年面试的时候, 面了一家小公司, 那个面试官问我, fragment的懒加载做过吗?我说没做过(确实没做过).后来面试快结束了, 又问我, 懒加载没做过是吗?后来可想而知也没收到offer, (ಥ_...

天王盖地虎626
昨天
5
0
聊聊dubbo的TimeoutFilter

序 本文主要研究一下dubbo的TimeoutFilter ListenableFilter dubbo-2.7.2/dubbo-rpc/dubbo-rpc-api/src/main/java/org/apache/dubbo/rpc/ListenableFilter.java public abstract class Liste......

go4it
昨天
9
0
方法与数组

方法 方法就是完成特定功能的代码块;在很多语言里面都有函数的定义,函数在Java中被称为方法 格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2…) throw 异常{ 函数体;...

凹凸凸
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部