最近有时间,学习一下angular2,根据自己的理解添加一些自己的理解,有什么不对的地方请指教,
学习的地址是https://angular.cn/
下边是分享一下我学习过程
angular2和angular1一样,都需要创建跟模块
angular1一般默认用app文件作为根模块的创建文件,创建方式如下
angular.module('app', [ 'ui.router' ])
中括号内部位自己引用的第三方的一些插件或者服务。
angular2也同样需要创建根模块,创建方式发生了一点变化,创建方式如下
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] })
前三行import部分是ts的语法,引入三方的类库,angular的类不再是同一引用,使用哪一部分,需要单独的引用该部分
和angular1不同,angular1的根模块必须有且有一个,但是angular2必须有一个或多个,是可以有多个的,angular2可以添加特性模块,
angular2的模块都是带有@NgModule修饰器的类
@NgModule是一个修饰器函数,接收五个参数
declarations:这个模块引用的视图类,分为三种组件/指令/管道
exports:declarations的子模块,可用于其它模块的组件模板
imports:这个是描述你的模块所引用其他类所在的模块
providers: 服务的创建者,加入到全局服务列表中,可用于应用任何部分。
bootstrap: 指定应用的称为根组件,它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
angular1的根模块是只需要直接引用js,angular会直接自动的启用,
angular2是需要我们自己配置启动的,启动一般都是放置在项目的main.ts文件中,启动方式如下
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);