首先还是先推荐学习angular2的学习网址 http://origin.angular.live/
一.Angular2的初识
Angular2是什么，它是一个现在比较火的前端框架。如何使用呢，就是还有把原来的html,css,js,只不过你得按他的意图(简单的说：模块化，组件化，模板化，一步一步组装。)组合写代码罢了。
angular2至于有什么好处。我也只能从 组件化的应用 开发看起来更易于团队协作，也有利于后期的维护 这方面进行论证。关于性能方面，由于本人只是初学，计算机各方面的基础也比较低，就不说了。
二.Angular2的模块化
模块化 就是一个文件， 组件化 就是一个带有装饰器的组件类，模板化 就是一个View视图，也就是写HTML。网页涉及到的DOM操作就是 用angualr模块里声明的指定、管道进行操作。
angular2的一个文件就是一个模块。形如
import { Component } from '@angualr/core'
@Component({
selector: 'html-tag', //就是自己定义的html的tag,<html-tag></html-tag>
template: ` //这里就是用<html-tag></html-tag>所能概括的所有HTML文件
<div>
<p>
<span><span>
<p>
</div>
`,
styles: []
})
export class HTMLTagComponent {
constructor(){} //初始化
}
三. Angular数据服务
关于angualr2的服务，就是取数据(当然还有别的方面，例如路由服务，这里我们做一般来讲)。我们页面的展示需要数据。数据还是存储在一个model层，service层就是取来数据进行一点简单的加工修饰后，再向外提供个 加工后数据的 访问接口。一些组件在获取数据时必须还得要个 提供商。提供商的声明可以在 自己的组件里 也可以在 父级组件里，还可以在 根模块里。
服务的实现，就是数据的取得。你最好放在 angular声明的一个 生命周期钩子 里。相应的组件类必须实现
export class HTMLTagComponent implements OnInit {
ngOnInit(): void { //这里写从服务中获取数据
}
}
四.Angular2 路由
1.全局的导航，大的方面
关于angular2的路由，就是单个页面间不同组件的导航。
我们可以先创建一个导航模块，记得要把这个模块写在app.module.ts 的imports里面。形如
import { } from ''; //此处省略导入的模块，组件
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'heroes', component: HeroesComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent }
]
@NgModule ({
imports: [ RouterModule.forRoot(routes)],
exports: [ RouterModule]
}）
export class AppRoutingModule {}
与上面不同一个文件 app.module.ts 文件里
@NgModule({
imports: [
AppRoutingModule
]
}）
然后在统一的背景组件里的模板里进行全局的设置
template: `
<a routerLink="/heroes">Heroes</a> // 点击我，链接到 "/heroes"路径下，我还需要一个可以 承载要显示的组件的东西，即下面的 router-outlet 标签
<router-outlet></router-outlet> //承载 链接的 要显示的 组件
2.局部导航，小的方面
再次需要导航的组件元数据里声明
@Component({
moduleId: module.id
})
(1).点击按钮进入链接
<button (click)="gotoDetail()">View Details</button>
在组件类里实现 "gotoDetail()"方法
gotoDetail(): void {
this.router.navigate(['/detail', this.hero.id]);
}
(2).a 标签点击 进入
<a [routerLink]="['/detail', hero.id]" ></a>
网友评论