Angular教程:英雄指南(1)

作者: 麻辣阁 分类: Angular 发布时间: 2019-02-11 23:45

参考:https://angular.cn/tutorial

初始化空间和应用:

ng new heroes
cd heroes
ng serve -o

这会创建根组件app-root, 位于 src/app目录下

插值绑定

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

双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。

公有样式

在 src/styles.css 中定义:

/* You can add global styles to this file, and also import other style files */
/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

简单的组件调用

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

Y:\heroes>ng generate component heroes
CREATE src/app/heroes/heroes.component.html (25 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (628 bytes)
CREATE src/app/heroes/heroes.component.ts (269 bytes)
CREATE src/app/heroes/heroes.component.css (0 bytes)
UPDATE src/app/app.module.ts (475 bytes)

可以看到对应命令做了下面的事情

  • 在src/app创建组件目录src/app/heroes,组件目录和根组件app-root是平级的
  • 创建 html,ts,css 文件
  • 创建 spec.ts 文件, 这是什么东西?
  • 更新 app.module.ts, 将该组件添加到了项目的组件列表中

heroes.component.ts ,组件对应的元素选择器为 app-heroes

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

// 始终要 export 这个组件类,以便在其它地方(比如 AppModule)导入它。
export class HeroesComponent implements OnInit { 
  //定义属性, 这里往 HeroesComponent 中添加一个 hero 属性,用来表示一个名叫 “Windstorm” 的英雄。
  hero = 'Windstorm';

  // 以下定义方法
  constructor() { }

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

}

需要从 Angular 核心库中导入 Component 符号,并为组件类加上 @Component 装饰器。

@Component 是个装饰器函数,用于为该组件指定 Angular 所需的元数据。

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

  • selector— 组件的选择器(CSS 元素选择器).CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称,以识别出该组件。
  • templateUrl— 组件模板文件的位置。
  • styleUrls— 组件私有 CSS 样式表文件的位置。

heroes.component.html, 定义 heroes组件要展示的内容:

{{hero}}

然后在根组件的 html模板 app.component.html 中通过 元素选择器 app-heroes 调用组件 heroes:

  <h1>
    Welcome to {{ title }}!
  </h1>

 <app-heroes></app-heroes>
<router-outlet></router-outlet>

类定义

英雄等实体一般不止一个, 像Java等 OOP 一样, TypeScript 支持创建实体类.

TypeScript中的类名和文件名不要求保持一致.新建文件src/app/hero.ts, 在其中创建 Hero类:

export class Hero{
    id:number;
    name:string;
}

类引用

在 heroes 组件中引用 Hero类:

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属性,并实例化之
    hero:Hero = {id:1,name:"Spider Man"}; 
  constructor() { }

  ngOnInit() {
  }

}

该组件的属性定义已经发生了变化, html模板也需要调整:

heroes.component.html, 定义 heroes组件要展示的内容:

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

管道

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

上面的绑定表达式中的 uppercase 位于管道操作符( | )的右边,用来调用内置管道 UppercasePipe,英雄的名字会显示成大写字母。

FormsModule 模块和双向绑定语法

为了编辑英雄的名字, 用户用户应该能在一个 <input> 输入框中编辑英雄的名字。

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

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

这需要调用 FormsModule 模块下的 ngModel 指令, 调用该指令之前需要添加FormsModule 模块,编辑 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'; // 调用 ngModle指令所需模块

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  //每个组件都必须声明在(且只能声明在)一个 NgModule 中。
  // Angular CLI 在生成 HeroesComponent 组件的时候就自动把它加到了 AppModule 中,并且导入了该组件
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  //  @NgModule 元数据的 imports 数组,这里是该应用所需外部模块的列表
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用ngModel 指令完成 html的 表单元素 <intpit> 和组件属性 hero.name 的双向绑定,heroes.component.html:

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>
  • [(ngModel)] 是 Angular 的双向数据绑定语法。
  • 当在输入表单组件中修改 内容时, hero.name 的属性是同步更新显示的.
  • 这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上,以便数据流可以双向流动:从 hero.name 属性流动到 textbox,并且从 textbox 流回到 hero.name 。

发表评论

电子邮件地址不会被公开。 必填项已用*标注