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)
{
//...
}
]);
});

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.

Error: Unknown provider - Karma, requirejs, angular

I get this error when i try to make a test
Error: [$injector:unpr] Unknown provider: $translateProvider <- $translate
I'm using karma with requirejs.
loadingCtrlSpec.js
define([
'angular',
'angular-mocks',
'app',
'angular-translate'
], function(angular, mocks, app) {
'use strict';
describe('loadingCtrl', function(){
var ctrl, scope, translate;
beforeEach(mocks.module('TestApp'));
beforeEach(inject(function($injector){
scope = $injector.get('$rootScope').$new();
translate = $injector.get('$translate');
}));
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
});
loadingCtrl.js
define(['angular'], function (angular) {
'use strict';
angular.module('TestApp', [])
.controller('loadingCtrl', ['$scope', '$translate', function($scope, $translate) {
$translate(['build.DEFAULT_EMAIL_SUBJECT','build.DEFAULT_EMAIL_NOTES']).then(function (translations) {
$scope.title = translations["build.DEFAULT_EMAIL_SUBJECT"];
$scope.notes = translations["build.DEFAULT_EMAIL_NOTES"];
});
}]); })
If i don't use angular-translate ($translate) everything is working so i don't think the problem is from karma.conf.js or test-main.js (require.conf for karma).

Your TestApp module will need to specify the pascalprecht.translate module as a dependency. Also be sure to include angular-translate as a dependency when defining your main module so the relevant script gets loaded:
define(['angular', 'angular-translate'], function (angular) {
angular.module('TestApp', ['pascalprecht.translate']);
});

How to Require Angular Controllers

Im new to Angularjs and i am trying to integrate with my application that uses RequireJS. I have the application working on a test page using the ng-submit. However, in my app.js file i dont think i am "require"ing my controllers in the best way.
I am using AngularJS v1.1.5
Here's my tree:
resources
- CSS
- js
- controllers
- TestController1.js
- TestController2.js
- TestController3.js
- TestController4.js
- TestController5.js
- libs
- angular.js
- jquery.js
- require.js
- mondernizr.js
......
......
......
main.js
app.js
pages
test1.html
test2.html
test3.html
test4.html
test5.html
main.js
(function(require) {
'use strict';
require.config({
baseUrl: '/libs',
paths: {
'zepto' : 'zepto',
'jquery' : 'jquery',
'angular' : 'angular',
'router' : 'page',
'history' : 'history.iegte8',
'event' : 'eventemitter2'
},
shim: {
'zepto' : { exports: '$' },
'angular' : { deps: ['jquery'], exports: 'angular' },
'app' : { deps: ['angular'] },
'router' : { exports: 'page'},
'modernizr' : { exports: 'Modernizr' }
}
});
require(['angular', 'app'], function(angular) {
'use strict';
angular.bootstrap(document, ['app']);
});
})(this.require);
app.js
define("app", ["angular"], function(angular){
var app = angular.module("app", []);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when("/test1", {
templateUrl: "test1.html",
controller: "TestController1"
})
.when("/test2", {
templateUrl: "test2.html",
controller: "TestController2"
})
.when("/test3", {
templateUrl: "test3.html",
controller: "TestController3"
})
.when("/test4", {
templateUrl: "test4.html",
controller: "TestController4"
})
.when("/test5", {
templateUrl: "test5.html",
controller: "TestController5"
})
.otherwise({ redirectTo: '/test1'});
});
return app;
});
require(["app", "controllers/TestController1"]);
require(["app", "controllers/TestController2"]);
require(["app", "controllers/TestController3"]);
require(["app", "controllers/TestController4"]);
require(["app", "controllers/TestController5"]);
TestController1-5.js
require(['app'], function(app) {
app.controller("TestController1", function($scope) {
$scope.clickMe = function() {
alert('TestController1.js is responding');
$scope.title = "Title";
$scope.data = {message: "Hello"};
$scope.message = "Hello World!";
};
});
});
test1-5.html
<div ng-controller="TestController1">
<form ng-submit="clickMe()">
<div>
<button type="submit">Test TestController1</button>
</div>
</form>
{{ data.message + " world" }}
{{ title }}
</div>
Equally if you think there are other ways i can improve my code and code structure feel free to suggest.
Thanks

Maybe you could just improve your code by making an "app.controllers" module that will be in charge of loading all your controllers. Then in your app.js, you just add this module as dependency.
So for instance.
app/controllers/MyController.js:
define(['angular'], function(angular) {
return angular.module('app.controllers.MyCtrl', [])
.controller('MyCtrl', [function(){
[...]
}]);
app/controllers.js:
define([
'angular',
'app/controllers/MyController'
],
function(angular) {
return angular.module('app.controllers', [
'app.controllers.MyCtrl'
]);
});
app/app.js:
define("app", "app/controllers", ["angular"], function(angular){
var app = angular.module("app", ['app.controllers']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when("/my", {
templateUrl: "my.html",
controller: "MyCtrl"
})
.otherwise({ redirectTo: '/test1'});
});
return app;
});
You could also load controllers asynchronously this way for instance:
angular.module('myApp.controllers', [])
.controller('MyCtrl', ['$scope','$injector', function($scope, $injector){
require(['app/controllers/MyController'], function(MyCtrl){
$injector.invoke(MyCtrl, this,{'$scope':$scope});
});
}]);
The downpoint of this kind of loading is that you will have to manually call $scope.$apply(); in order to manually ask for a digest otherwise your scope modifications on this controller will not be taken into account as it is with "standard" loading.
However, I will not recommend this kind of loading. In the end when the code is minified and optimized in one file with r.js, it does not make much sense to "lazy load" code.

Integrating AngularJS with RequireJS

Due This Article I try to create an application with AngularJS and RequireJS!
I can load angular library... create module and export it to external files! It's ok!
But the problem is I can't create configuration and controllers for my module both in main application file and external files!
Another issue is I can't load views and controllers in app.js via $routeProvider!!
(Sorry for grammer problems!)
app.js:
require.config({
baseUrl: "/angularjs/js",
paths: {
"angular": "libs/angular.min"
},
shim: {
"angular": {
exports: "angular"
}
}
});
define('app', ['angular'], function(angular){
var app = angular.module('myApp', []);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeCtrl'
templateUrl: 'views/home.html'
});
});
return app;
});
require(["app", "controllers/homeController"]);
controllers/homeController.js:
require(["app"], function(app) {
app.controller("HomeCtrl",
function($scope) {
$scope.message = "Hello World!";
}
);
});
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Angular.js</title>
<script type="text/javascript" data-main="js/" src="js/libs/require.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
views/home.html:
<div ng-controller="HomeCtrl">
<h1>{{messge}}</h1>
</div>

Here is my version of your example. With a few changes it works fine.
It is better to bootstrap AngularJs application manually, when RequireJs.
I separated app.js file in two: main.js - with configuration of RequireJs and app.js - with AngularJs module declaration. Later, this module is used by homeController for declaration of controller. Then, the controller is required in main.js and the application is bootstrapping.

I do the angular and requireJS integration placing NG_DEFER_BOOTSTRAP! flag and have separate files for my app config and routing like in:
require.config({
baseUrl: 'js/',
paths: {
angular: '../lib/bower_components/angular/angular.min',
angularRoute: '../lib/bower_components/angular-route/angular-route.min'
},
shim: {
'angular': {
'exports': 'angular'
},
'angularRoute':{
'deps': ['angular']
}
},
priority: [
'angular'
]
});
//https://docs.angularjs.org/guide/bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'routes'
], function(angular, app, routes) {
'use strict';
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
app.js:
define([
'angular',
'filters',
'services',
'directives',
'controllers',
'animations',
'angularRoute'
], function (angular) {
'use strict';
return angular.module('myapp', [
'ngRoute',
'ngCookies',
'ngAnimate',
'myapp.services',
'myapp.directives',
'myapp.filters',
'myapp.controllers',
'myapp.animations'
]);
});
and routes.js:
define(['angular', 'app'], function(angular, app) {
'use strict';
return app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).
otherwise({
redirectTo: '/home'
});
}])
});
hope this helps in your scenario.