AngulaJS路由ui-router傳參實例

在這里分享我做的一個使用ui-router 傳參的小demo

成都創(chuàng)新互聯公司長期為成百上千客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態(tài)環(huán)境。為渭南企業(yè)提供專業(yè)的成都網站設計、成都網站建設，渭南網站改版等技術服務。擁有十多年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

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的方法去接收上一個頁面?zhèn)鬟f過來的參數

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

其實整個過程并不難，只是穿插在模板和控制器之間，容易讓人摸不著頭腦，只要分清楚具體的參數是對應哪一個，很容易理解。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。

文章題目：AngulaJS路由ui-router傳參實例
瀏覽路徑：http://muchs.cn/article2/gphcoc.html

成都網站建設公司_創(chuàng)新互聯，為您提供企業(yè)網站制作、動態(tài)網站、網站設計公司、Google、網站維護、面包屑導航

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容