We Keep Coding

How to resolve dependencies for a project using AngularJS and RequireJS?

I have a simple AngularJS application which I am trying to refactor to use RequireJS.
Since controllers and services are loaded async, I can't use ng-app in my index.html.
Following is my main.js
require.config({
paths: {
"angular": '../../bower_components/angular/angular',
"angularCookies": '../../bower_components/angular-cookies/angular-cookies'
},
shim: {
angular: {
exports: "angular"
},
angularCookies : {
deps: ["angular"]
}
}
});
require(['angular', './login/js/login'],
function (angular) {
angular.bootstrap(document, ['loginApp']);
}
);
My login.js is where I am defining an angular module.
Following is my login.js
'use strict';
define(['angular',
'angularCookies',
'./login.controller'],
function(angular, angularCookies, loginController) {
angular.module('loginApp', [
'ngCookies'])
.config(['$cookiesProvider',
function($cookiesProvider) {
$cookiesProvider.defaults.path = '/';
$cookiesProvider.defaults.domain = 'localhost';
}
])
.run(['$cookies',
'loginService',
function($cookies, loginService) {
}
]).controller(loginController);
});
As seen, it is dependent on loginController and loginController is dependent on loginService.
My loginService is defined as --
"use strict";
define(['angular',
'angularCookies'],
function (angular, angularCookies) {
var loginService = angular.module('loginApp')
.factory('loginService', [
'$http',
'$cookies',
function ($http, $cookies) {
// My functions and other code here.
}]);
return loginService;
});
With this configuration I am getting an error -
Module 'loginApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What am I missing here?
What configuration do I need to do to make it right?

I see a couple of problems. First the app shouldn't be created inside login. The app is the base of all controllers and services.
So I would move the app creation to another file called app.js.
Then in my require config:
shim: {
'app': {
deps: ['angular', 'angular-route', 'angularCookies']
},
angularCookies : {
deps: ["angular"]
}
}
And:
require
(
[
'app'
],
function(app)
{
angular.bootstrap(document, ['loginApp']);
}
);
And then your controller would be:
define(['loginApp'], function(app)
{
app.controller('loginController',
[
'$scope',
function($scope)
{
//...
}
]);
});

Lazy load AngularJS controllers with Webpack

I am using AngularJS 1.5.6 with Webpack.
My files architecture is:
app
|- scripts
| |- modules
| |- homepage
| |- homepage.js
| |- controller
| |- HomepageController.js
|- app.js
|- index.html
The webpack.config (please tell me if you need to see more of this file):
module.exports = {
context : __dirname + "/app",
entry : {
main: "./app.js",
vendor: [
'angular',
'angular-route'
]
},
[...]
};
index.html contains the import of the the js files:
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
In apps.js:
(function () {
'use strict';
require('./scripts/modules/homepage/homepage');
angular.module("NgAppProject", [
'ngRoute',
'ng',
'Homepage'
]);
})();
In homepage.js:
(function () {
'use strict';
angular.module('Homepage', [
'ngRoute',
'ng'
])
.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {
$routeProvider
.when('/home', {
templateUrl: 'scripts/modules/homepage/views/homepage.html',
controller: 'HomepageController',
controllerAs: 'homepageController',
resolve: {
deps: function() {
return require.ensure([], function (require) {
$controllerProvider.register("HomepageController", require('./controllers/HomepageController'));
}, '_homepage');
}
}
});
}]);
})();
The Problem:
When I start my app and go to localhost:8080/#/home, I get the error:
Error: [ng:areq] Argument 'HomepageController' is not a function, got undefined
I think it can't find my controller, but I can't figure out why.
However this works fine:
angular.module('Homepage', [
'ngRoute',
'ng'
])
.config(//config here)
.controller("HomepageController", require('./controllers/HomepageController'));
I would really welcome any help, thank you!

I think that require.ensure not return promise. So, you can try this approach:
resolve: {
deps: ['$q', function($q) {
var deferred = $q.defer();
require.ensure([], function(require) {
$controllerProvider.register("HomepageController", require('./controllers/HomepageController'));
deferred.resolve();
}, '_homepage');
return deferred.promise;
}]
}

AngularJS controller does not run on RequireJS config

I am trying to configure an web app with requireJS and angularJS. I come from marionette configuration and I am trying to have a similar one in angular (in concepts like views and controllers) first so I want to be able to map #/test to my controller and log in the console one message.
I've seen Does AngularJS support AMD like RequireJS? and RequireJS and AngularJS and I kind of got the differences and from my point of view my config should work... but it does not...
Here is my code:
File: app.config.js
require.config({
shim: {
angular: {
exports: 'angular'
},
angularRoute: ['angular']
},
paths: {
angular: '../lib/angular',
angularRoute: '../lib/angular-route'
}
});
require(['angular', 'app', 'routes/index'], function (angular) {
angular.bootstrap(document, ['app']);
});
File: app.js
define(['angular', 'angularRoute'], function (angular) {
//angular.module('app.controllers', []);
var app = angular.module('app', ['ngRoute']);
return app;
});
File: routes/index.js
define(['angular', 'app', 'controllers/index'], function (angular, app) {
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', { templateUrl: require.toUrl('/resources/js/app/templates/test.html'), controller: 'indexController'});
}]);
});
File: controllers/index.js
define(['angular', 'app'], function (angular, app) {
//var appControllers = angular.module('app.controllers');
app.controller('indexController', ['$scope', function ($scope) {
console.log('cascade...');
}]);
});
What am i missing? When i access #/test, i don't see "cascade" in the console, should I?.. Right?
Thanks in advance.

Angular + Requirejs - how to return multiple modules?

How can I return multiple angular modules in requirejs environment?
this is my app.js,
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return ng.module('myApp', ['ngRoute']);
});
And I need a few more modules to return,
ng.module('myAppModule1', ['ngRoute']);
ng.module('myAppModule2', ['ngRoute']);
ng.module('myAppModule3', ['ngRoute']);
a controller example, for instance I want to get 'myAppModule3' in app.js,
define(['app'], function (app) {
var myAppModule = angular.module('myAppModule3');
myAppModule.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
}]);
});

You could change app.js to return an object whose fields are the modules:
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return {
myApp: ng.module('myApp', ['ngRoute']),
myAppModule1: ng.module('myAppModule1', ['ngRoute']),
myAppModule2: ng.module('myAppModule2', ['ngRoute']),
myAppModule3: ng.module('myAppModule3', ['ngRoute'])
};
});
And change your controller like this:
define(['app'], function (app) {
app.myAppModule3.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
}]);
});

The generic (non-Angular specific) way is to use an object:
return {module1: /*..*/, module2: /*...*/ };
Then you just access to the values:
define(['app'], function (app) {
var module1 = app.module1;
});
However in Angular you just registered 'myAppModule1' in the Angular global. There is no need to do the object return, you can retrieve the registered module using the angular object:
define(['angular'], function (angular) {
var module1 = angular.module('myAppModule1');
// without extra parameter it tells angular to retrive an existing
// module
});
Update: I just realize that you did it in your code. It didn't worked? Maybe be you have a dependency issue, make sure that app.js is loaded first.

AngularJs $injector:modulerr after RequireJS r.js optimization

The AngularJS-RequireJS app im building is throwing Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: e error after r.js optimization . The problem didnt exist before . I followed a similar question at this link and added mainConfigFile to the build file , but still the problem persists . Here are the codes the respective files
build.js
({
mainConfigFile:'js/main.js',
appDir: "./",
baseUrl: "js",
dir: "/home/karthic/optimized-test",
modules: [
{
name: "main"
}
]
})
main.js
require.config({
baseUrl: './js',
paths: {
angular: 'libs/angular-1.2.9',
angularRoute: 'libs/angular-route-1.2.9'
},
shim: {
'angularRoute': {
deps: ['angular'],
exports: 'angularRoute'
},
'angular': {
exports: 'angular'
}
}
});
require(['angular', 'controller', 'ang_when_routes', 'angularRoute'], function(angular, controller, angWhenRoutes, angularRoute) {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
angWhenRoutes.initRoutes(app);
controller.controllerInit(app);
});
controller.js
define(function() {
function controllerInit(app) {
console.log('inside func cont');
app.controller('mapApp', function($scope, $http, $location) {
console.log('inside mapp,testing r.js optimizer');
});
}
return {
controllerInit: controllerInit
}
});
ang_when_routes.js
define(function() {
function initRoutes(app) {
app.config(
function($routeProvider, $httpProvider) {
$httpProvider.defaults.withCredentials = true;
$routeProvider.
when('/', {
templateUrl: 'index_content.html',
controller: 'mapApp'
})
});
}
return {
initRoutes: initRoutes
}
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Optimizer error</title>
<script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
index_content.html
<p>Testing the r optimizer</p>
It'll be really helpful for me if the error can be fixed

Here is the answer as suggested by #radimKohler in the first comment . To avoid issues with angularJS during minification Inline array Annotation has to be used as referred in the Angular Documentation . Here is the modified code after the change
controller.js
define( function () {
function controllerInit(app) {
console.log('inside func cont');
app.controller('mapApp',['$scope','$http','$location', function ($scope, $http, $location) {
console.log('inside mapp,testing r.js optimizer');
}]);
}
return {
controllerInit: controllerInit
}
});
ang_when_routes.js
define(function(){
function initRoutes(app){
app.config(['$routeProvider','$httpProvider',
function($routeProvider,$httpProvider){
$httpProvider.defaults.withCredentials = true;
$routeProvider.
when('/',{
templateUrl:'index_content.html',
controller:'mapApp'
})
}]);
}
return {
initRoutes:initRoutes
}
});