前端开发工程化是未来趋势,目前最火的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量化最前沿技术、资讯。