zoukankan      html  css  js  c++  java
  • Angular2 Router

    1 import Router

    import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router';
    

    2 setting your RouteConfig

    @RouteConfig([
        {path: '/', component: List, as: 'list'},
        {path: '/about', component: Add, as: 'add'},
        {path: '/help', component: Help, as: 'help'}
    ])
    

    3 inject your router directives into view directives for the directive [router-link] and [router-outlet]

    @View({
        templateUrl: './app.html?v=<%= VERSION %>',
        directives: [RouterOutlet, RouterLink]
    })
    

    4 in the UI

    <section class="sample-app-content">
      <nav>
        <a [router-link]="['/list']">List</a>
        <a [router-link]="['/add']">Add</a>
        <a [router-link]="['/help']">Help</a>
      </nav>
      <router-outlet></router-outlet>
    </section>
    

      

    5 inject your router into app

    bootstrap(App, [routerInjectables, httpInjectables]);
    

    6 the whole page code including http demo(app.ts)

    /// <reference path="../typings/tsd.d.ts" />
    import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
    import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router';
    import {httpInjectables, Http} from 'angular2/http';
    import {Inject} from 'angular2/di';
    
    import {List} from './components/list/list';
    import {Add} from './components/add/add';
    
    import {Help} from './components/help/help';
    import {FriendList} from './services/FriendList';
    
    @Component({
        selector: 'app',
        viewInjector: [FriendList, httpInjectables]
    })
    @RouteConfig([
        {path: '/', component: List, as: 'list'},
        {path: '/about', component: Add, as: 'add'},
        {path: '/help', component: Help, as: 'help'}
    ])
    @View({
        templateUrl: './app.html?v=<%= VERSION %>',
        directives: [RouterOutlet, RouterLink]
    })
    class App {
        http:Http;
        status:int;
    
        constructor(@Inject(Http) http) {
            this.http = http;
    
            //this.http.request('data/test.json').observer(res => this.dataList = res.json());
            this.http.get('test.json').toRx().subscribe((res:Response) => {
                this.status = res.status;
            });
        }
    }
    
    
    bootstrap(App, [routerInjectables, httpInjectables]);
    

      

  • 相关阅读:
    jQuery.Ajax()执行WCF Service的方法
    呼叫WCF Service的方法出现Method not allowed异常
    ASP.NET MVC呼叫WCF Service的方法
    表格行与列mouse经过时高亮显示
    Git管理项目实例说明-记录和跟踪项目
    Maven私服Nexus3.x环境构建操作记录
    Nginx部署web缓存服务环境
    Mysql连接错误:Lost connection to Mysql server at 'waiting for initial communication packet'
    Linux下修改系统编码的操作记录
    web cache server方案比较:varnish、squid、nginx
  • 原文地址:https://www.cnblogs.com/lihaozhou/p/4671935.html
Copyright © 2011-2022 走看看