zoukankan      html  css  js  c++  java
  • [Angular 2 Router] Configure Your First Angular 2 Route

    Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module.

    Use the Wiki Search as example project.

    Create a HomeComponent to contain every other components. Then in out app.component.html, we can just use router outlet to render the application:

    app.component.ts:

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: '<router-outlet></router-outlet>',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app works!';
    }

    app.routes.ts:

    import {HomeComponent} from "./home/home.component";
    import {RouterModule} from "@angular/router";
    const routes = [
      {path: '', component: HomeComponent}
    ];
    
    export default RouterModule.forRoot(routes);

    The defualt component is HomeComponent. Export this config to the app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import {HttpModule, JsonpModule} from '@angular/http';
    
    import { AppComponent } from './app.component';
    import { SearchBarComponent } from './home/search-bar/search-bar.component';
    import { ResultListComponent } from './home/result-list/result-list.component';
    import {SharedServiceModule} from "./home/shared/index";
    import {CommonModule} from "@angular/common";
    import {API_URL} from "./home/shared/constance.service";
    import { MdButtonModule } from '@angular2-material/button';
    import {MdInputModule} from "@angular2-material/input";
    import {MdListModule} from "@angular2-material/list";
    import {MdToolbarModule} from "@angular2-material/toolbar";
    import { HomeComponent } from './home/home.component';
    
    import appRoutes from './app.routes';
    
    @NgModule({
      declarations: [
        AppComponent,
        SearchBarComponent,
        ResultListComponent,
        HomeComponent
      ],
      imports: [
        MdButtonModule.forRoot(),
        MdInputModule.forRoot(),
        MdToolbarModule.forRoot(),
        MdListModule.forRoot(),
        appRoutes,
        BrowserModule,
        FormsModule,
        CommonModule,
        HttpModule,
        JsonpModule,
        SharedServiceModule.forRoot()
      ],
      providers: [
        {
          provide: API_URL,
          useValue: `https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK`
        }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Github

  • 相关阅读:
    HBuilder在线打包ipa步骤
    SWD烧录/仿真方式
    详解shell脚本括号区别--$()、$「 」、$「 」 、$(()) 、「 」 、「[ 」]
    Centos/Linux下调整分区大小(以home和根分区为例)
    Centos6.5安装中文支持和中文输入法
    如何用电路实现检测过零点?这个简单电路就能搞定
    ifconfig无输出的原因及解决办法
    Linux云服务器下Tomcat部署
    linux wget 命令用法详解(附实例说明)
    yum的repo文件详解、以及epel简介、yum源的更换
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5904813.html
Copyright © 2011-2022 走看看