[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 { }
[Angular 2 Router] Configure Your First Angular 2 Route的更多相关文章
- [Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?
In this tutorial we are going to learn how we can can configure redirects in the angular 2 router co ...
- angular当router使用userhash:false时路由404问题
angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- 【Angular专题】——(1)Angular,孤傲的变革者
目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
- [Angular2 Router] Use Params from Angular 2 Routes Inside of Components
Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
随机推荐
- cocos2d-x CCEditBox 字符不能显示完全的bug
cocos2d-x CCEditBox 字符不能显示完全的bug (cocos2dx版本 2.2.0)用CCEditBox制作帐号输入框,当输入的内容超过框的宽度时,框里面不会显示当前输入的字符,显示 ...
- php获取上传多个文件缺失
我们的一个页面编辑发布后台出现了图片无法上传保存的情况,经过调试对比发现,原来是file表单数量过多导致,减少file表单的数量即可上传成功.为了满足需求不减少file表单数并保证上传成功,于是更改了 ...
- python的元组和列表使用之一
Python的列表和元组 1. 概述 列表是用方括号[]包围的数据集合,不同的成员之间用逗号进行分隔,列表可以通过序号来进行访问其中的成员,可以对列表进行排序.添加.删除操作,改变列表中某 ...
- 面试体验:Facebook 篇(转)
http://www.cnblogs.com/cathsfz/archive/2012/11/05/facebook-interview-experience.html 2012-11-05 08:2 ...
- NServiceBus-架构的原则
自主性和松散耦合在设计时和运行时都是没有的事,任何技术都可以给你. 面向服务的架构(SOA)和事件驱动的体系结构提供了依据识别使用nservicebus. 战略领域驱动设计有助于弥合业务/IT鸿沟和驱 ...
- 桶排序-OC
NSArray * b = @[@,@,@,@,@]; NSMutableArray *a = @[].mutableCopy; ; i<; i++) { a[i] = @; } for (NS ...
- CSRF简单介绍及利用方法-跨站请求伪造
0x00 简要介绍 CSRF(Cross-site request forgery)跨站请求伪造,由于目标站无token/referer限制,导致攻击者可以用户的身份完成操作达到各种目的.根据HTTP ...
- Ngix 移动端与Pc端 反向代理判断
如神马搜索和百度(http://www.baidu.com),当用桌面浏览器和移动浏览器访问的结果是不一样的.其中的手段可能有两种: 转载Ngix反向代理判断 服务端直接判断UA输出不同的界面,JAV ...
- 转自 处理老版PIL 到 pillow
帮新同事部署开发环境, 由于项目代码里用到了PIL库处理图片, 导致一些图片在浏览器中无法正常显示. 几番折腾, 解决了问题, 这里记录一下报的问题, 及解决方法: 1. python版本不对, 6 ...
- Axis2在Web项目中整合Spring
一.说明: 上一篇说了Axis2与Web项目的整合(详情 :Axis2与Web项目整合)过程,如果说在Web项目中使用了Spring框架,那么又改如何进行Axis2相关的配置操作呢? 二.Axis2 ...