码迷,mamicode.com
首页 > 其他好文 > 详细

angular - 使用es6等一些功能

时间:2018-06-01 22:16:16      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:img   user   code   import   cto   one   ppc   admin   cli   

app.module.ts

技术分享图片
 1 var model = {
 2   user: ‘Admin‘,
 3   items: [{
 4     action: ‘buy flowsers‘, done: false
 5   },{
 6     action: ‘get shoes‘, done: false
 7   },{
 8     action: ‘collect tickets‘, done: true
 9   },{
10     action: ‘call joe‘, done: false
11   }]
12 }
13 
14 
15 export class Model{
16   user;
17   items;
18   constructor(){
19     this.user=‘admin‘,
20     this.items=[
21       new TodoItem("buy1",false),
22       new TodoItem("buy2",false),
23       new TodoItem("buy3",false),
24       new TodoItem("buy4",false)
25     ]
26   }
27 }
28 
29 export class TodoItem{
30   action;
31   done;
32   constructor(action,done){
33     this.action = action;
34     this.done=done;
35   }
36 }
View Code

技术分享图片

 

新关键字(牵扯到es6 - typeScript):

export -> es6

class -> es6

constructor -> es6

 

app.component.ts

 

技术分享图片
 1 import { Component } from ‘@angular/core‘;
 2 import { Model } from ‘./app.module‘;
 3 
 4 @Component({
 5   selector: ‘app-root‘,
 6   templateUrl: ‘./app.component.html‘,
 7   styleUrls: [‘./app.component.css‘]
 8 })
 9 export class AppComponent {
10   model = new Model();
11   getName(){
12     return this.model.user;
13   }
14   title = ‘app‘;
15 }
View Code

 

技术分享图片

 

 

页面 - > app.component.html

技术分享图片

 

新写法: {{value}} -> 数据绑定

angular - 使用es6等一些功能

标签:img   user   code   import   cto   one   ppc   admin   cli   

原文地址:https://www.cnblogs.com/cisum/p/9123493.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!