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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
简单了解前端渐进式框架VUE
Jul 20 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
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
JavaScript静态的动态
2006/09/18 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Python 求数组局部最大值的实例
2019/11/26 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
英文自荐信常用句子
2014/03/26 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
测量员岗位职责
2015/02/14 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android