好资源导航 » 文章资讯 » AngulaJS路由 ui-router 传参实例

AngulaJS路由 ui-router 传参实例

2024-02-24 20:49:03 51

在这里分享我做的一个使用ui-router传参的小demo

1.首先第一步设置入口文件index.html，注意加载的顺序，先加载包，再加载自己写的控制器。







测试

2.app.js文件，依赖注入，设置路由，此处的路由是使用ui-router路由，这里简单的演示了两个模板之间的传参，传递参数的模板test.html和接收参数的模板result.html

varrouterApp=angular.module('routerApp',['ui.router']);

routerApp.run(function($rootScope,$state,$stateParams){
$rootScope.$state=$state;
$rootScope.$stateParams=$stateParams;
});

routerApp.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index',{//模板的参数
url:'/index',//url的参数
templateUrl:'templates/test.html',//模板的位置
controller:'MyController'
})
.state('result',{
url:'/result/:id/:number',//需要传的参数的键名
templateUrl:'templates/result.html',
controller:'resultCtrl'
});
});

3.第一个主页面的模板test.html,并且设置点击事件toResult()


helloworld

4.test.html的控制器indexCtrl.js，设置需要传递的参数$scope.abc和$scope.toResult，点击事件toResult()里面其实就是一个$state.go('模板的参数',{app.js里面需要传的参数的键名:需要传的参数值})的方法

routerApp.controller('MyController',function($scope,$state){
$scope.abc="nice";//需要传的参数值
$scope.def=10;//需要传的参数值
$scope.toResult=function(){
$state.go('result',{id:$scope.abc,number:$scope.def});
}
});

5.接收参数的模板result.html


helloworld2

6.result.html的控制器resultCtrl.js，这里使用$stateParams的方法去接收上一个页面传递过来的参数

routerApp.controller('resultCtrl',function($scope,$state,$stateParams){
varid=$stateParams.id;
varnumber=$stateParams.number;
console.log(id);
console.log(number);
});

项目目录

js\app.js、indexCtrl.js、resultCtrl.js

lib\
jquery\jquery-1.11.3.min.js
angular\angular.js
angular-ui\angular-ui-router.js

templates\test.html、result.html

index.html

其实整个过程并不难，只是穿插在模板和控制器之间，容易让人摸不着头脑，只要分清楚具体的参数是对应哪一个，很容易理解。

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

返回顶部
514930285
czq8825@qq.com

AngulaJS路由 ui-router 传参实例

热门推荐

随机推荐