angular从入门到...之hello world。

Posted 2021-04-26 AI量化实验室

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

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