AngulaJS路由 ui-router 传参实例

前端之家收集整理的这篇文章主要介绍了AngulaJS路由 ui-router 传参实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

<Meta charset="utf-8"> <Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width"> 测试

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

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()

Meta charset="UTF-8">
hello world

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

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

Meta charset="UTF-8">
hello world2

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

项目目录

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/39634.html

猜你在找的JavaScript相关文章