吴江区建设银行招聘网站,三只松鼠营销策划书,wordpress 主机配置,网站备案类型有哪些1、基于ui-router的页面跳转传参 (1) 用ui-router定义路由#xff0c;比如有两个页面#xff0c;一个页面(producers.html)放置了多个producers#xff0c;点击其中一个目标#xff0c;页面跳转到对应的producer页面#xff0c;同时将producerId这个参数传过去。 .state(p…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-clicktoProducer(producerId), 在ProducersCtrl中定义页面跳转函数使用ui-router的$state.go接口 .controller(ProducersCtrl, function ($scope, $state) {$scope.toProducer function (producerId) {$state.go(producer, {producerId: producerId});};
}); (3)在ProducerCtrl中通过ui-router的$stateParams获取参数producerId, .controller(ProducerCtrl, function($scope, $state, $stateParams){var producerId $stateParams.producerId;}); 2、基于factory的页面跳转传参 举例有N个页面每个页面都需要用户填选信息最终引导用户至尾页提交同时后一个页面要显示前面所有页面填写的信息。这时用factory传参是比较合理的选择 1 .factory(myFactory, function () { 2 //定义参数对象3 var myObject {};4 5 /**6 * 定义传递数据的setter函数7 * param {type} xxx8 * returns {*}9 * private
10 */
11 var _setter function (data) {
12 myObject data;
13 };
14
15 /**
16 * 定义获取数据的getter函数
17 * param {type} xxx
18 * returns {*}
19 * private
20 */
21 var _getter function () {
22 return myObject;
23 };
24
25 // Public APIs
26 // 在controller中通过调setter()和getter()方法可实现提交或获取参数的功能
27 return {
28 setter: _setter,
29 getter: _getter
30 };
31 }); 3、基于factory和$rootScope.$broadcast()的传参 (1)举例 在一个单页中定义了nested views你希望让所有子作用域都监听到某个参数的变化并且作出相应动作。比如一个地图应用某个$state中定义元素input输入地址后地图要定位同时另一个状态下的列表要显示出该位置周边商铺的信息此时多个$scope都在监听地址变化。PS: $rootScope.$broadcast()可以非常方便的设置全局事件并让所有子作用域都监听到。 .factory(addressFactory, [$rootScope, function ($rootScope) {// 定义所要返回的地址对象 var address {};// 定义components数组数组包括街道城市国家等address.components [];// 定义更新地址函数通过$rootScope.$broadcast()设置全局事件AddressUpdated// 所有子作用域都能监听到该事件address.updateAddress function (value) {this.components angular.copy(value);$rootScope.$broadcast(AddressUpdated);};// 返回地址对象return address;
}]); (2)在获取地址的controller中 // 动态获取地址接口方法省略
var component {addressLongName: xxxx,addressShortName: xx,cityLongName: xxxx,cityShortName: xx,countryLongName: xxxx,countryShortName: xx,postCode: xxxxx
};// 定义地址数组
$scope.components [];$scope.$watch(components, function () {// 将component对象推入$scope.components数组components.push(component);// 更新addressFactory中的componentsaddressFactory.updateAddress(components);
}); (3)在监听地址变化的controller中 // 通过addressFactory中定义的全局事件AddressUpdated监听地址变化
$scope.$on(AddressUpdated, function () {// 监听地址变化并获取相应数据var street address.components[0].addressLongName;var city address.components[0].cityLongName;// 通过获取的地址数据可以做相关操作譬如获取该地址周边的商铺下面代码为本人虚构shopFactory.getShops(street, city).then(function (data) {if(data.status 200){$scope.shops data.shops; }else{$log.error(对不起获取该位置周边商铺数据出错: , data);}});
}); 4. 基于localStorage或sessionStorage的页面跳转传参 注意事项通过LS或SS传参一定要监听变量否则参数改变时获取变量的一端不会更新。AngularJS有一些现成的WebStorage dependency可以使用譬如gsklee/ngStorage · GitHubgrevory/angular-local-storage · GitHub。下面使用ngStorage来简述传参过程(1) 上传参数到localStorage - Controller A // 定义并初始化localStorage中的counter属性
$scope.$storage $localStorage.$default({counter: 0
});// 假设某个factory此例暂且命名为counterFactory中的updateCounter()方法
// 可以用于更新参数counter
counterFactory.updateCounter().then(function (data) {// 将新的counter值上传到localStorage中$scope.$storage.counter data.counter;
}); (2)监听localStorage中的参数变化 - Controller B $scope.counter $localStorage.counter;
$scope.$watch(counter, function(newVal, oldVal) {// 监听变化并获取参数的最新值$log.log(newVal: , newVal);
}); 5. 基于localStorage/sessionStorage和Factory的页面传参 由于传参出现的不同的需求将不同方式组合起来可帮助你构建低耦合便于扩展和维护的代码。举例应用的Authentication授权。用户登录后后端传回一个时限性的token该用户下次访问应用通过检测token和相关参数可获取用户权限因而无须再次登录即可进入相应页面Automatically Login。其次所有的APIs都需要在HTTP header里注入token才能与服务器传输数据。此时我们看到token扮演一个重要角色a用于检测用户权限b保证前后端数据传输安全性。以下实例中使用GitHub - gsklee/ngStorage: localStorage and sessionStorage done right for AngularJS.和GitHub - Narzerus/angular-permission: Simple route authorization via roles/permissions。1定义一个名为auth.service.js的factory用于处理和authentication相关的业务逻辑比如loginlogoutcheckAuthenticationgetAuthenticationParams等。此处略去其他业务只专注Authentication的部分。 1 (function() {2 use strict;3 4 angular5 .module(myApp)6 .factory(authService, authService);7 8 /** ngInject */9 function authService($http, $log, $q, $localStorage, PermissionStore, ENV) {10 var apiUserPermission ENV.baseUrl user/permission;11 12 var authServices {13 login: login,14 logout: logout,15 getAuthenticationParams: getAuthenticationParams,16 checkAuthentication: checkAuthentication17 };18 19 return authServices;20 21 ////22 23 /**24 * 定义处理错误函数私有函数。25 * param {type} xxx26 * returns {*}27 * private28 */29 function handleError(name, error) {30 return $log.error(XHR Failed for name .\n, angular.toJson(error, true));31 }32 33 /**34 * 定义login函数公有函数。35 * 若登录成功把服务器返回的token存入localStorage。36 * param {type} xxx37 * returns {*}38 * public39 */40 function login(loginData) {41 var apiLoginUrl ENV.baseUrl user/login; 42 43 return $http({44 method: POST,45 url: apiLoginUrl,46 params: {47 username: loginData.username,48 password: loginData.password49 }50 })51 .then(loginComplete)52 .catch(loginFailed);53 54 function loginComplete(response) {55 if (response.status 200 _.includes(response.data.authorities, admin)) {56 // 将token存入localStorage。57 $localStorage.authtoken response.headers().authtoken;58 setAuthenticationParams(true);59 } else {60 $localStorage.authtoken ;61 setAuthenticationParams(false);62 }63 }64 65 function loginFailed(error) {66 handleError(login(), error);67 }68 }69 70 /**71 * 定义logout函数公有函数。72 * 清除localStorage和PermissionStore中的数据。73 * public74 */75 function logout() {76 $localStorage.$reset();77 PermissionStore.clearStore();78 }79 80 /**81 * 定义传递数据的setter函数私有函数。82 * 用于设置isAuth参数。83 * param {type} xxx84 * returns {*}85 * private86 */87 function setAuthenticationParams(param) {88 $localStorage.isAuth param;89 }90 91 /**92 * 定义获取数据的getter函数公有函数。93 * 用于获取isAuth和token参数。94 * 通过setter和getter函数可以避免使用第四种方法所提到的$watch变量。95 * param {type} xxx96 * returns {*}97 * public98 */ 99 function getAuthenticationParams() {
100 var authParams {
101 isAuth: $localStorage.isAuth,
102 authtoken: $localStorage.authtoken
103 };
104 return authParams;
105 }
106
107 /*
108 * 第一步: 检测token是否有效.
109 * 若token有效进入第二步。
110 *
111 * 第二步: 检测用户是否依旧属于admin权限.
112 *
113 * 只有满足上述两个条件函数才会返回true否则返回false。
114 * 请参看angular-permission文档了解其工作原理https://github.com/Narzerus/angular-permission/wiki/Managing-permissions
115 */
116 function checkAuthentication() {
117 var deferred $q.defer();
118
119 $http.get(apiUserPermission).success(function(response) {
120 if (_.includes(response.authorities, admin)) {
121 deferred.resolve(true);
122 } else {
123 deferred.reject(false);
124 }
125 }).error(function(error) {
126 handleError(checkAuthentication(), error);
127 deferred.reject(false);
128 });
129
130 return deferred.promise;
131 }
132 }
133 })(); 2定义名为index.run.js的文件用于在应用载入时自动运行权限检测代码。 1 (function() {2 use strict;3 4 angular5 .module(myApp)6 .run(checkPermission);7 8 /** ngInject */9
10 /**
11 * angular-permission version 3.0.x.
12 * https://github.com/Narzerus/angular-permission/wiki/Managing-permissions.
13 *
14 * 第一步: 运行authService.getAuthenticationParams()函数.
15 * 返回true用户之前成功登陆过。因而localStorage中已储存isAuth和authtoken两个参数。
16 * 返回false用户或许已logout或是首次访问应用。因而强制用户至登录页输入用户名密码登录。
17 *
18 * 第二步: 运行authService.checkAuthentication()函数.
19 * 返回true用户的token依旧有效同时用户依然拥有admin权限。因而无需手动登录页面将自动重定向到admin页面。
20 * 返回false要么用户token已经过期或用户不再属于admin权限。因而强制用户至登录页输入用户名密码登录。
21 */
22 function checkPermission(PermissionStore, authService) {
23 PermissionStore
24 .definePermission(ADMIN, function() {
25 var authParams authService.getAuthenticationParams();
26 if (authParams.isAuth) {
27 return authService.checkAuthentication();
28 } else {
29 return false;
30 }
31 });
32 }
33 })(); 3定义名为authInterceptor.service.js的文件用于在所有该应用请求的HTTP requests的header中注入token。关于AngularJS的Interceptor请参看AngularJS。 1 (function() {2 use strict;3 4 angular5 .module(myApp)6 .factory(authInterceptorService, authInterceptorService);7 8 /** ngInject */9 function authInterceptorService($q, $injector, $location) {
10 var authService $injector.get(authService);
11
12 var authInterceptorServices {
13 request: request,
14 responseError: responseError
15 };
16
17 return authInterceptorServices;
18
19 ////
20
21 // 将token注入所有HTTP requests的headers。
22 function request(config) {
23 var authParams authService.getAuthenticationParams();
24 config.headers config.headers || {};
25 if (authParams.authtoken) config.headers.authtoken authParams.authtoken;
26
27 return config || $q.when(config);
28 }
29
30 function responseError(rejection) {
31 if (rejection.status 401) {
32 authService.logout();
33 $location.path(/login);
34 }
35 return $q.reject(rejection);
36 }
37 }
38 })(); 转自知乎https://www.zhihu.com/question/33565135 转载于:https://www.cnblogs.com/xuepei/p/6369519.html
