angular從入門到...之hello world

前端開發工程化是將來趨勢，目前最火的3大框架分別是angular，vue 和 react。react不太熟悉，應該更多偏向app開發中native與js混合。而angular、vue更多以工程的形式實現先後端分離開發。

 

angular從2.0開始，實際上是一個新的實現，與1.0的angularjs沒有太多的關係。目前angular已升級到5.0版本，官網是https://angular.io/。

 

angular要求node 6.9.x 和 npm 3.x.x 以上的版本，以下幾步開始一個hello world的app。

1，全局安裝

npm install -g @angular/cli

2，建立一個新項目

ng new my-app

會自動建立項目，並自動npm install。這一點比vue就自動不少，vue的項目要手動npm install。

3，運行程序

cd my-app 

ng serve --open

編譯運行，會自動打開瀏覽器的4200端口：

http://localhost:4200/

默認的效果以下圖：

 

生成的工程模板裏，已有一個默認的app，這個就是根app。

咱們打開src/app/components.ts，修改title的值，

export class AppComponent {
  title = '歡迎來到ailabx';
}

angular是自動更新的，即程序更改了，瀏覽器不須要咱們自動刷新就會看到最新的效果。

而後咱們修改樣式看看，在src/app/conponents.css

h1 {  color: #369;  font-family: Arial, Helvetica, sans-serif;  font-size: 250%;}

能夠看到，標題的字段，顏色都變化了。

 

 

 

如今咱們實現一個「英雄聯盟」的簡單例子。

appcomponent這個類的成員變量，title,hero的值

export class AppComponent {  title = 'Tour of Heroes';  hero = 'Windstorm';

}

 

而後修改模板：

@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',
  template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`,
  styleUrls: ['./app.component.css']
})

template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`,

模板支持多行表示。

//注意：這裏要寫在component上方,英雄的類
export class Hero {
  id: number;
  name: string;
}
@component ...

export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
      id:1,
      name:'wei'
  };
}

要使用ngModel，還要額外在app.modules.ts裏導入：

import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here

imports: [
  ...,
  FormsModule
],

而後模板裏使用以下ngModel指令便可實現name字段與文本框的雙向綁定。
<input [(ngModel)]="hero.name" placeholder="name">

 

關於做者：魏佳斌，互聯網產品/技術總監，北京大學光華管理學院（MBA）,特許金融分析師（CFA），資深產品經理/碼農。偏心python，深度關注互聯網趨勢，人工智能，AI金融量化。致力於使用最前沿的認知技術去理解這個複雜的世界。

掃描下方二維碼，關注：AI量化實驗室（ailabx），瞭解AI量化最前沿技術、資訊。