SoFunction
Updated on 2025-04-04

AngularJS routing ui-router parameter transfer example

Here I've made a small demo that uses ui-router to transfer parameters

1. First, the first step is to set the entry file, pay attention to the loading order, first load the package, and then load the controller you wrote.

<!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>test</title>
  <!--libyesangularPackage folder-->
  <script src="lib/jquery/jquery-1.11."></script>
  <script src="lib/angular/"></script>
  <script src="lib/angular-ui/"></script>
  <!--jsController folder-->
  <script src="js/"></script>
  <script src="js/"></script>
  <script src="js/"></script>
</head>

<body>

<div ui-view>

</div>

</body>

</html>

File, dependency injection, setting up the route. The route here is to use ui-router routing. Here, we simply demonstrate the transfer parameters between two templates, the template for passing parameters and the template for receiving parameters.

var routerApp = ('routerApp', ['']);

(function($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
});

(function($stateProvider, $urlRouterProvider) {
  $('/index');
  $stateProvider
    .state('index', {//Template parameters      url: '/index',// url parameters      templateUrl: 'templates/',//The location of the template      controller: 'MyController'
    })
    .state('result', {
      url: '/result/:id/:number',//The key name of the parameter to be passed      templateUrl: 'templates/',
      controller: 'resultCtrl'
    });
});

3. The template of the first main page and set the click event toResult()

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

The controller sets the parameters $ and $ that need to be passed. Click event toResult() is actually a method of $('parameters of the template', {the key name of the parameter that needs to be passed: the parameter value that needs to be passed})

('MyController', function($scope, $state) {
  $ = "nice";//The parameter value that needs to be passed  $ = 10;//The parameter value that needs to be passed  $ = function(){
    $('result',{id: $,number: $});
  }
});

5. Template for receiving parameters

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

The controller, here uses the $stateParams method to receive the parameters passed from the previous page.

('resultCtrl', function($scope, $state, $stateParams) {
  var id = $;
  var number = $;
  (id);
  (number);
});

Project Catalog

js\、、

lib\
jquery\jquery-1.11.
angular\
angular-ui\

templates\、

In fact, the whole process is not difficult, but it is just interspersed between the template and the controller, which makes people confused. As long as you clearly distinguish which parameters correspond to, it is easy to understand.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.