We Keep Coding

Grunt Environment Variable Not Loading In Time

I am using grunt-ng-constant to load environment variables into my angular application. This seems to be working 95% correctly with the exception of loading the application. For instance, when i load the app i cannot gain access to the variables, so if i log the ENV base object it comes up as undefined. If i navigate to the next page i am able to log the ENV and gain access to my vars. It seems to me that the app is loading prior to loading the config.js and i am unsure how to change this.
index.html
<script src="scripts/app.js"></script>
<script src="scripts/config.js"></script>
....
app.js
angular
.module('serverSideConfiguratorApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'angularSpinner',
'smart-table',
'config'
])
gruntfile
ngconstant: {
qa: {
options: {
dest: 'app/scripts/config.js'
},
constants: {
ENV: {
name: 'qa',
server: [{
"name": "QA1 (232)",
"url": "http://xxxxx/"
}, {
"name": "QA2 (233)",
"url": "http://xxxxx/"
}, {
"name": "QA3 (LB)",
"url": "http://xxxxx//"
}]
}
}
}
}
I have tried making config.js first in my index.html but that has no affect. If anyone can provide any insight it would be greatly appreciated! Also, if you need more code or have any questions let me know.
Thanks

As suspected the answer was simple(and annoying). I did not know that injection order into a controller mattered so i had this:
angular.module('serverSideConfiguratorApp')
.controller('ModelsCtrl', [ '$scope', '$http', 'BaseURLService', 'configuratorService', '$q', '$timeout','$route', 'ENV',
function( $scope, $http, BaseURLService, configuratorService, $q, $timeout, ENV)
After changing to this (injecting ENV first):
angular.module('serverSideConfiguratorApp')
.controller('ModelsCtrl', ['ENV', '$scope', '$http', 'BaseURLService', 'configuratorService', '$q', '$timeout','$route',
function(ENV, $scope, $http, BaseURLService, configuratorService, $q, $timeout)
everything now works fine!

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

Angularjs load module based on conditions

i am using angularjs and gulp for my application.
here is my directory structure.
content of app.js is
'use strict';
angular.module('BlurAdmin', [
'ngAnimate',
'ui.bootstrap',
'ui.sortable',
'ui.router',
'ngTouch',
'ngRoute',
'ngStorage',
'MyApp.theme',
'MyApp.pages'
]).run(function ($rootScope, $sessionStorage) {
$rootScope.sessionStorage = $sessionStorage;
});
it load page.module.js
content of the page.module.js is
(function () {
'use strict';
var myApp = angular.module('MyApp.pages', [
'ui.router',
])
.config(routeConfig);
/** #ngInject */
function routeConfig($urlRouterProvider, baSidebarServiceProvider) {
$urlRouterProvider.otherwise('/dashboard');
}
var lazyModules = [
'MyApp.pages.dashboard',
'MyApp.pages.create',
'MyApp.pages.otherModule'
];
angular.forEach(lazyModules, function (dependency) {
myApp.requires.push(dependency);
});
})();
This will load all module as menu item in my page. i want to make it conditional based on type of loggedin users.
for that i have used $sessionStorage in .run of app.js, but i am not able to use it in pages.module.js
please help me to load module conditional for example if role is admin then only create module sould be loaded etc..
Thanks.

If i understand correctly you need require.js
Check role and go to page something like "/admin".
$routeProvider.when("/admin", angularAMD.route({
templateUrl: 'your.html', controller: 'createController',
controllerUrl: 'create'
})).when("/other", angularAMD.route({
templateUrl: 'your.html', controller: 'otherController',
controllerUrl: 'other'
}))
https://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single

Try someting like this:
(function () {
'use strict';
var myApp = angular.module('MyApp.pages', [
'ui.router',
])
.config(routeConfig)
.run(lazyModules);
/** #ngInject */
function routeConfig($urlRouterProvider, baSidebarServiceProvider) {
$urlRouterProvider.otherwise('/dashboard');
}
function lazyModules($sessionStorage) {
var userModules = [
'MyApp.pages.dashboard',
'MyApp.pages.otherModule'
];
var adminModules = [
'MyApp.pages.create',
'MyApp.pages.otherModule'
];
var isAdmin = $sessionStorage.admin;
var loadModules = isAdmin ? adminModules : adminModules;
angular.forEach(loadModules, function (dependency) {
myApp.requires.push(dependency);
});
}
})();

Need help setting up Karma (Getting an error)

I am new to Karma and would really appreciate any help understanding the reason for the error below:
Uncaught Error: [$injector:nomod] Module 'myApp.controllers' 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.
app.js
angular.module('myApp', [
'ngRoute',
'myApp.controllers',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(function ($routeProvider, $locationProvider) {
controllers.js
angular.module('myApp.controllers', []);
StoreCtrl.js
angular.module('myApp.controllers').
controller('StoreCtrl', ['$scope', '$http', function ($scope, $http) {
StoreCtrl.spec.js
describe('StoreCtrl', function() {
beforeEach(module('myApp.controllers'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the
// parameter names when matching
$controller = _$controller_;
}));
describe('$scope.filterByPrice', function() {
it('test spec', function() {
});
});
});
karma.conf.js
files: [
'public/js/scripts/angular/angular.js',
'public/js/scripts/angular-mocks/angular-mocks.js',
'public/js/scripts/angular-route/angular-route.min.js',
'public/js/app.js',
'public/js/controllers/*.js',
'tests/**/*.spec.js'
],
File Structure

Karma wasn't picking the controllers.js file before the StoreCtrl.js
I had to change the code below:
'public/js/controllers/*.js',
to
'public/js/controllers/controllers.js',
'public/js/controllers/StoreCtrl.js',
and it works now :)

Dealing With Dependencies in angularjs Testing

This is for work (I have permission) so I can't post exact code.
So I have to test controllers of a large module. The module has a large config function with a bunch of controllers for the logic of the different pages.
For the actual application it's loaded with bower, which is irritating since I'm testing with Karma-Browserify and npm. So the the dependencies are a mess. I basically have to import everything that was loaded from bower.json to package.json.
This is my karma.conf.js:
module.exports = function(config) {
config.set({
basePath: 'resources',
browserify: {
debug: true,
transform: [ 'browserify-shim' ]
},
browsers: [ 'PhantomJS' ],
captureTimeout: 60000,
client: {
mocha: {}
},
files: [
'tests/assist/test.js',
'assets/scripts/libs/logger.min.js'
],
frameworks: [ 'browserify', 'phantomjs-shim', 'mocha', 'chai' ],
port: 8080,
preprocessors: {
'tests/assist/controller.js': [ 'browserify' ]
},
reporters: [ 'mocha', 'coverage' ],
singleRun: true
});
};
So the code below this is my test.js (removing some company-specific names). Also I need to put angular.mock. or it won't work
require('angular');
require('angular-mocks');
//Main module needs these
jQuery = require('jquery');
require('angular-bootstrap');
require('angular-recaptcha');
require('angular-ui-router');
require('ngstorage');
require(**The path to the main module**);
require(**The path to a service it uses**);
require(**The path to a service it uses**);
require(**The path to a service it uses**);
describe('Blah', function () {
beforeEach(angular.mock.module('myApp'));
var $controller;
beforeEach(angular.mock.inject(function(_$controller_) {
$controller = _$controller_;
}));
describe('blahblah', function () {
it('sets loading to true', function () {
var $scope = {};
var controller = $controller('controller', {$scope: $scope});
assert($scope.showLoading === true);
});
});
});
The main module:
(function() {
'use strict';
})();
// Jquery noconflict
jQuery.noConflict();
var myApp = angular.module('myApp', ['ui.router', 'ngStorage', 'vcRecaptcha', 'ui.bootstrap']);
myApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
...
}])
.run([blah bunch of dependencies]) {
...
}]);
The controller (separate fie):
'use strict';
myApp.controller('controller', ['$scope', '$http', '$localStorage', 'service1', 'service2', 'service3',
function ($scope, $http, $localStorage, service1, service2, service3) {
..
}
...
As you can see I'm in dependency hell. I got the example test on the angular site to work, the main problem is with the dependencies and myApp not being visible to the controller. "ReferenceError: Can't find variable: myApp" in controllers/services
If anyone has a better way of going about testing I'm all ears.

This is not about dependency hell, not about testing also.
The code seems to rely on myApp global variable, this is strictly opposite to what Angular modules are for.
myApp should be a local variable that is defined dynamically in each function scope
(function () {
var myApp = angular.module('myApp', [...]);
...
})();
(function () {
var myApp = angular.module('myApp');
myApp.controller('controller', ...)
...
})();