Angular2 初入漫谈大杂烩

首先还是先推荐学习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,
                template: `      //这里就是用所能概括的所有HTML文件
                             

                               

                                 
                              

                           
                    `,
                 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: `
       Heroes  //  点击我，链接到 "/heroes"路径下，我还需要一个可以   承载要显示的组件的东西，即下面的 router-outlet 标签
         //承载 链接的 要显示的 组件

2.局部导航，小的方面

再次需要导航的组件元数据里声明

    @Component({
      moduleId: module.id
     })

(1).点击按钮进入链接

         View Details

在组件类里实现 "gotoDetail()"方法

            gotoDetail(): void {
               this.router.navigate(['/detail', this.hero.id]);
           }

(2).a 标签点击 进入