Angular2笔记1-helloWorld

Posted on   |   In   |  

学一下Angular2, 虽然不太喜欢
(大概看了下 感觉限制太多, 貌似也没比原生好使多少…)

Angular2自己的语法还是挺多的, 这篇弄了个最简单的hello world就得写不少东西…

node命令

先记俩node的命令:

1
tsc --watch

按目录下的tsconfig.json配置 把.ts编译成.js

1
npm run go

启动一个server

html里

1
2
3
4
<script>
    System.import('app.js').then(null, console.error.bind(console));
</script>
<hello-world></hello-world>

app.js里

1
2
3
4
5
6
7
8
9
10
11
12
13
//@Component注解会关联一个html组件
@Component({
  selector: 'hello-world',//按selector名比如去html里找名为<hello-world>的标签
  template: `<div>Hello {{ name }}</div>`
})
//每个Component注解带一个class
class HelloWorldWithName {
  name: string;
  constructor() {
    this.name = 'Felipe';
  }
}
bootstrap(HelloWorldWithName);
1
<hello-world-array></hello-world-array>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//*ngFor是angular的指令
//#name of names 或是 let name of names 做循环
@Component({
  selector: 'hello-world-array',
  template: `
  <ul>
    <li *ngFor="let #name of names">Hello {{ name }}</li>
  </ul>
`
})
class HelloWorldWithNames {
  names: string[];
  constructor() {
    this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
  }
}
bootstrap(HelloWorldWithNames);