你的位置:首页 > 软件开发 > Java > Angular2快速入门

Angular2快速入门

发布时间:2017-11-23 08:59:33
背景:我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component,例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息,在详细信息中可以修改新闻标题。 第一、创建新闻Component(视图组件) 接着上篇文章, ...

Angular2快速入门

背景:我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component,例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息,在详细信息中可以修改新闻标题。 

第一、创建新闻Component(视图组件)

 接着上篇文章,我们在app文件下创建news文件夹,在news文件夹下我们需要创建一个新闻的实体类1)news.ts
export class News{ id:number; title:string; create_date:string; click:number; }

接着我们创建一个模拟新闻列表的类

2)mock-news.ts

import {News} from './news';export const NewList: News[] = [ { id: 1, title: '十九大最新報道', create_date: '2017-11-10', click: 10 }, { id: 2, title: '西二旗地铁空车', create_date: '2017-10-10', click: 11 }, { id: 3, title: '日本有开始找事了', create_date: '2017-11-12', click: 12 }]

准备好上面的工作,我们真正需要创建component了,

3)创建newslist.component.ts

import { Component } from '@angular/core';import { News } from './news';import { NewList } from './mock-news';@Component({ selector:'news', templateUrl:'./newslist.component.html', styleUrls:['./newslist.component.css']})export class NewsListComponent{ newlist = NewList; }

4)创建 newslist.component.html

<h2>新闻列表</h2><ul > <li *ngFor="let n of newlist" >  {{n.id}}.{{n.title}} <span>{{n.create_date}}</span>   </li></ul>

5)创建newslist.component.css

*{margin: 0px; padding: 0;}.ul_news{list-style: none; margin-bottom: 10px; }.ul_news li { width: 300px; height: 30px; line-height: 30px; text-align: left; padding:5px; border-bottom: 1px dashed #ccc;cursor:pointer;}.ul_news li:hover{background:blanchedalmond;}.ul_news li span{float:right;}

至此,我们已经创建完成,目录结果如下图,此时运行npm start 并不能看到我们的新闻列表

Angular2快速入门

第二、集成到app.module上

想在运行时预览需要把我们的NewListComponent 装载到 app.module.ts中,因为他是根模块,启动从这里开始

具体调整入下

app.component.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { NewsListComponent } from './news/newslist.component';import { AppComponent } from './app.component';@NgModule({ declarations: [ AppComponent, NewsListComponent  ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { }

可以看到,我们增加了NewsListComponent ,同时在NgModule的declarations中加入NewsListComponent

另外在app.component.html增加上我们的新视图标签 news

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

  

在命令行中 运行npm start ,运行结果如下

Angular2快速入门

第三、增加新闻明细

我们想在用户点击新闻列表的时候下面展示新闻的详细信息,该如何操作那

1)修改 newslist.component.ts

import { Component } from '@angular/core';import { News } from './news';import { NewList } from './mock-news';@Component({ selector:'news', templateUrl:'./newslist.component.html', styleUrls:['./newslist.component.css']})export class NewsListComponent{ newlist = NewList; selectedNew:News; onSelected(n:News):void{  this.selectedNew=n;    }}

增加属性selectedNew 和事件 onSelected 方法。

同时记得在newlist.component.html 的新闻项上增加

 

<li *ngFor="let n of newlist" (click)="onSelected(n)" >

 

2)修改newlist.component.html

在后面追加代码

<div *ngIf="selectedNew"> <h3>新闻详细</h3> <table>  <tr>   <td>id:</td>   <td> {{selectedNew.id}}</td>  </tr>  <tr>   <td>title:</td>   <td>    <input [(ngModel)]="selectedNew.title" placeholder="title" />   </td>  </tr> </table></div>

  此时要注意,[(ngModel)] 是Angular的双向绑定(先会用,以后再慢慢了解其中的原理),需要在app.module.ts中引入FormsModule ,否则页面会报错。

 3)再次运行 npm start 可以看到如下结果

Angular2快速入门

第四、总结

1.熟悉Component的创建,注意装饰器的写法@Component 中的标签,另外templateUrl,可以自己使用 template:,通常简单的时候可以直接使用

2.熟悉指令*ngFor,*ngIF,(click)的绑定,双向绑定[(ngModle)] 的用法

3.了解NgModule 和Component的关系,一个app的根模块通常都是app.module.ts

 

 

 

 

 

原标题:Angular2快速入门

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录