前端开发工程化是未来趋势，目前最火的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/

默认的效果如下图：

https://mmbiz.qpic.cn/mmbiz_png/DC4PhSqvZPvibuHQ5UnPIg1Sdb9OoUwYAvP9Fa1W0RvHIMAiaeKalKJ92B7ujQgAp6PB6vk8AK4dDYX95fficXAoA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1world" TITLE="angular从入门到...之hello world" />

生成的工程模板里，已有一个默认的app，这个就是根app。

我们打开src/app/components.ts，修改title的值，

export class AppComponent {

  title = '欢迎来到ailabx';

}

angular是自动更新的，即程序更改了，浏览器不需要我们自动刷新就会看到最新的效果。

http://mmbiz.qpic.cn/mmbiz_png/DC4PhSqvZPvibuHQ5UnPIg1Sdb9OoUwYA5g1YtSP2nx1uf0UTTwvpu1qJaZusFfibyia9nw8DetysUZgicibodTEjvQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1world" TITLE="angular从入门到...之hello world" />

然后我们修改样式看看，在src/app/conponents.css

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

可以看到，标题的字段，颜色都变化了。

http://mmbiz.qpic.cn/mmbiz_png/DC4PhSqvZPvibuHQ5UnPIg1Sdb9OoUwYAbXZETAQGqU4iaNM05JRr5u17aDyyRS4hWOgLMjTRibUdOhqlibClFzxdA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1world" TITLE="angular从入门到...之hello world" />

现在我们实现一个“英雄联盟”的简单例子。

appcomponent这个类的成员变量，title,hero的值

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

}

然后修改模板：

@Component({

  selector: 'app-root',

  //templateUrl: './app.component.html',

  template: `

{{title}}

{{hero}} details!

`,

  styleUrls: ['./app.component.css']

})

template: `

{{title}}

{{hero.name}} details!

`,

模板支持多行表示。

//注意：这里要写在component上方,英雄的类
export class Hero {

  id: number;

  name: string;

}

@component ...

export class AppComponent {

  title = 'Tour of Heroes';

  hero: Hero = {

      id:1,

      name:'wei'
  };

}

http://mmbiz.qpic.cn/mmbiz_png/DC4PhSqvZPvibuHQ5UnPIg1Sdb9OoUwYAO6hbENZ9zbLx1wG2icgy4ED8eDZNCRTkau9DrYbsNpnqD8gXDlIDeOA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1world" TITLE="angular从入门到...之hello world" />

要使用ngModel，还要额外在app.modules.ts里导入：

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

imports: [

  ...,

  FormsModule

],

 然后模板里使用如下ngModel指令即可实现name字段与文本框的双向绑定。

关于作者：魏佳斌，互联网产品/技术总监，北京大学光华管理学院（MBA）,特许金融分析师（CFA），资深产品经理/码农。偏爱python，深度关注互联网趋势，人工智能，AI金融量化。致力于使用最前沿的认知技术去理解这个复杂的世界。

扫描下方二维码，关注：AI量化实验室（ailabx），了解AI量化最前沿技术、资讯。

https://mmbiz.qpic.cn/mmbiz_jpg/DC4PhSqvZPuO1EPFETj9UbRickYnC3I7e4b1Oc0Fv2JtrXmyG6mfPLiaEoDO0XSm12JYY3knye83JfdausmhCWoQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1world" TITLE="angular从入门到...之hello world" />