DDR爱好者之家

AngulaJS路由 ui-router 传参实例
站长资源 2024/11/27 佚名
27 1538
DDR爱好者之家 Design By 杰米

在这里分享我做的一个使用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="/UploadFiles/2021-04-02/jquery-1.11.3.min.js">


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


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




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米