AngulaJS路由 ui-router 传参实例


Posted in Javascript onApril 28, 2017

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

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

<!doctype html>
<html lang="en" ng-app="routerApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>测试</title>
  <!--lib是angular包的文件夹-->
  <script src="lib/jquery/jquery-1.11.3.min.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-ui/angular-ui-router.js"></script>
  <!--js控制器的文件夹-->
  <script src="js/app.js"></script>
  <script src="js/indexCtrl.js"></script>
  <script src="js/resultCtrl.js"></script>
</head>

<body>

<div ui-view>

</div>

</body>

</html>

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

var routerApp = 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()

<meta charset="UTF-8">
<div>hello world</div>
<input type="button" ng-click="toResult()" value="toResult">

 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

<meta charset="UTF-8">
<div>hello world2</div>

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

routerApp.controller('resultCtrl', function($scope, $state, $stateParams) {
  var id = $stateParams.id;
  var number = $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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
js下弹出窗口的变通
Apr 18 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
React学习笔记之高阶组件应用
Jun 02 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 #Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 #Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 #Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
Three.js的使用及绘制基础3D图形详解
Apr 27 #Javascript
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 #Javascript
You might like
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
分页栏的web标准实现
2011/11/01 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
VsCode里的Vue模板的实现
2020/08/12 Javascript
python中的随机函数小结
2018/01/27 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python高阶爬虫实战分析
2018/07/29 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
春节请假条
2014/04/11 职场文书
面试感谢信范文
2015/01/22 职场文书
雨花台导游词
2015/02/06 职场文书
实习介绍信范文
2015/05/05 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js