app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core'; import {AppComponent} from './app.component';
import {NavBarComponent} from './nav-bar/nav-bar.component';
import {FooterComponent} from './footer/footer.component';
import {SearchComponent} from './search/search.component';
import {ProductComponent} from './product/product.component';
import {CarouselComponent} from './carousel/carousel.component';
import {StarsComponent} from './stars/stars.component';
import {HomeComponent} from './home/home.component';
import {RouterModule, Routes} from '@angular/router';
import {Code404Component} from './code404/code404.component';
import { LoginComponent } from './login/login.component'; const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'login', component: LoginComponent},
{path: '**', component: Code404Component}
]; @NgModule({
declarations: [
AppComponent,
NavBarComponent,
FooterComponent,
SearchComponent,
ProductComponent,
CarouselComponent,
StarsComponent,
HomeComponent,
Code404Component,
LoginComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

app-nav-bar.component.heml update

<li><a routerLink="/home">首页</a></li>
      <ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a routerLink="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>

login.component.html

<div class="container">
<div class="main-box col-md-6 col-md-offset-3"> <div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Login</div>
</div> <div style="padding:30px" class="panel-body">
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form class="form-horizontal" role="form">
<label style="padding-bottom:10px" class="control-label">UserName</label>
<div style="margin-bottom: 15px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="username" placeholder="username or email">
</div>
<label style="padding-bottom:10px" class="control-label">Password</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" name="password" placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-success">Login</a>
</div>
</div>
</form>
</div>
</div> </div>
</div>

home.component.html

<div class="container">
<div class="row">
<div class="col-md-3">
<app-search></app-search>
</div>
<div class="col-md-9">
<div class="row">
<app-carousel></app-carousel>
</div>
<div class="row">
<app-product></app-product>
</div>
</div>
</div>
</div>

update app.component.html

<app-nav-bar></app-nav-bar>

<router-outlet></router-outlet>

<app-footer></app-footer>

@angular/cli项目构建--路由1的更多相关文章

  1. @angular/cli项目构建--路由3

    路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...

  2. @angular/cli项目构建--路由2

    app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...

  3. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  4. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  5. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  6. @angular/cli项目构建--animations

    使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...

  7. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  8. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

  9. @angular/cli项目构建--Dynamic.Form(2)

    form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...

随机推荐

  1. 常用mongo语句

    只列出指定字段db.getCollection('PUBLICACCOUNTS').find({},{NickName:1,UserName:1,FID:1,_id:0})获取微信公众号列表db.ge ...

  2. 剑指offer 面试6题

    面试6题: 题目:从尾到头打印链表 输入一个链表,从尾到头打印链表每个节点的值. 解题代码: # -*- coding:utf-8 -*- # class ListNode: # def __init ...

  3. Java技术相关

    1.System.getProperty("user.dir") References:API

  4. 2015.7.7——跌停板做T,就算要搏跌停反弹也要看卖一档压力啊

    1.今天中色股份和以往不同买卖盘为正!————今天要重新观察这种新常态下的盘面运作 是否会出现如2015.7.6中描述的“前期错过了皮城中的黄金买点,...其实只要买卖盘为负,后期还会有再次尝试该低点 ...

  5. Python基础(18)_面向对象程序设计2(反射、__str__、__del__、__item__系列)

    一 isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object) ...

  6. Android:日常学习笔记(6)——探究活动(3)

    Android:日常学习笔记(6)——探究活动(3) 活动的生命周期 返回栈 Android中的活动是可以叠加的,我们每启动一个新活动,就会覆盖在原来的活动上,点击Back以后销毁最上面的活动,下面的 ...

  7. redis操作封装整理

    <?php /** * redis操作类 * 说明,任何为false的串,存在redis中都是空串. * 只有在key不存在时,才会返回false. * 这点可用于防止缓存穿透 * */ cla ...

  8. 80211n标准建链速率计算

    转:https://wenku.baidu.com/view/93f99dd3ad51f01dc281f1af.html 转:http://www.docin.com/p-1851128644.htm ...

  9. 苹果终端wifi图标点亮慢和portal弹窗机制分析以及处理办法和建议

    转:http://kms.h3c.com/View.aspx?id=52875 问题现象 在无线环境中经常碰到苹果终端连接无线后wifi图标无法点亮导致终端无法上网.在起portal的网络中认证页面无 ...

  10. 蓝牙固件升级(OTA升级)原理设计

    转:http://blog.csdn.net/yueqian_scut/article/details/50849033 固件空中升级(OTA)与固件二次引导的原理和设计 原创 2016年03月10日 ...