标签:第一个 bootstra 移除 引导 部分 ppm imp htm html
Angular没有了类似AngularJS中的<body ng-app="my-app">这样的引导指令了
通过显示调用 bootstrap
函数,并传入应用模块的名字( AppComponent
)来启动应用。
import { NgModule } from ‘@angular/core‘; import { BrowserModule } from ‘@angular/platform-browser‘; import { AppComponent } from ‘./app.component‘; @NgModule({ imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
}) export class AppModule { }
NgModule
是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
declarations
- 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。
exports
- declarations 的子集,可用于其它模块的组件模板。
imports
- 将js引入的素材模块或者组件模块等,进行angular模块化引用。
providers
- 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。
bootstrap
- 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap
属性。
<div [ngClass]="{active: isActive}"> // 例子1
<div [ngClass]="{active: isActive,
shazam: isImportant}"> // 例子2
<div [class.active]="isActive"> // 例子3
在第一个例子中,如果isActive
为真,则active
类被应用到那个元素上。
还可以同时指定多个类,例如第二个例子。
Angular还有类绑定,它是单独添加或移除一个类的好办法,就像第三个例子中展示的。
<button (click)="toggleImage()"> // 例子1
<button (click)="toggleImage($event)"> // 例子2
Angular中要使用事件绑定,把目标事件的名字放在圆括号中,并且使用等号右侧引号中的模板语句对它赋值。 然后Angular为这个目标时间设置事件处理器。当事件被触发时,这个处理器就会执行模板语句。
在第一个例子中,当用户点击此按钮时,相关组件中的toggleImage()
方法就被执行了。
第二个例子演示了如何传入$event
对象,它为组件提供了此事件的详情。
@Component({ selector: ‘movie-list‘, templateUrl: ‘./movie-list.component.html‘, styleUrls: [ ‘./movie-list.component.css‘ ], })
标签:第一个 bootstra 移除 引导 部分 ppm imp htm html
原文地址:http://www.cnblogs.com/mabylove/p/6916916.html