Angular route not entering the resolve function - angularjs

I'm adding route authentication to my angular app.
For some reason when I try to navigate to the logentries view, I cannot get the code in the resolve function to execute.
I've added a breakpoint using Chrome developer tools, but it doesn't get hit.
The view does get loaded, however.
I thought the resolve would get hit before the controller is instantiated and the view rendered.
Why isn't it?
(function () {
'use strict';
angular.module('app')
.config(appConfig)
.run(routeAuthentication);
routeAuthentication.$inject = ['$rootScope', '$location'];
function routeAuthentication($rootScope, $location) {
$rootScope.$on('$routeChangeError', function (event, current, previous, rejection) {
if (rejection === 'Not Authenticated') {
console.log('Not Authenticated for Route');
$location.path('/');
}
});
}
appConfig.$inject = ['$routeProvider'];
function appConfig($routeProvider) {
$routeProvider
.when("/logentries", {
templateUrl: "app/views/logEntries.html",
controller: "logEntries",
resolve: function ($q, $location) {
// Code not entering here as far as I can tell.
var deferred = $q.defer();
deferred.resolve();
if (true) { // TODO - use authenticationServce
$location.path('/login');
}
return deferred.promise;
}
})
// other routes
};
})();

Related

Controller Undefined after Form Submit: Argument 'RegistrationController' is not a function, got undefined

I wrote some custom routing in my app configuration file to handle routing of all my html templates and controllers instead of having to specifically define the route for every single html and controller. I have a Registration.html and RegistrationController.js under my Modules/Account/ directory. My app can find the controller the first time I go to it and I can fill out the page and submit the form on the page. After I submit successfully, I get redirected to a success page. When I try to go back to the same registration html/controller the 2nd time, it can find my html template, but it can not find my controller anymore and i get the error "Argument 'RegistrationController' is not a function, got undefined". Can anyone tell me why and how to fix this?
Please note this error only happens after a form submit. If I leave the page and go back to it without doing a form submit, everything works fine.
App Config
define(['angularAMD', 'angular-route', 'ui-bootstrap', 'ui-grid'], function (angularAMD) {
var app = angular.module("MyApp", ['ngRoute', 'ui.bootstrap', 'ui.grid']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", angularAMD.route({
templateUrl: function (rp) { return 'Modules/Account/login.html'; },
controllerUrl: 'Modules/Account/LoginController'
}))
.when("/:module/:page", angularAMD.route({
templateUrl: function (rp) { return 'Modules/' + rp.module + '/' + rp.page + '.html'; },
resolve: {
load: ['$q', '$rootScope', '$location', function ($q, $rootScope, $location) {
var path = $location.path();
var parsePath = path.split('/');
var parentPath = parsePath[1];
var controllerName = parsePath[2];
var loadController = "Modules/" + parentPath + "/" + controllerName + "Controller";
debugger;
var deferred = $q.defer();
require([loadController], function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
}))
.otherwise({ redirectTo: '/' });
}]);
loadDirectives(app);
angularAMD.bootstrap(app);
return app;
});
RegistrationController
define(['app-config','accountService'], function (app) {
app.register.controller('RegistrationController', ['$scope', '$rootScope', '$location', '$uibModal', 'accountService',
function ($scope, $rootScope, $location, $uibModal, accountService) {
$rootScope.applicationModule = "Account";
$scope.registerUserSuccess = function (response, status) {
debugger;
$location.path("/Account/RegistrationSuccess");
}
$scope.registerUserFailure = function (response, status) {
if (!response.ValidationErrors) {
$scope.ErrorList = [];
$scope.ErrorList.push("An error occurred. Please contact the system's administrator");
}
else {
$scope.ErrorList = response.ValidationErrors;
}
}
$scope.onSubmitClick = function (isValid) {
if (isValid) {
accountService.registerUser($scope.regModel, $scope.registerUserSuccess, $scope.registerUserFailure);
}
}
$scope.onCancelClick = function () {
$location.path("/Login");
}
}
]);
});
I haven't honed in on the answer yet, but I've noticed some refactoring that you should do that might get you closer to figuring out your problem ...
Stop using controllers. Use components, which were introduced in 1.5. These are superior in their reusability. They are more flexible in how you can use them and in what you can pass into them. The only controllers you should be using are the ones in components.
Stop using $scope or $rootScope for anything. Used named controllers. This is the default setting for a component.
Consider ui-router over angular-route. It's just a lot better.
What is loadDirectives(app) doing?
Put a log statement in your RegistrationContoller.js and just verify that it isn't being called more than once. If it thinks RegistrationController is undefined after previously being defined, it just feels like it's being defined more than once.
Is there anything fishy in accountService.registerUser? Is this function forwarding you to the success screen? That's kind of weird... seems to me that the accountService.registerUser should return a promise, and the onSubmitClick should resolve the promise and forward the user.
Try forwarding back to the RegistrationController at different points in the code, and try to narrow down the exact point that it becomes undefined. I think that you have some code running somewhere that you don't think you do.

angular data binding with lazy loaded controllers

I am trying to lazy load my controllers in angular via requirejs
.when('/', {
templateUrl: 'views/main.html',
resolve: {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
// At this point, use whatever mechanism you want
// in order to lazy load dependencies. e.g. require.js
// In this case, "itemsController" won't be loaded
// until the user hits the '/items' route
require(['controllers/main'], function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
});
This is my controller
define(['angular'], function (angular) {
'use strict';
var app = angular.module('someApp.controllers.MainCtrl', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.abc = "abc";
return app;
});
My view doesnt show the variable abc. Even though the view is rendering fine
<span>abc={{abc}}</span>

Loading controller on demand using AngularJS and RequireJS

I'm using Angular UI-router and trying to download/load controller when the routing changes. I used resolve and category, the data.data returns the js file content as string. I'm not sure to make the controller available to angular. Please help
My module.js contains below routing code
state("privacy", {
url: "/privacy",
controllerProvider: function ($stateParams) {
return "PrivacyController";
},
resolve: {
category: ['$http', '$stateParams', function ($http, $stateParams) {
return $http.get("js/privacy.js").then(function (data) {
return data.data;
});
} ]
},
templateUrl: localPath + "templates/privacy.html"
})
The below controller exist in "js/privacy.js"
socialinviter.controller("PrivacyController", function ($scope) {
$scope.me = "Hellow world";
});
I also tried with require js but I'm getting error "http://errors.angularjs.org/1.2.16/ng/areq?p0=PrivacyController&p1=not%20aNaNunction%2C%20got%20undefined"
resolve: {
deps: function ($q, $rootScope) {
var deferred = $q.defer(),
dependencies = ["js/privacy"];
require(dependencies, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
deferred.resolve()
})
return deferred.promise;
}
}
I have resolved the issue and I thought the solution would be helpful for others
Step 1: On your config, include the parameter $controllerProvider
mytestapp.config(function ($stateProvider, $controllerProvider)
Step 2: telling angular to register the downloaded controller as controller, add the below inside the config
mytestapp.config(function ($stateProvider, $controllerProvider) {
mytestapp._controller = mytestapp.controller
mytestapp.controller = function (name, constructor){
$controllerProvider.register(name, constructor);
return (this);
}
......
Step 3: Add the resolve method as below
state("privacy", {
url: "/privacy",
controller: "PrivacyController",
resolve: {
deps : function ($q, $rootScope) {
var deferred = $q.defer();
require(["js/privacy"], function (tt) {
$rootScope.$apply(function () {
deferred.resolve();
});
deferred.resolve()
});
return deferred.promise;
}
},
templateUrl: "templates/privacy.html"
})

How to avoid asynchronous processing in angular js

I'm new in angular js . I want to do authentication . I've to direct to some pages only after checking authentication. I've checkLogin function for that. While calling that checkLogin function it take some processing time. If true it redirects corresponding page. If false it remains the same page. But while calling the checkLogin function the same time it process the app.config function concurrently. I need to to block it. I've to process that only after chcklogin.
var app = angular.module('myApp', ['ngRoute', 'ngResource','ngCsv', 'ui', 'ngSanitize', 'ngQuickDate', 'ui.tree', 'blueimp.fileupload','mentio']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/views/login.html',
controller: 'LoginController',
title: 'Login'
}).when('/signup', {
templateUrl: 'app/views/signup.html',
controller: 'SignUpController',
title: 'Sign Up'
}).when('/dashboard', {
templateUrl: 'app/views/dashboard.html',
controller: 'DashboardController',
title: 'Dashboard'});});
app.run(function($rootScope, $location, DataService) {
var unAuthenticatedPages = ["/", "/signup"];
var checkLogin = function() {
if (!$rootScope.isLoggedIn && unAuthenticatedPages.indexOf($location.path()) === -1) {
$location.path('/');
}
};
$rootScope.isLoggedIn = true;
DataService.getUserListById(1, function(user) {
$rootScope.user = user;
});
$rootScope.$on('$locationChangeStart', checkLogin);});
angularjs comes with a built in promise library $q which can be injected and used something like this:
var doSomething = function() {
var deferred = $q.defer();
//do someething here, when you're ready resolve the deferred object
deferred.resolve();
//this won't execute until deferred is resolved or rejected
return deferred.promise;
};
You can also return variables with your promise if required. You can then
doSomething().then(function() {
//this executes if the promise is resolved
}, function() {
//this executes if the promise is rejected
});

AngularJS working with $location.path and ngRoute

I have this $location.path redirection:
myapp.controller('registerCtrl', function ($scope, $location, regService) {
$scope.register = function() {
$('#regbutton').prop('disabled','disabled');
regService.createUser($scope.email, $scope.password, function(id) {
if (id) {
$('#register').modal('hide');
$location.path('/account');
}
});
}
})
When the redirection occurs it redirects the user to http://myapp.com/#/account
Now I want to display a different template to show the user account. So I'm trying to use ngRoute but cannot get it to work properly..
myapp.config(['$routeProvider', '$locationProvider', '$provide',
function ($routeProvider, $locationProvider, $provide) {
console.log('in');
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
$routeProvider.
when('/account', {
templateUrl: 'account.html',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
console.log('in resolve');
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$locationProvider
.html5Mode(true)
.hashPrefix('');
}]);
The route you should be using in the configuration when() function is /account

Resources