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 相关文章推荐
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
Element Dialog对话框的使用示例
Jul 26 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python 实现try重新执行
2019/12/21 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
python多线程和多进程关系详解
2020/12/14 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
安全教育心得体会
2013/12/29 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
投资建议书模板
2014/05/12 职场文书
工作收入证明模板
2014/10/10 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技