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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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下MYSQL limit的优化
2008/01/10 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
DWR Ext 加载数据
2009/03/22 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python实现下载指定网址所有图片的方法
2015/08/08 Python
python测试mysql写入性能完整实例
2018/01/18 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python binascii 进制转换实例
2019/06/12 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python设置环境变量的作用整理
2020/02/17 Python
个人课题方案
2014/05/08 职场文书
技能比武方案
2014/05/21 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
社区服务理念口号
2015/12/25 职场文书
竞聘书的秘诀
2019/04/02 职场文书