微客导航 » 文章资讯 » Angular.js中angular-ui-router的简单实践

Angular.js中angular-ui-router的简单实践

2024-01-27 05:20:07 280

开始之前

一些说明

angular-ui-router的使用方法有很多，此文中，我们直接在控制器中使用，并完成一个简单的路由。
文中Angular.js的版本为1.5.2

下载和安装

直接通过bower来安装angular-ui-router

使用bower安装angular-ui-router之前，首先需要安装npm和bower。npm是node.js的包管理工具，下载安装node.js，即可完成npm的安装

通过npm安装bower（如果未安装bower）：

npminstall-gbower

安装angular-ui-router

bowerinstall--saveangular-ui-router

使用angular-ui-router

首先要在angular.module方法中，注入angular-ui-router

varapp=angular.module('myApp',['ui.router']);

定义路由规则

app.config(function($stateProvider,$urlRouterProvider){

/**
*$stateProvider提供的state方法包含两个参数
*@param路由名称String
*@param路由规则Object
*此方法用来定义路由名称和规则
*/
$stateProvider.state('user',{
url:"/user/:uid",
controller:'MyCtrl'
});

//将未定义的路由重定向
$urlRouterProvider.otherwise("/");
});

在控制器中使用

app.controller("MyCtrl",function($scope,$state){
//监听路由变化
$scope.$on('$stateChangeSuccess',function(){
varroute_name=$state.current.name;//获取当前路由名称
if(route_name==='user'){
varuid=$state.params.uid//获取路由参数
console.log(uid);
}
});

//主动路由跳转：路由名称，路由参数
$state.go('user',{'uid':88});
});

其他

在html中，用标签指定路由的写法为:

Tom

angular.js的路由，在浏览器url地址栏以这样的形式展现：www.example.com/my/page#/user/88

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Angular.js中angular-ui-router的简单实践

热门推荐

随机推荐