前端开发工程化是未来趋势,目前最火的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金融量化。致力于使用最前沿的认知技术去理解这个复杂的世界。
联系客服