文档章节

angular2中的Module和Routes

newbear
 newbear
发布于 2017/03/03 21:15
字数 590
阅读 212
收藏 0

CLI tool for Angular

https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services

感谢angular-cli ,  以前我都是自己来回cp文件的

如果无法安装成功,请淘宝 梅林固件 , 来解决翻墙问题

创建和运行

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

指定IP和端口

ng serve --host 0.0.0.0 --port 4201

项目快速构造的命令

基本用法如下

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

 初始话项目结构

 
 //创建两个module
 ng g module home
 
 ng g m admin //m  是module的简写,其它也是类似的

//在分别创建两个Component
 ng g c home/main    
 ng g c home/persons

 ng g c admin/login
 ng g c admin/main

一个是前台,一个是后台,前台有个首页和个人中心,后台有个登陆界面和首页

再次感谢angular-cli,可以看到app下的两个*.module.ts文件中自动写入了新加的component

但是这个时候看是没有变化的,页面还是那个app works!

整个项目中现在有三个module.ts文件

下面要用Routes,有三点比较重要

1 在文件app.component.html添加

<router-outlet></router-outlet>

2

/app/app.module.ts  注意加载appRoutes用的是forRoot

import { HomeModule } from './home/home.module';
import { AdminModule } from './admin/admin.module';

import { appRoutes } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    RouterModule.forRoot(appRoutes),
    AdminModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



/app/app.routes.ts  注意这里是loadChildren来加载module

export const appRoutes=[

    {
        path:'home',
        loadChildren:'./home/home.module#HomeModule'
    },

    {
        path:'admin',
        loadChildren:'./admin/admin.module#AdminModule'
    }
]



/app/home/home.module.ts  注意这里是注意加载homeRoutes用的是forChild

import { homeRoutes } from './home.routes';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component';
import { PersonsComponent } from './persons/persons.component';
import { RouterModule } from '@angular/router';
@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    RouterModule.forChild(homeRoutes)
  ],
  declarations: [MainComponent, PersonsComponent]
})
export class HomeModule { }

/app/home/home.routes.ts  注意这里是component来加载Component

import { MainComponent } from './main/main.component';
import { PersonsComponent } from './persons/persons.component';

export const homeRoutes=[
    {
        path:'main',
        component:MainComponent
    },

    {
        path:'persons',
        component:PersonsComponent
    }
]

admin部分和home相似

到这里之后可以修改url访问看看了,

http://localhost:4200/home/main

http://localhost:4200/home/persons

 

代码

https://git.oschina.net/TimeIsGoOn/angular2-learn/tree/ng-Module-routes/

相关资料

angular.cn 路由相关  https://angular.cn/docs/ts/latest/guide/router.html

大漠老师的教程:http://www.jianshu.com/p/9af9f203e0b1

简书上的教程:https://my.oschina.net/mumu/blog/834254

© 著作权归作者所有

共有 人打赏支持
newbear
粉丝 1
博文 10
码字总数 4138
作品 0
石景山
私信 提问
Angular 5.0.0 beta.1 和 4.3.2 发布,Web 前端框架

Angular 5.0.0 beta.1 和 4.3.2 已发布,Angular 5.0.0 beta.1 是 Angular 5 的第二个 beta 版本,正式版预计 9-10 月发布。 Angular 5.0.0 beta.1 更新内容: Bug 修复 animations: export...

王练
2017/07/29
1K
6
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
0
0
谷歌发布 AngularJS 1.0,允许扩展HTML语法

谷歌今天发布了一个全新的Web模板——AngularJS 1.0。 谷歌称, AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言。AngularJS...

oschina
2012/06/15
3.9K
8
angular-async-loader 1.3.0 发布

angular-async-loader 是一个为 angular.js 1.x 应用添加异步加载module/controller/services/filters/directive等模块功能组件。 2016-05-20 angular-async-loader 1.3.0 发布 增加 app.us......

Sub
2016/05/20
856
0
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen
2018/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 静态IP、DNS、主机名配置

linux 静态IP、DNS、主机名配置 一、IP配置 进入网络配置文件目录 cd  /etc/sysconfig/network-scripts/ 列出当前目录下文件名 ll 编辑配置文件 注意:ifcfg-eth0是我电脑的一个网卡标识...

小儿
25分钟前
4
0
配置vagrant使用三种网络

使用vagrant安装之后一直使用127.0.0.1进行访问。但是一直使用这个ip肯定满足不了的。我们装肯定是有需求的,那么本节就讲解一下用vagrant的网络配置。 vagrant中一共提供了三种网络配置。 ...

echojson
26分钟前
0
0
重磅发布:阿里开源 OpenJDK 长期支持版本 Alibaba Dragonwell

3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell。作为 Java 全球管理组织 Java Community Process (JCP) 的最高执行委员会的唯一中国代表,以...

阿里云官方博客
26分钟前
1
0
重磅发布:阿里开源 OpenJDK 长期支持版本 Alibaba Dragonwell

3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell。作为 Java 全球管理组织 Java Community Process (JCP) 的最高执行委员会的唯一中国代表,以...

阿里云云栖社区
32分钟前
2
0
OAuth2实现单点登录SSO

1. 前言 技术这东西吧,看别人写的好像很简单似的,到自己去写的时候就各种问题,“一看就会,一做就错”。网上关于实现SSO的文章一大堆,但是当你真的照着写的时候就会发现根本不是那么回事...

java菜分享
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部