Monday 15 August 2011

AngularJS - Hook Routes Changing and Centralize the logic upon that -



AngularJS - Hook Routes Changing and Centralize the logic upon that -

this question comes one: angularjs - determine if view should displayed ajax phone call result upon route changes

as previous question, came solution:

(function() { 'use strict'; angular.module("appclubs", ["appclubs.usermodule", "appclubs.productmodule", "clubsservices", "ngroute", "ui.bootstrap"]) .config(routeconfigurator); angular.module("appclubs") .controller("checkloginctrl", checklogincontroller); checklogincontroller.$inject = ['$scope', '$rootscope', '$location', 'userfactory']; routeconfigurator.$inject = ['$routeprovider', '$locationprovider']; function routeconfigurator($routeprovider, $locationprovider) { $routeprovider.when("/home", { templateurl: "views/index.html" }); // ... // routes visitor cannot access before signing in $routeprovider.when("/account-profile/my-redeem", { templateurl: "views/member_zone/my.redeem.html", resolve: { loggedin: ["$q", "userfactory", "$location", function checkpermit($q, userfactory, $location) { var deferred = $q.defer(); var logstatus = userfactory.loggedin(); if (logstatus) { deferred.resolve({ message: "proceed alter route." }); } else { deferred.reject({ message: "redirect default page." }); alert("please login first!"); $location.path("/login"); } homecoming deferred.promise; }] } }); $routeprovider.when("/account-profile/my-survey", { templateurl: "views/member_zone/my.survey.html", resolve: { loggedin: ["$q", "userfactory", "$location", function checkpermit($q, userfactory, $location) { var deferred = $q.defer(); var logstatus = userfactory.loggedin(); if (logstatus) { deferred.resolve({ message: "proceed alter route." }); } else { deferred.reject({ message: "redirect default page." }); alert("please login first!"); $location.path("/login"); } homecoming deferred.promise; }] } }); // ... } })();

however, have repeated same piece of code each route forbid undesired access. question how 1 time all. have tried code below:

(function() { 'use strict'; angular.module("appclubs", ["appclubs.usermodule", "appclubs.productmodule", "clubsservices", "ngroute", "ui.bootstrap"]) .config(routeconfigurator); angular.module("appclubs") .controller("checkloginctrl", checklogincontroller); checklogincontroller.$inject = ['$scope', '$rootscope', '$location', 'userfactory']; routeconfigurator.$inject = ['$routeprovider', '$locationprovider']; function routeconfigurator($routeprovider, $locationprovider) { $routeprovider.when("/home", { templateurl: "views/index.html" }); // ... // routes visitor cannot access before signing in $routeprovider.when("/account-profile/my-redeem", { templateurl: "views/member_zone/my.redeem.html", resolve: { loggedin: ["$q", "userfactory", "$location", checkpermit] } }); $routeprovider.when("/account-profile/my-survey", { templateurl: "views/member_zone/my.survey.html", resolve: { loggedin: ["$q", "userfactory", "$location", checkpermit] } }); // ... } function checkpermit($q, userfactory, $location) { var deferred = $q.defer(); var logstatus = userfactory.loggedin(); if (logstatus) { deferred.resolve({ message: "proceed alter route." }); } else { deferred.reject({ message: "redirect default page." }); alert("please login first!"); $location.path("/login"); } homecoming deferred.promise; } })();

and doesn't work, got error saying: defer not defined, that. used mill wrap piece of logic:

(function() { 'use strict'; angular.module("appclubs", ["appclubs.usermodule", "appclubs.productmodule", "clubsservices", "ngroute", "ui.bootstrap"]) .config(routeconfigurator); angular.module("appclubs") .controller("checkloginctrl", checklogincontroller) .factory('checkpermit', checkpermitfactory); checklogincontroller.$inject = ['$scope', '$rootscope', '$location', 'userfactory']; routeconfigurator.$inject = ['$routeprovider', '$locationprovider', 'checkpermit']; checkpermitfactory.$inject = ['$q', '$location', 'userfactory']; function routeconfigurator($routeprovider, $locationprovider, checkpermit) { $routeprovider.when("/home", { templateurl: "views/index.html" }); // ... // routes visitor cannot access before signing in $routeprovider.when("/account-profile/my-redeem", { templateurl: "views/member_zone/my.redeem.html", resolve: { loggedin: function (checkpermit) { homecoming checkpermit.checklogin(); } } }); $routeprovider.when("/account-profile/my-survey", { templateurl: "views/member_zone/my.survey.html", resolve: { loggedin: function (checkpermit) { homecoming checkpermit.checklogin(); } } }); // ... } function checkpermitfactory($q, userfactory, $location) { function checklogin() { var deferred = $q.defer(); var logstatus = userfactory.loggedin(); if (logstatus) { deferred.resolve({ message: "proceed alter route." }); } else { deferred.reject({ message: "redirect default page." }); alert("please login first!"); $location.path("/login"); } homecoming deferred.promise; } var mill = { checklogin: checklogin }; homecoming factory; } })();

and got error saying not find checkpermit provider, when investigating problem, realized cannot inject dependency on stance of mill routeconfigurator, here supposed utilize checkpermitprovider instead.

i confused now.

any help appreciated. thanks.

thank replies.

in end, found can working in way:

(function() { 'use strict'; angular.module("appclubs", ["appclubs.usermodule", "appclubs.productmodule", "clubsservices", "ngroute", "ui.bootstrap"]) .config(routeconfigurator); angular.module("appclubs") .controller("checkloginctrl", ['$q', '$location', 'userfactory', function checkpermitfactory($q, userfactory, $location) { function checklogin() { var deferred = $q.defer(); var logstatus = userfactory.loggedin(); if (logstatus) { deferred.resolve({ message: "proceed alter route." }); } else { deferred.reject({ message: "redirect default page." }); alert("please login first!"); $location.path("/login"); } homecoming deferred.promise; } var mill = { checklogin: checklogin }; homecoming factory; }]) .factory('checkpermit', checkpermitfactory); checklogincontroller.$inject = ['$scope', '$rootscope', '$location', 'userfactory']; routeconfigurator.$inject = ['$routeprovider', '$locationprovider', 'checkpermit']; function routeconfigurator($routeprovider, $locationprovider, checkpermit) { $routeprovider.when("/home", { templateurl: "views/index.html" }); // ... // routes visitor cannot access before signing in $routeprovider.when("/account-profile/my-redeem", { templateurl: "views/member_zone/my.redeem.html", resolve: { loggedin: function (checkpermit) { homecoming checkpermit.checklogin(); } } }); $routeprovider.when("/account-profile/my-survey", { templateurl: "views/member_zone/my.survey.html", resolve: { loggedin: function (checkpermit) { homecoming checkpermit.checklogin(); } } }); // ... } })();

i used $inject property specify dependencies because suggested in section 'manually identify dependencies' in article: https://github.com/johnpapa/angularjs-styleguide#manually-identify-dependencies.

and don't quite understand how $inject work though; got concerns behind that. problem has been solved, don't know difference between 2 ways of defining controller , declaring there dependencies.

angularjs

No comments:

Post a Comment