1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { MenuComponent } from './menu.component'; import { WeatherComponent } from './weather/weather.component'; import { CurrencyComponent } from './currency/currency.component'; import { MovieComponent } from './movie/movie.component'; @NgModule({ declarations: [ AppComponent, MenuComponent, WeatherComponent, CurrencyComponent, MovieComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
1 2 3 4 5 6 7 8 9 | <div class="row"> <div class="col-xs-12"> <ul class="nav nav-pills"> <li routerLinkActive="active"> <a [routerLink]="['/weather']" >Weather</a></li> <li routerLinkActive="active"> <a [routerLink]="['/movie']" >Movie Details</a></li> <li routerLinkActive="active"> <a [routerLink]="['/currency']" >Currency Rates</a></li> </ul> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 | import { Routes, RouterModule } from '@angular/router'; import { CurrencyComponent } from "./currency/currency.component"; import { WeatherComponent } from "./weather/weather.component"; import { MovieComponent } from "./movie/movie.component"; const MAINMENU_ROUTES: Routes = [ //full : makes sure the path is absolute path { path: '', redirectTo: '/weather', pathMatch: 'full' }, { path: 'weather', component: WeatherComponent }, { path: 'movie', component: MovieComponent }, { path: 'currency', component: CurrencyComponent } ]; export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES); |
1 2 3 4 5 | <div class="container"> <app-menu></app-menu> <hr> <router-outlet></router-outlet> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { MenuComponent } from './menu.component'; import { WeatherComponent } from './weather/weather.component'; import { CurrencyComponent } from './currency/currency.component'; import { MovieComponent } from './movie/movie.component'; import { CONST_ROUTING } from './app.routing'; @NgModule({ declarations: [ AppComponent, MenuComponent, WeatherComponent, CurrencyComponent, MovieComponent ], imports: [ BrowserModule, FormsModule, HttpModule, CONST_ROUTING ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |