Angular.js中angular-ui-router的簡(jiǎn)單實(shí)踐
開(kāi)始之前
一些說(shuō)明
- angular-ui-router的使用方法有很多，此文中，我們直接在控制器中使用，并完成一個(gè)簡(jiǎn)單的路由。
- 文中 Angular.js 的版本為 1.5.2
下載和安裝
直接通過(guò) bower 來(lái)安裝 angular-ui-router
使用 bower 安裝 angular-ui-router 之前，首先需要安裝 npm 和 bower 。npm 是node.js的包管理工具，下載安裝node.js，即可完成 npm 的安裝
通過(guò) npm 安裝 bower （如果未安裝 bower）：
npm install -g bower
安裝 angular-ui-router
bower install --save angular-ui-router
使用 angular-ui-router
首先要在 angular.module 方法中，注入 angular-ui-router
var app = angular.module('myApp',['ui.router']);
定義路由規(guī)則
app.config(function($stateProvider , $urlRouterProvider){
/**
* $stateProvider 提供的 state 方法包含兩個(gè)參數(shù)
* @param 路由名稱(chēng) String
* @param 路由規(guī)則 Object
* 此方法用來(lái)定義路由名稱(chēng)和規(guī)則
*/
$stateProvider.state('user' , {
url : "/user/:uid",
controller : 'MyCtrl'
});
// 將未定義的路由重定向
$urlRouterProvider.otherwise("/");
});
在控制器中使用
app.controller("MyCtrl" , function($scope , $state){
// 監(jiān)聽(tīng)路由變化
$scope.$on('$stateChangeSuccess' , function(){
var route_name = $state.current.name; // 獲取當(dāng)前路由名稱(chēng)
if(route_name === 'user'){
var uid = $state.params.uid // 獲取路由參數(shù)
console.log(uid);
}
});
// 主動(dòng)路由跳轉(zhuǎn)：路由名稱(chēng)，路由參數(shù)
$state.go('user' , {'uid' : 88} );
});
其他
在 html 中，用 <a> 標(biāo)簽指定路由的寫(xiě)法為:
<a href="#/user/88" rel="external nofollow" >Tom</a>
angular.js的路由，在瀏覽器url地址欄以這樣的形式展現(xiàn)：www.example.com/my/page#/user/88
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
angular寫(xiě)一個(gè)列表的選擇全選交互組件的示例
本篇文章主要介紹了angular寫(xiě)一個(gè)列表的選擇全選交互組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了Angular2 NgModule 模塊詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例，需要的朋友可以參考下2016-10-10
Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題
這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題,需要的朋友可以參考下2017-07-07
Angular2 PrimeNG分頁(yè)模塊學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了Angular2 PrimeNG分頁(yè)模塊學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家介紹了Angular?@Injectable注解的工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過(guò)本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧2017-07-07
詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Angular2學(xué)習(xí)筆記——詳解NgModule模塊
這篇文章主要介紹了Angular2學(xué)習(xí)筆記——詳解NgModule模塊,現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目如何升級(jí)至Angular6的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09