Angular学习

介绍

Angular 可以帮助你为 Web、移动端或桌面构建现代应用程序。包含http等功能是框架，vue只能称为库。

Angular 架构

模块 NgModule
组件 @Component 装饰器表明紧随它的那个类是一个组件，并提供模板和该组件专属的元数据。
模板、指令和数据绑定
服务与依赖注入服务类的定义通常紧跟在 “@Injectable()” 装饰器之后。
路由

安装

npm install -g @angular/cli
ng new my-app
ng serve --open

模块 NgModule

NgModule 为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件，并在引导期间创建它。
app.module.ts,根模块

@NgModule({
  declarations: [ // （可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。
    AppComponent,
    HeroesComponent,
    HeroDetailComponent,
    DashboardComponent
  ],
  imports: [ // （导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。
    BrowserModule,
    FormsModule,
    AppRoutingModule //  Angular 指令用的 例如([ngModule])
  ],
  providers: [], // —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
  exports: [AppComponent], // （导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
  bootstrap: [AppComponent] // —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
})
export class AppModule {
}

Angular 组件

@Component({
  selector: 'app-root', // 用于定义组件在HTML代码中匹配的标签
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:  [ HeroService ] // 当前组件所需的服务提供商的一个数组。
})
export class AppComponent {
  title = 'firstNg';
  address = {
    city: 'aaaaa',
    province: '福建'
  };
}

模板语法

<ul> 
<li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li>
</ul> 
<app-hero-detail *ngIf [hero]="selectedHero"></app-hero-detail>
<input ([ngModel])="hero.name">

这个模板使用了典型的 HTML 元素，比如 <h2> 和 <p>，还包括一些 Angular 的模板语法元素，如 *ngFor，{{hero.name}}，(click)、[hero] 和 <app-hero-detail>。

数据绑定

从组件到 DOM:{{hero.name}},[hero]="selectedHero"
从 DOM 到组件:(click)="selectHero(hero)"
双向:([ngModel])="hero.name"