腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

使用Angular CLI生成路由的方法

更新時(shí)間：2018年03月24日 14:32:28 作者：草根專欄

這篇文章主要介紹了使用Angular CLI生成路由的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

第一篇文章是: "使用angular cli生成angular5項(xiàng)目" :http://m.fzitv.net/article/136621.htm

第二篇文章是: "使用angular cli從藍(lán)本生成代碼" :http://m.fzitv.net/article/137031.htm

我們知道使用 ng g module admin 將會(huì)生成admin module.

而使用 ng g m sales --routing 則將會(huì)生成sales和 sales-routing 兩個(gè)module.

sales-routing里面就是路由的信息, 并且它被import到了sales module 里面.

為應(yīng)用生成路由.

先創(chuàng)建一個(gè)項(xiàng)目:

ng new my-routing --routing

可以看到生成了兩個(gè)module.

看一下routing module:

再看一下app module:

已經(jīng)把AppRoutingModule import了進(jìn)來(lái).

再看一下app.component.html:

router-outlet已經(jīng)寫(xiě)上了. 很好.

下面再生成兩個(gè)components:

ng g c dashboard
ng g c order

然后在app-routing.module里面設(shè)置路由:

再修改一下html:

運(yùn)行一下應(yīng)用: ng serve -o

嗯. 沒(méi)問(wèn)題.

針對(duì)一個(gè)應(yīng)用里面有多個(gè)module的情況.

再生成一個(gè)module, 并且?guī)е酚蒻odule (可以先使用-d參數(shù)查看將要生成的文件):

ng g m admin --routing

在admin module里面, 再創(chuàng)建一個(gè)admin component:

ng g c admin
ng g c admin/email -m admin
ng g c admin/user -m admin

實(shí)際上后兩個(gè)命令的-m參數(shù)可以去掉, 因?yàn)橐呀?jīng)指定了路徑 admin/, 這樣默認(rèn)就會(huì)在 admin module里面進(jìn)行聲明而不是app module.

隨后需要修改app.module:

把a(bǔ)dmin module加入進(jìn)去.

然后修改admin.component.html, 加入router-outlet:

然后修改admin-routing.module.ts:

運(yùn)行: ng serve -o

直接輸入地址:http://localhost:4200/admin

可以看到:

而輸入網(wǎng)址:http://localhost:4200/admin/email

則會(huì)看到:

所以沒(méi)問(wèn)題.

生成Gurad.

ng g guard xxx

這個(gè)命令將會(huì)生成xxx.guard.ts

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular4集成ng2-file-upload的上傳組件
本篇文章主要介紹了Angular4集成ng2-file-upload的上傳組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Angular2下使用pdf插件的方法詳解
這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法，使用這個(gè)插件是要實(shí)現(xiàn)一個(gè)pdf顯示的功能，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
AngularJS基于MVC的復(fù)雜操作實(shí)例講解
下面小編就為大家分享一篇AngularJS基于MVC的復(fù)雜操作實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
淺談angular4實(shí)際項(xiàng)目搭建總結(jié)
本篇文章主要介紹了淺談angular4實(shí)際項(xiàng)目搭建總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
舉例講解AngularJS中的模塊
這篇文章主要介紹了AngularJS中的模塊,文中講到了其應(yīng)用模塊和控制器模塊的例子,需要的朋友可以參考下
2015-06-06
AngularJS constant和value區(qū)別詳解
angularJS可以通過(guò)constant(name,value)和value(name,value)對(duì)于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下
2017-02-02
AngularJS 文件上傳控件 ng-file-upload詳解
這篇文章主要介紹了AngularJS 文件上傳控件 ng-file-upload詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
AngularJS 防止頁(yè)面閃爍的方法
我們知道在應(yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這篇文章主要介紹了AngularJS 防止頁(yè)面閃爍的方法,需要的朋友可以參考下
2017-03-03
AngularJS ui-router (嵌套路由)實(shí)例
本篇文章主要介紹了AngularJS ui-router (嵌套路由)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03