网站首页 » 前端开发 » Angular 2+ » Angular 4.x 入门示例(Hero Editor)
上一篇:
下一篇:

Angular 4.x 入门示例(Hero Editor)

创建工程

按照下面的说明创建一个名为 angular-tour-of-heroes 的项目名。

结构如下:

Angular 2 入门示例(Hero Editor)

注:图片来自官网截图

启动应用服务

ng serve --open

上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。

声明 hero

在AppComponent中添加两个属性,一个是用于应用名的 title 属性,一个是用于英雄名的 hero 属性。

app.component.ts (AppComponent class)
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

AppComponent 修改完后,现在我们来修改下模板,由于我们的模板是独立的一个 .html 所以我们直接修改app.component.html 就可以了,内容如下:

<h1>{{title}}</h1>
<h2>{{hero}} details!</h2>

保存后,浏览器会自动刷新并显示最新的值。

双花括符是Angular 的插值绑定语法,这个插值语法就可把 title 和 hero 这两个属性的值作为一个字符串嵌入到HTML代码标签中了。

Hero 对象

hero 需要更多的属性。所以我们可以把 hero  字符串修改成一个 hero 类来使用。

创建一个含有 id 和 name 属性的 Hero 类。把这个Hero 类放到 app.component.ts 的最上方,import 引入声明语法的下方。

src/app/app.component.ts (Hero class)
export class Hero {
  id: number;
  name: string;
}

接着通过上面创建的 Hero 类,在 AppComponent 类中重构出一个  hero 属性,然后初始化 id 为1 ,name 为 Windstorm。

src/app/app.component.ts (hero property)
// 
hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

由于我们已经把 hero 字符串改成了一个对象,所以我们需要更新下模板中的调用方式。

src/app/app.component.ts

<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>

现在你就可以在浏览器中看到 hero 的 名字了。

下面我们用同样的方法在模板中把 hero 的属性都显示出来。

绑定多属性

app.component.html (AppComponent’s template)
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>

可编辑 hero 名字

用户需要在 input 输入框中对hero 名字进行编辑。这个输入框要能够有显示 hero 名字和实时更新名字,因此你就需要在 input 标签元素和 hero.name 之间作双向绑定。

你可以像下面这样在模板中重构 hero 名字

src/app/app.component.html

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

[(ngModel)] 这个就是用于双向绑定的 Angular 语法。不管你是在输入框中修改名字,还是在 app.component.ts 修改 hero.name 的属性值,hero.name 的值都会得到实时更新。

但不幸的是,当你保存后,应用中断了。如果你打开了浏览器的控制台(console),你就会看到:

报错

Angular complaining that “ngModel … isn’t a known property of input.”

虽然 ngModel 是一个有效的Angular 指令(directive),但它默认是不可用的。你必需显式地引入它。

Import the FormsModule

打开 app.module.ts 文件并且从 @angular/forms 库中引入 FormModule ,接着把 FormsModule 添加到源数据的 imports 数组中。修改完的 app.module.ts 文件如下:

app.module.ts (FormsModule import)
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

保存后,你就可以在浏览器中再次看到 hero 的详细内容了。此时你就可以在输入框中修改 hero 的名字。

DEMO 源码

下面就是这次 DEMO 的相关文件代码:

app.component.html
<h1>{{ title }}</h1>
<h2>{{ hero.name }} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>
app.component.ts
import { Component } from '@angular/core';

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

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

export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: "Windstorm"
  }
}
app.module.ts
// app.module.ts code
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

到这里一个可修改 hero 名字的 DEMO 就完成了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-tutorial-part1/

发表评论

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

评论 END