AngularJS: lazy loading controllers and content - javascript

In this simplified scenario, I have two files: index.htm, lazy.htm.
index.htm:
var myApp = angular.module('myApp', []);
myApp.controller('embed',function($scope){
$scope.embed = 'Embedded Controller';
});
<div ng-controller="embed">{{embed}}</div>
<div ng-include="'lazy.htm'"></div>
lazy.htm
myApp.controller('lazy',function($scope){
$scope.lazy = 'Lazy Controller';
});
<div ng-controller="lazy">
{{lazy}}
</div>
The result is an error: "Argument 'lazy' is not a function, got undefined"
Using a function instead
lazy.htm
function lazy($scope) {
$scope.lazy = 'Lazy Controller';
}
<div ng-controller="lazy">
{{lazy}}
</div>
This works until version 1.3 beta 14. In beta 15 was removed the global controller functions: https://github.com/angular/angular.js/issues/8296
So now, what is the better way to get angularized contents of lazy.htm dynamically?
UPDATE:
In this article (http://ify.io/lazy-loading-in-angularjs) I found another possible solution. The $controllerProvider allow us to register new controllers after angular bootstrap. Works like a charm. Tested in v1.3.0-beta.18
index.htm:
var myApp = angular.module('myApp', [])
.controller('embed',function($scope){
$scope.embed = 'Embedded Controller';
})
.config(function($controllerProvider) {
myApp.cp = $controllerProvider;
});
<div ng-controller="embed">{{embed}}</div>
<div ng-include="'lazy.htm'"></div>
lazy.htm
myApp.cp.register('lazy',function($scope){
$scope.lazy = 'Lazy Controller';
});
<div ng-controller="lazy">
{{lazy}}
</div>
UPDATE 2:
Two other alternatives that works are:
lazy.htm
_app = $('[ng-app]').scope();
_app.lazy = function($scope) {
$scope.lazy = 'Lazy Controller';
};
OR
var $rootScope = $('[ng-app]').injector().get('$rootScope');
$rootScope.lazy = function($scope) {
$scope.lazy = 'Lazy Controller';
};
But I believe these last two examples should not be used in production.

You can also use the jquery with the resolve the $routeProvider
app.js
/* Module Creation */
var app = angular.module ('app', ['ngRoute']);
app.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider){
/*Creating a more synthesized form of service of $ controllerProvider.register*/
app.registerCtrl = $controllerProvider.register;
function loadScript(path) {
var result = $.Deferred(),
script = document.createElement("script");
script.async = "async";
script.type = "text/javascript";
script.src = path;
script.onload = script.onreadystatechange = function (_, isAbort) {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
if (isAbort)
result.reject();
else
result.resolve();
}
};
script.onerror = function () { result.reject(); };
document.querySelector("head").appendChild(script);
return result.promise();
}
function loader(arrayName){
return {
load: function($q){
var deferred = $q.defer(),
map = arrayName.map(function(name) {
return loadScript('js/controllers/'+name+".js");
});
$q.all(map).then(function(r){
deferred.resolve();
});
return deferred.promise;
}
};
}
$routeProvider
.when('/', {
templateUrl: 'views/foo.html',
resolve: loader(['foo'])
})
.when('/bar',{
templateUrl: 'views/bar.html',
controller: 'BarCtrl',
resolve: loader(['bar'])
})
.otherwise({
redirectTo: document.location.pathname
});
}]);
/views/foo.html
<section ng-controller='FooCtrl'>
{{text}}
</section>
js/controllers/foo.js
/*Here we use the synthesized version of $controllerProvider.register
to register the controller in view*/
app.registerCtrl('FooCtrl',function($scope){
$scope.text = 'Test';
});
/views/bar.html
<section>
{{text2}}
</section>
js/controllers/bar.js
app.registerCtrl('BarCtrl',function($scope){
$scope.text2 = 'Test';
});

////JConfig file--------
window.angularApp.config(function ($routeProvider,$controllerProvider,$compileProvider,$provide, azMessages) {
$routeProvider.when('/login', {
resolve: {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
require([
//load required Js file here
], function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
} ]
}
});
$routeProvider.otherwise({ redirectTo: '/login' });
window.angularApp.components = {
controller: $controllerProvider.register,
service: $provide.service,
directive: $compileProvider.directive
}
//contoller declaration
angularApp.components.controller('DiscussionController',[function(){
}]);

At first I utilized André Betiolo's answer. However, it does not always work becasue the ajax loading is non-blocking causing the view to sometimes request the controller prior to the script being loaded.
As a solution i forced the function not to return until all scripts successfully loaded. This is kind of hackish but makes sure the loads are successful prior to completing the resolve. It also allows for loading of multiple controllers.
app.js
var app = angular.module ('app', ['ngRoute']);
app.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider){
/*Creating a more synthesized form of service of $ controllerProvider.register*/
app.registerCtrl = $controllerProvider.register;
//jquery to dynamically include controllers as needed
function controllers(controllers){
var numLoaded = 0;
for (i = 0; i < controllers.length; i++) {
$.ajaxSetup({async:false});
$.getScript('js/controllers/' + controllers[i] + '.js').success(function(){
numLoaded++;
if (numLoaded == controllers.length) {
return true; //only return after all scripts are loaded, this is blocking, and will fail if all scripts aren't loaded.
}
});
}
}
$routeProvider
.when('/', {
templateUrl: 'views/foo.html',
resolve: {
load: function () {
controllers(['foo'])
}
}
})
.when('/bar',{
templateUrl: 'views/bar.html',
controller: 'BarCtrl',
resolve: {
load: function () {
controllers(['bar','foo']) //you can load multiple controller files
}
}
})
.otherwise({
redirectTo: document.location.pathname
});
}]);
/views/foo.html
<section ng-controller='FooCtrl'>
{{text}}
</section>
/views/bar.html
<section ng-controller='BarCtrl'>
{{text2}}
</section>
<section ng-controller='FooCtrl'>
{{text}}
</section>
/controllers/bar.js
app.registerCtrl('BarCtrl',function($scope){
$scope.text2 = 'Test';
});

You can have pure AngularJS lazy loading.
Create "LazyService":
var ng = angular.module('app');
ng.factory('lazyService', [ '$http', function($http) {
var jsPath = 'js/${ name }.js';
var promisesCache = {};
return {
loadScript: function(name) {
var path = jsPath.replace('${ name }', name);
var promise = promisesCache[name];
if (!promise) {
promise = $http.get(path);
promisesCache[name] = promise;
return promise.then(function(result) {
eval(result.data);
console.info('Loaded: ' + path);
});
}
return promise;
}
}
}]);
Then, define your config:
var ng = angular.module('app', [ 'ngRoute' ]);
ng.config([ '$routeProvider', '$controllerProvider', '$provide', function($routeProvider, $controllerProvider, $provide) {
// Lazy loading
ng.lazy = {
controller: $controllerProvider.register,
//directive: $compileProvider.directive,
//filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
}
$routeProvider
.when('/', {
templateUrl: 'view/home.html'
})
.when('/vendor', {
templateUrl: 'view/vendor.html',
resolve: {
svc: [ 'lazyService', function(lazyService) {
return lazyService.loadScript('services/vendor');
}],
ctrl: [ 'lazyService', function(lazyService) {
return lazyService.loadScript('controllers/vendor');
}]
}
});
. . .
On "js/services/vendor.js", create service as:
var ng = angular.module('app');
ng.lazy.service('vendorService', [ function() {
. . .
On "js/controllers/vendor.js", create controller as:
var ng = angular.module('app');
ng.lazy.controller('vendorController', [ function() {
. . .
The "resolve" property on when defines which promises should be resolved before route loads.

The best way to do what you are asking is to instead use a directive and tie the controller and template together that way so its bound at the appropriate time. Currently, the binding it not happening in lazy.htm at the right time unless you declare a global function as you've shown in your second example.

Ideally - Angular will force you to separate HTML and JS as in newer versions this may be enforced more often.
You may have to use requireJS
http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/
For the sake of trick can you try
ng-controller-controller="'lazy'"
or
In HTML
ng-controller-controller="myObject.controller"
Somewhere inject
$scope.myObject.controller = $controller('lazy', {$scope: $scope})

Try this ARI plugin for Angular JS. It helps you to lazy load the controller scripts on demand.

You also can use Directives to load your controller!
A example here:
https://gist.github.com/raphaelluchini/53d08ed1331e47aa6a87

I am sending you sample code. It is working fine for me. So please check this:
var myapp = angular.module('myapp', ['ngRoute']);
/* Module Creation */
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$controllerProvider', function ($routeProvider, $controllerProvider) {
app.register = {
controller: $controllerProvider.register,
//directive: $compileProvider.directive,
//filter: $filterProvider.register,
//factory: $provide.factory,
//service: $provide.service
};
// so I keep a reference from when I ran my module config
function registerController(moduleName, controllerName) {
// Here I cannot get the controller function directly so I
// need to loop through the module's _invokeQueue to get it
var queue = angular.module(moduleName)._invokeQueue;
for (var i = 0; i < queue.length; i++) {
var call = queue[i];
if (call[0] == "$controllerProvider" &&
call[1] == "register" &&
call[2][0] == controllerName) {
app.register.controller(controllerName, call[2][1]);
}
}
}
var tt = {
loadScript:
function (path) {
var result = $.Deferred(),
script = document.createElement("script");
script.async = "async";
script.type = "text/javascript";
script.src = path;
script.onload = script.onreadystatechange = function (_, isAbort) {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
if (isAbort)
result.reject();
else {
result.resolve();
}
}
};
script.onerror = function () { result.reject(); };
document.querySelector(".shubham").appendChild(script);
return result.promise();
}
}
function stripScripts(s) {
var div = document.querySelector(".shubham");
div.innerHTML = s;
var scripts = div.getElementsByTagName('script');
var i = scripts.length;
while (i--) {
scripts[i].parentNode.removeChild(scripts[i]);
}
return div.innerHTML;
}
function loader(arrayName) {
return {
load: function ($q) {
stripScripts(''); // This Function Remove javascript from Local
var deferred = $q.defer(),
map = arrayName.map(function (obj) {
return tt.loadScript(obj.path)
.then(function () {
registerController(obj.module, obj.controller);
})
});
$q.all(map).then(function (r) {
deferred.resolve();
});
return deferred.promise;
}
};
};
$routeProvider
.when('/first', {
templateUrl: '/Views/foo.html',
resolve: loader([{ controller: 'FirstController', path: '/MyScripts/FirstController.js', module: 'app' },
{ controller: 'SecondController', path: '/MyScripts/SecondController.js', module: 'app' }])
})
.when('/second', {
templateUrl: '/Views/bar.html',
resolve: loader([{ controller: 'SecondController', path: '/MyScripts/SecondController.js', module: 'app' },
{ controller: 'A', path: '/MyScripts/anotherModuleController.js', module: 'myapp' }])
})
.otherwise({
redirectTo: document.location.pathname
});
}])
And in HTML Page:
<body ng-app="app">
<div class="container example">
<!--ng-controller="testController"-->
<h3>Hello</h3>
<table>
<tr>
<td>First Page </td>
<td>Second Page</td>
</tr>
</table>
<div id="ng-view" class="wrapper_inside" ng-view>
</div>
<div class="shubham">
</div>
</div>
Thank U

Related

How to Initialize third party JavaScript asynchronous library before loading AngularJS

I'm facing problem while initializing a third party JavaScript API (iHUB) inside RUN method of AngularJS. Currently the code is behaving in asynchronous mode. I want IHUB to first initialize and then AngularJS route/controller should get called. (Is it possible to make utilization of the callback method provided by IHUB ?)
var nameApp = angular.module('nameApp', ['ngRoute']);
nameApp.run(['$window', 'myService', function($window, myService) {
//initialize IHUB
var actuate= new actuate();
actuate.initialize('http://localhost:8700/iportal', settings.reqOps, "user", "pwd", callback);
function callback(){
alert('started!!');
}
}]);
nameApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:tabname', {
templateUrl: 'pages/analyticsDetail.html',
controller: 'tabDetailCtrl'
}).
when('/:tabname/:reportName', {
templateUrl: 'pages/analyticsDetail.html',
controller: 'reportDetailCtrl'
}).
otherwise({
redirectTo: '/Buy Side Dashboard'
});
}]);
There is only one way to achieve a "real" before AngularJS initialization behavior by using angular.bootstrap();. This allows you to initialize your AngularJS application manually.
Note: You should not use the ng-app directive when manually bootstrapping your app.
> Fiddle demo
View
<div ng-controller="MyController">
Hello, {{greetMe}}!
</div>
Application
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);
var actuateDummy = {
initialize: function (callback) {
setTimeout(callback, 2500);
}
};
actuateDummy.initialize(function () {
angular.element(function() {
angular.bootstrap(document, ['myApp']);
});
})
This is an other approach which uses the resolve state of ui-router. This service only initializes iHUB if it not has been initialized yet:
This service also returns the actuate object. In that way you can use it in your controller or components after init.
> Demo fiddle
View
<nav>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</nav>
<div ui-view></div>
AngularJS Application
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("state1", {
url: "#",
template: "<p>State 1</p>",
controller: "Ctrl1",
resolve: {
iHubInit: function(iHubService) {
return iHubService.init()
}
}
}).state("state2", {
url: "#",
template: "<p>State 2</p>",
controller: "Ctrl2",
resolve: {
iHubInit: function(iHubService) {
return iHubService.init()
}
}
});
});
myApp.controller("Ctrl1", function($scope, iHubService) {
console.log("Ctrl1 loaded.");
});
myApp.controller("Ctrl2", function($scope, iHubService) {
console.log("Ctrl2 loaded.");
});
myApp.service('iHubService', ["$q", function($q) {
this.iHubServiceInitialized = false;
this.actuate = null;
this.init = function() {
if (!this.iHubServiceInitialized) {
//Init
var self = this;
var deferred = $q.defer();
this.actuate = new actuate();
//initialize
this.actuate.initialize('http://localhost:8700/iportal', settings.reqOps, "user", "pwd", function() {
self.iHubServiceInitialized = true;
deferred.resolve(self.actuate);
});
return deferred.promise;
} else {
return this.actuate;
}
}
}]);
Try to add a resolve attribute when configuring your route provider like below:
var nameApp = angular.module('nameApp', ['ngRoute']);
nameApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:tabname', {
templateUrl: 'pages/analyticsDetail.html',
controller: 'tabDetailCtrl',
resolve: {
ihubInit: ['iHubService', function (iHubService) {
return iHubService.init();
}]
}
}).
when('/:tabname/:reportName', {
templateUrl: 'pages/analyticsDetail.html',
controller: 'reportDetailCtrl',
resolve: {
ihubInit: ['iHubService', function (iHubService) {
return iHubService.init();
}]
}
}).
otherwise({
redirectTo: '/Buy Side Dashboard'
});
}]);
nameApp.service('iHubService', ["$q", function($q){
this.init = function() {
var deferred = $q.defer();
var actuate= new actuate();
actuate.initialize('http://localhost:8700/iportal', settings.reqOps, "user", "pwd", callback);
function callback(){
deferred.resolve();
}
return deferred.promise;
}
}]);

Angular controller scope/variables not appearing

I'm trying to clean up my code such that it corresponds to John Papa's Angular style guide but in the process broke something and my controller no longer appears in ng-inspector. If I can get vm.message to display I can figure out the rest (though any general feedback is appreciated :))
(function () {
"use strict";
angular
.module('roomchoice.manager-dashboard.alerts', [
'ui.router'
])
.config(function config($stateProvider) {
$stateProvider.state('manager.alerts', {
url: '/alerts',
views: {
"main": {
controller: 'AlertsController',
templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
}
},
data: {
pageTitle: 'Alerts'
}
});
})
.controller('AlertsController', AlertsController);
function AlertsController($scope, Restangular) {
var vm = this;
vm.message = "Hello";
vm.settlements = [];
vm.undepositedPayments = [];
vm.unapprovedFunnels = [];
vm.getSettlements = getSettlements;
vm.getUndepositedPayments = get_UndepositedPayments;
vm.getUnapprovedFunnels = get_unapprovedFunnels;
function getSettlements() {
Restangular.all('alerts/get_settlements').getList().then(function(settlements){
vm.settlements = settlements;
return vm.settlements;
});
}//End of getSettlements
function getUndepositedPayments() {
Restangular.all('alerts/get_undepositedpayments').getList().then(function(undepositedpayments){
vm.undepositedPayments = undepositedpayments;
return vm.undepositedPayments;
});
}//End of getUndepositedPayments
function getUnapprovedFunnels() {
Restangular.all('alerts/get_unapprovedfunnels').getList().then(function(unapprovedfunnels){
vm.unapprovedFunnels = unapprovedfunnels;
return vm.unapprovedFunnels;
});
}//End of getUnapprovedFunnels
}//End of Controller
})();//End of Module
<div id="main" ng-controller="AlertsController as alerts">
<div>
<h1>Alerts (Under Construction) </h1>
<h2>{{alerts.message}}</h2>
</div>
</div>
You are trying to instantiate your controller more than once in your code, and this won't work the way you expect.
You should not use ng-controller in templates that are part of a state. The controller is defined by the state provider, and does not be instantiated inside the template.
Remove ng-controller from your template, and add controllerAs to your state:
$stateProvider.state('manager.alerts', {
url: '/alerts',
views: {
"main": {
controller: 'AlertsController',
controllerAs: 'alerts',
templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
}
},
data: {
pageTitle: 'Alerts'
}
});

Angular service that is instantiated on every page change/request

So, I'm making my first steps in AngularJS (1.5) and I'm trying to build a feature that will let me change few things in my layout based on the route.
As far as I understood I needed a service for this. Basically the setup I have is:
'use strict';
/* App Module */
var app = angular.module('app', [
'ngRoute',
'appControllers',
'AppServices'
]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
template: '<h1>Home page</h1>',
controller: 'MainController'
}).when('/page', {
template: '<h1>Page</h1>',
controller: 'PagesController'
}).otherwise({
redirectTo: '/'
});
}]);
var appControllers = angular.module('appControllers', []);
appControllers.controller('MainController', ['$rootScope', 'AppSetup', function($scope, AppSetup) {
$scope.app = AppSetup.build();
console.log('home');
}]);
appControllers.controller('PagesController', ['$rootScope', 'AppSetup', function($scope, AppSetup) {
AppSetup.setProperties({
meta: {
title: 'My Second Page'
}
});
console.log('page');
$scope.app = AppSetup.build();
}]);
var AppServices = angular.module('AppServices', []);
AppServices.service('AppSetup', [function() {
var properties = {
meta: {
title: 'My App • Best of the best'
}
},
styles;
this.setProperties = function(input) {
this.properties = angular.extend(properties, input);
};
//TODO: This will override app-wide styles.
this.setStyles = function(input) {
this.styles = angular.extend({}, input);
};
this.build = function() {
return {
properties: properties,
styles: styles
};
};
}]);
Plunkr here
So I have one defined properties object and want to override it when I visit a page. The problem is that when I go back to home, it doesn't set the default value. Obviously it's instantiated once the page is loaded and then remains the same until changed.
What's the best approach to do this?
I have tried adding a listener to the route, as #Raul A. suggested, but it's not working. Output from console:
Plunkr here
You can use the $routeChangeSuccess event if you are using routing and make changes in the function watching for it:
$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
//Do you changes here
});

Load controllers dynamically

I am trying to set up an angular application that will load controllers dynamically according to the route. I am following this tutorial, but I can't get it to work. I also made some small modifications to the tutorial code that suit me, but I don't think they are the problem.
I have put almost all of my code-flow here, so if you want to skip it, the errors are in the last snippets.
Note: I have changed the code snippets as I progressed.
index.html base file (I removed the ng-app and ng-controller parameters, as I realized that I call them manually with RequireJS):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Little Buddha</title>
<link type="text/css" rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script type="text/javascript" src="assets/libs/requirejs/require.js" data-main="app/main.js"></script>
</body>
</html>
As you can see, I am using RequireJS to load all scripts dynamically. Here's the main.js configuration file:
(I also edited this file, adding angular and ngRoute to the shim config)
require.config({
baseUrl: '',
urlArgs: 'dev=' + new Date().getTime(),
paths: {
'angular' : '/assets/libs/angular/angular.min',
'ngRoute' : '/assets/libs/angular-route/angular-route.min',
'routeResolver' : '/app/routeResolver',
'app' : '/app/app',
'constants' : '/app/global/constants',
'AuthService' : '/app/global/AuthService',
'AppController' : '/app/global/AppController',
},
shim: {
'angular' : {
exports : 'angular',
},
'ngRoute' : {
deps : ['angular'],
},
}
});
require(
[
'ngRoute',
'app',
'routeResolver',
'constants',
'AppController',
'AuthService',
],
function () {
angular.bootstrap(document, ['littleBuddha']);
}
);
routeResolver.js
'use strict';
define([], function () {
var routeResolver = function () {
this.$get = function () {
return this;
};
this.route = function () {
var resolve = function (baseName, path, secure) {
if (!path) path = '';
var routeDef = {};
routeDef.templateUrl = path + baseName + '.html';
routeDef.controller = baseName + 'Controller';
routeDef.secure = (secure) ? secure : false;
routeDef.resolve = {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var dependencies = [path + baseName + 'Controller.js'];
return resolveDependencies($q, $rootScope, dependencies);
}]
};
return routeDef;
},
resolveDependencies = function ($q, $rootScope, dependencies) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply()
});
return defer.promise;
};
return {
resolve: resolve
}
};
};
var servicesApp = angular.module('routeResolverServices', []);
//Must be a provider since it will be injected into module.config()
servicesApp.provider('routeResolver', routeResolver);
});
app.js
'use strict';
define(['routeResolver'], function () {
var app = angular.module('littleBuddha', ['routeResolverServices']);
app.config(['$routeProvider', 'routeResolverProvider', '$controllerProvider',
'$compileProvider', '$filterProvider', '$provide',
function ($routeProvider, routeResolverProvider, $controllerProvider,
$compileProvider, $filterProvider, $provide) {
console.log('test');
app.register =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
var route = routeResolverProvider.route;
$routeProvider
.when('/login', route.resolve('Login', '/app/components/login/'))
.otherwise({ redirectTo: '/login' });
}
]);
return app;
});
And finally, AppController.js:
'use strict';
define(['app'], function (app) {
//This controller retrieves data from the customersService and associates it with the $scope
//The $scope is ultimately bound to the customers view due to convention followed by the routeResolver
app.register.controller('AppController', function ($scope, USER_ROLES, AuthService) {
$scope.currentUser = null;
$scope.userRoles = USER_ROLES;
$scope.isAuthorized = AuthService.isAuthorized;
$scope.setCurrentUser = function (user) {
$scope.currentUser = user;
};
});
return app;
});
EDIT
So, now I have located the problem. In app.js, app.config function is never called, so the register parameters are never applied and the routes are never computed. Actually, that console.log('test') is never printed.
I think its because you are not initializing the route in routeResolver.
Notice in the tutorial they run the routeResolver immediately with their routeConfig. I can not see where you initialize the this.route function.
From the tutorial:
this.route = function (routeConfig) {
var resolve = function (baseName, path, secure) {
if (!path) path = '';
var routeDef = {};
routeDef.templateUrl = routeConfig.getViewsDirectory() + path + baseName + '.html';
routeDef.controller = baseName + 'Controller';
routeDef.secure = (secure) ? secure : false;
routeDef.resolve = {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var dependencies = [routeConfig.getControllersDirectory() + path + baseName + 'Controller.js'];
return resolveDependencies($q, $rootScope, dependencies);
}]
};
return routeDef;
},
resolveDependencies = function ($q, $rootScope, dependencies) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply()
});
return defer.promise;
};
return {
resolve: resolve
}
}(this.routeConfig);
Yours:
this.route = function (routeConfig) {
var resolve = function (baseName, path, secure) {
if (!path) path = '';
var routeDef = {};
routeDef.templateUrl = path + baseName + '.html';
routeDef.controller = baseName + 'Controller';
routeDef.secure = (secure) ? secure : false;
routeDef.resolve = {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var dependencies = [path + baseName + 'Controller.js'];
return resolveDependencies($q, $rootScope, dependencies);
}]
};
return routeDef;
},
resolveDependencies = function ($q, $rootScope, dependencies) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply()
});
return defer.promise;
};
return {
resolve: resolve
}
};
Notice in yours that this function is not executed.
So I think you need to run this function with a routeConfig object to get it defined and working.
EDIT: even if you don't want a routeConfig object (which seems to be your aim) you still need to run the function with no parameter passed.
Last ideas from me:
Sorry I can't be more help. I will try 2 more suggestions and thats me out i'm afraid.
You say app.config is never called. That might be something to do with load order. Try this in your main.js.
require(
[
'ngRoute',
'app',
'routeResolver',
'constants',
'AppController',
'AuthService',
],
function () {
angular.element(document).ready(function() {
angular.bootstrap(document, ['littleBuddha']);
});
}
);
OR, it never gets called because the line
define(['routeResolver'], function () {
Means that it tries to load routeResolver first. If there is some exception in routeResolver then it will fail hitting the function to setup app at all. In which case I would suggest debugging through to see how far you actually get through routeResolver.js on load.
Thats me out of ideas, when i'm stuck like that, i usually start by getting a version working exactly like the demo and then work backwards to what I actually want step by step to see when it stops working.
Good luck, sorry I couldn't be more help.

AngularJS controller is not a function

I can't find the mistake in my application.
The error stack that i receive is this one:
Error: [ng:areq] Argument 'RepoController' is not a function, got undefined
Here is the code of app.js
(function() {
var app = angular.module('gitHubViewer',["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.when("/user/:username", {
templateUrl: "user.html",
controller: "UserController"
})
.when("/repo/:usermane/:reponame", {
templateUrl: "repo.html",
controller: "RepoController"
})
.otherwise({
redirectTo:"/main"
});
});
}());
here is the code of the controller
(function() {
var module = angular.module('gitHubViewer');
var RepoController = function($scope, github, $routeParams) {
var onRepoDetailsComplete = function(data) {
$scope.issues = data;
github.getRepoCotributors($score.username, $scope.reponame).then(onRepoCotributorsComplete,onError);
};
var onRepoCotributorsComplete = function(data) {
$scope.repoContribuors = data;
};
var onError = function(reason) {
$scope.error = reason;
}
$scope.username = $routeParams.username;
$scope.reponame = $routeParams.reponame;
github.getRepoDetails($score.username, $scope.reponame).then(onRepoDetailsComplete,onError);
};
module.controller('RepoController',["$scope","github","$routeParams",RepoController]);
}());
Can you please have a look becuase I really can't find teh mistake that I made.
Regards
Fabio
Where does "$score.username" come from?
github.getRepoDetails($score.username, $scope.reponame)
I think that you are missing a dependency for the $score or you have just misspelled $scope.

Categories