Angular文档梳理

养猫小能手
202 阅读3分钟

angular中根模块文件构造大致如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { OneService } from './cart.service';
@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ],
  providers: [OneService]
})
export class AppModule { }

Angular 应用都有根模块（NgModule 类），一般命名为 AppModule，在app.module.ts 的文件中。用来启动angular应用。

  • import —— 从外部模块中导入该模块中的组件模板所需的类。
  • export —— 将本模块中导出到其它模块的组件模板中使用的可声明对象的子集。
  • declarations —— 声明属于本 NgModule 的组件、指令、管道。
  • bootstrap —— 根组件（AppComponent），作为应用的主视图，是一个应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
  • providers —— 该模块向全局服务中提供的服务创建器。 这些服务能被本应用中的任何部分使用。 可以看到上诉文件中每个 Angular 库的名称都带有 @angular 前缀。 使用 npm 可安装 Angular 的库，并import 导入所需库并加入 @NgModule 元数据的 imports 中。
@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

组件结构

@Component 装饰器将一个普通类变成了组件，以此告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图，其中配置项有

  • selector：是一个 CSS 选择器，用于选中该组件
  • templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址，定义了该组件的页面显示。
  • providers：当前组件所需的服务。

语法

<li>{{hero.name}}</li>
<hero-detail [hero]="hero"></hero-detail>
<input [(ngModel)]="hero.name">
<li (click)="select(hero)"></li>
  • 插值： {{hero.name}} 在组件中显示hero.name 属性的值。
  • [hero]属性绑定把父组件 HeroListComponent 的 selectedHero 的值传到子组件 HeroDetailComponent 的 hero 属性中。（相当于Vue的v-bind指令）
  • 当用户点击某个英雄的名字时，(click) 事件绑定会调用组件的 selectHero 方法。（相当于Vue的v-on指令）
  • ngModel：双向数据绑定（相当于Vue的v-model指令）

管道

@Pipe操作符 (|)

 <p>Today is {{today | date}}</p>
 <p>The time is {{today | date:'shortTime'}}</p>

@Pipe 装饰器的类中会定义一个转换函数，用来把输入值转换成特定的输出值。管道操作符

指令

带有 @Directive() 装饰器的类，分为结构型指令和属性型指令

结构型指令

image.png 例如

  • 迭代器*ngFor，对heroes进行迭代
  • 条件语句*ngIf，当满足一定条件时，才会进行显示。 属性型指令

属性型指令有ngModel，进行双向数据绑定。 ngModel 修改现有元素设置绑定元素的属性值，并响应 change 事件。 在这里插入图片描述

服务

服务命名为xxx.servie.ts,在服务文件中导出一个类供全局文件进行使用，服务之间可以相互依赖引用

export class log{
log(msg:string){
    console.log(msg}
}
warn(msg:string){
    console.warn(msg}
}

使用服务

使用服务需将服务进行注册，注册服务的方法有三种

  • 默认情况下，在Angular CLI 中输入 ng generate service 命令会在 @Injectable() 装饰器中将其注册到根注入器。
@Injectable({
  providedIn: 'root',
})
  • 在特定的模块注册时，该模块中的所有组件可使用该服务
@NgModule({
  providers: [
   log，
   ...
 ],
})
  • 在组件级注册时，该组件的每一个实例都能使用注册的服务。
@Component({
  selector: 'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ logService ]
})

依赖注入

用 @Injectable() 装饰器提供元数据，以便让服务作为依赖注入到组件中。 在组件中，angular会通过查看组件的构造函数，来决定该组件依赖于哪些服务。故使用服务时需要在constructor中进行声明

avatar
文章
阅读
粉丝