AngularJS中页面传参方法

1、基于ui-router的页面跳转传参

(1) 用ui-router定义路由，比如有两个页面，一个页面(producers.html)放置了多个producers，点击其中一个目标，页面跳转到对应的producer页面，同时将producerId这个参数传过去。

.state('producers'　　url: '/producers',　　templateUrl: 'views/producers.html',　　controller: 'ProducersCtrl'

})

.state('producers',{

url: '/producer/:producerId',　　templateUrl: 'views/producer.html',　　controller: 'ProducerCtrl'

})

(2)在producer.html中，定义点击事件，比如ng-click="toProducer(producerId)",在ProducersCtrl中，定义页面跳转函数（使用ui-router的$state.go接口）：

.controller('ProducersCtrl',cope,$state) { $scope.toProducer = 'producer'

(3)在ProducerCtrl中，通过ui-router的$stateParams获取参数producerId,

.controller('ProducerCtrl',cope,$state,$stateParams){

var producerId = $stateParams.producerId;

});

2、基于factory的页面跳转传参

举例：有N个页面，每个页面都需要用户填选信息，最终引导用户至尾页提交，同时后一个页面要显示前面所有页面填写的信息。这时用factory传参是比较合理的选择

.factory('myFactory', 定义参数对象 myObject = 函数 aram {type} xxx _setter = myObject = 获取数据的getter函数 aram {type} xxx _getter = 方法可实现提交或获取参数的功能 });

3、基于factory和$rootScope.$broadcast()的传参

(1)举例：

一个单页中定义了nested views，你希望让所有子作用域都监听到某个参数的变化，并且作出相应动作。比如一个地图应用，某个$state中定义元素input，输入地址后，地图要定位，同时另一个状态下的列表要显示出该位置周边商铺的信息，此时多个$scope都在监听地址变化。PS: $rootScope.$broadcast()可以非常方便的设置全局事件，并让所有子作用域都监听到。

.factory('addressFactory',['$rootScope',cope) { address =

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 定义components数组，数组<a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>街道，城市，国家等</span>
address.components =<span style="color: #000000"&gt; [];

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 定义更新地址<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，通过$rootS<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast()设置全局事件'AddressUpdated'</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 所有子作用域都能监听到该事件</span>
address.updateAddress = <span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; (value) {
</span><span style="color: #0000ff"&gt;this</span>.components =<span style="color: #000000"&gt; angular.<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>y(value);
$rootS<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast(</span>'AddressUpdated'<span style="color: #000000"&gt;);
};

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 返回地址对象</span>
<span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; address;

}]);

(2)在获取地址的controller中：

获取地址，接口方法省略 component =// 定义地址数组
$scope.components = [];

$scope.$watch('components',function () {
// 将component对象推入$scope.components数组
 components.push(component);
// 更新addressFactory中的components
 addressFactory.updateAddress(components);
});

(3)在监听地址变化的controller中：

$scope.$on('AddressUpdated',获取相应数据 street = address.components[0 city = address.components[0// 通过获取的地址数据可以做相关操作，譬如获取该地址周边的商铺，下面代码为本人虚构
shopFactory.getShops(street,city).then(function (data) {
if(data.status === 200){
$scope.shops = data.shops;
}else{
$log.error('对不起，获取该位置周边商铺数据出错: ',data);
}
});
});

4. 基于localStorage或sessionStorage的页面跳转传参

获取变量的一端不会更新。AngularJS有一些现成的WebStorage dependency可以使用，譬如，。下面使用ngStorage来简述传参过程：(1) 上传参数到localStorage - Controller A

属性 $scope.$storage = $localStorage.$0// 假设某个factory（此例暂且命名为counterFactory）中的updateCounter()方法
// 可以用于更新参数counter
counterFactory.updateCounter().then(function (data) {
// 将新的counter值上传到localStorage中
$scope.$storage.counter = data.counter;
});

(2)监听localStorage中的参数变化 - Controller B

$scope.counter =cope.$watch('counter',获取参数的最新值 $log.log('newVal: '

5. 基于localStorage/sessionStorage和Factory的页面传参

代码。举例：应用的Authentication（授权）。用户登录后，后端传回一个时限性的token，该用户下次访问应用，通过检测token和相关参数，可获取用户权限，因而无须再次登录即可进入相应页面（Automatically Login）。其次所有的APIs都需要在HTTP header里注入token才能与服务器传输数据。此时我们看到token扮演一个重要角色：（a）用于检测用户权限，（b）保证前后端数据传输安全性。以下实例中使用和。（1）定义一个名为auth.service.js的factory，用于处理和authentication相关的业务逻辑，比如login，logout，checkAuthentication，getAuthenticationParams等。此处略去其他业务，只专注Authentication的部分。

( 'use strict' .module('myApp' .factory('authService' apiUserPermission = ENV.baseUrl + 'user/permission' authServices = logout: logout, arams: getAuthenticationParams, 错误函数，私有函数。 aram {type} xxx $log.error('XHR Failed for ' + name + '.\n',angular.toJson(error, 函数，公有函数。登录成功，把服务器返回的token存入localStorage。 aram {type} xxx apiLoginUrl = ENV.baseUrl + 'user/login' method: 'POST' arams: { .Failed); (response.status === 200 && _.includes(response.data.authorities,'admin' $localStorage.authtoken = setAuthenticationParams( } $localStorage.authtoken = '' setAuthenticationParams( Failed(error) { handleError('login()' logout函数，公有函数。 logout() { 函数，私有函数。 aram {type} xxx arams(param) { $localStorage.isAuth =aram; 获取数据的getter函数，公有函数。获取isAuth和token参数。函数，可以避免使用第四种方法所提到的$watch变量。 aram {type} xxx arams() { authParams = arams; 用户是否依旧属于admin权限. 函数才会返回true，否则返回false。 deferred = $http.get(apiUserPermission).success( (_.includes(response.authorities,'admin' deferred.resolve( } deferred.reject( }).error( handleError('checkAuthentication()' deferred.reject( })();

（2）定义名为index.run.js的文件，用于在应用载入时自动运行权限检测代码。

( 'use strict' .module('myApp' arams()函数. 用户之前成功登陆过。因而localStorage中已储存isAuth和authtoken两个参数。用户或许已logout，或是首次访问应用。因而强制用户至登录页输入用户名密码登录。函数. 用户的token依旧有效，同时用户依然拥有admin权限。因而无需手动登录，页面将自动重定向到admin页面。用户token已经过期，或用户不再属于admin权限。因而强制用户至登录页输入用户名密码登录。 .definePermission('ADMIN', authParams =arams(); arams.isAuth) { } })();

（3）定义名为authInterceptor.service.js的文件，用于在所有该应用请求的HTTP requests的header中注入token。关于AngularJS的Interceptor，请参看nofollow noreferrer" target="_blank">AngularJS。

( 'use strict' .module('myApp' .factory('authInterceptorService' authService = $injector.get('authService' authInterceptorServices = fig) { authParams =arams(); config.headers = config.headers || (authParams.authtoken) config.headers.authtoken =arams.authtoken; config ||fig); (rejection.status === 401 logout(); $location.path('/login' })();

转自知乎：https://www.zhihu.com/question/33565135

AngularJS中页面传参方法

相关文章