Angular 中幾種參數傳遞方式
參數傳遞，是在程序運行過程中，實際參數就會將參數值傳遞給相應的形式參數，然后在函數中實現對數據處理和返回的過程，方法有按值傳遞參數，按地址傳遞參數和按數組傳遞參數。
最近用angular做app項目，除了實際的功能外，遇到很多坑，首先，我選用了angular框架，angular框架的優點我就不說了，但是確在其中遇到了很多坑，今天的主題是關于整理angularJS使用中傳遞參數的問題。
一、ngRoute中參數傳遞問題
1.1 ng-href中的參數傳遞
html中代碼
<a ng-href="#/list/{{ id }}"> ID{{ id }}</a>
app.js中的代碼
//主入口文件
//依賴于路由模塊
angular.module('myApp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/list/:id',{
templateUrl:'./view/car.html',
controller:'CarCtrl as carCtrl'
})
.otherwise({
redirectTo:'./view/home.html'
})
}])
參數接收
angular.module('myApp')
//依賴注入$css（這個是angularCSS這個插件中的服務）
.controller("CarCtrl",['$routeParams',function($routeParams){
//$routeParams 可以獲取到通過路由穿過來的所有參數，我們可以通過點語法獲取到相應的參數
var self = this;
self.name = $routeParams.id;
}])
二、ui.router中參數傳遞問題
2.1 ui-sref中的參數傳遞
html中使用ui-sref
<li ng-repeat="item in marketCtrl.getData" ui-sref=".categary({value:item.id})">{{item.name}}</li>
app.js
//主入口文件
//依賴于路由個模塊
angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('market.categary', {
url : '/categary/:value',
templateUrl : './view/market_1.html',
controller : 'ProInfoCtrl as proInfoCtrl'
})
}])
參數接收
angular.module('myApp')
.controller('ProInfoCtrl', ['$stateParams',function($stateParams){
var self = this;
self.value = $stateParams.value;
}] )
2.2 $state.go中的參數傳遞
html中
<img ng-click="homeCtrl.goDetail(name)" />
首先確定此時是跳轉到哪個頁面，跳轉到哪個頁面就在哪個頁面的路由中接收參數，比如此時我是跳轉到詳情頁面。
app.js中
angular.module('myApp', ['ui.router')
.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('detail', {
url:'/detail/:name',
templateUrl : './view/detail.html',
controller : 'DetailCtrl as detailCtrl'
})
}])
參數接收并對其進行操作
//注意：這里angular.module('myApp') 第二個參數依賴去掉
angular.module('myApp')
.controller('DetailCtrl', ['$css', '$state','$stateParams','HomeService', '$location',function ($css,$state,$stateParams,HomeService,$location) {
var self =this;
//接收name參數，并且給name賦值
self.name = $stateParams.name
//通過獲取到的name，反序列查找相應的對象
HomeService.HotDataList().success(function (result) {
for (var tempHotObj of result.data) {
if($stateParams.name == tempHotObj.name){
self.getInfo = tempHotObj;
return;
}
self.getInfo = null;
}
});
}])
三、其他參數傳遞
3.1基于factory的頁面跳轉傳參
假設有N個頁面，每個頁面都需要用戶填選信息，最終引導用戶至尾頁提交，同時后一個頁面要顯示前面所有頁面填寫的信息。這個時候用factory傳參是比較合理的選擇
.factory('myFactory', function () {
//定義參數對象
var myObject = {};
// 定義傳遞數據的setter函數
var _setter = function (data) {
myObject = data;
};
//定義獲取數據的getter函數
var _getter = function () {
return myObject;
};
// 在controller中通過調setter()和getter()方法可實現提交或獲取參數的功能
return {
setter: _setter,
getter: _getter
};
});
舉個栗子
為了方便觀看，我把所有配置寫在一個頁面中，正式書寫的時候，注意代碼規范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="homeCtrl">
<h2>page1</h2>
<form ng-submit="addInput()">
<input type="text" ng-model="input.name" placeholder="輸入員工姓名">
<input type="number" ng-model="input.age" placeholder="輸入員工年齡">
<input type="text" ng-model="input.title" placeholder="輸入員工職位">
<input type="submit" value="add">
</form>
</div>
<br />
<div ng-controller="mineCtrl">
<h2>page2</h2>
<ul>
<li ng-repeat="p in persons.list">
{{p.name}}, {{p.age}}, {{p.title}}
</li>
</ul>
</div>
<script type="text/javascript" src="../lib/angular.min.js" ></script>
<script type="text/javascript" src="../lib/angular-css.js" ></script>
<script type="text/javascript" src="../lib/angular-ui-router.js" ></script>
<script>
angular.module('myApp', ['ui.router'])
//定義控制器
.controller('homeCtrl',["$scope","testFactory",function($scope,testFactory){
//代碼規范，設置初始狀態
$scope.input = {
name: '',
age: null,
title: ''
};
//接收表單傳遞的參數
$scope.addInput = function() {
//把獲取到的參數傳遞到倉庫中setter存儲起來
testFactory.setter($scope.input);
//存儲之后把input清空，防止關聯存儲的數據
$scope.input = {
name: '',
age: null,
title: ''
};
};
}])
//定義控制器
.controller('mineCtrl',["$scope","testFactory",function($scope, testFactory){
//獲取設置頁面設置的數據
$scope.persons = testFactory.getter();
}])
//定義倉庫
.factory('testFactory', function(){
//定義參數對象
var testObject = {};
//用數據保存數據
testObject.list = [];
//定義傳遞數據的setter函數，用來接收數據
var _setter = function (data) {
testObject.list.push(data);
};
//定義獲取數據的getter函數
var _getter = function () {
return testObject;
};
// 在controller中通過調setter()和getter()方法可實現提交或獲取參數的功能
return {
setter: _setter,
getter: _getter
}
});
</script>
</body>
</html>
運行結果
GIF.gif
3.2基于factory和$rootScope.$broadcast()的傳參
$rootScope.$broadcast()可以非常方便的設置全局事件，并讓所有子作用域都監聽到，并作出相應反應。
3.3基于localStorage或sessionStorage的頁面跳轉傳參
通過LS或SS傳參，一定要監聽變量，否則參數改變時，獲取變量的一端不會更新。
3.4基于localStorage/sessionStorage和Factory的頁面傳參
將不同方式組合起來可幫助你構建低耦合便于擴展和維護的代碼。
舉例：應用的授權。
用戶登錄后，后端傳回一個時限性的token，該用戶下次訪問應用，通過檢測token和相關參數，可獲取用戶權限，因而無須再次登錄即可進入相應頁面（Automatically Login）。其次所有的APIs都需要在HTTP header里注入token才能與服務器傳輸數據。此時我們看到token扮演一個重要角色：（a）用于檢測用戶權限，（b）保證前后端數據傳輸安全性。
來自：http://www.jianshu.com/p/07cdc478ed0e
本文由用戶 WalSallee 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！