We Keep Coding

$routeProvider config route throwing 'Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string'

I'm writing routing logic using ngRoute of angular JS. The following is my code.
index.js
(function() {
'use strict';
function config($routeProvider, $httpProvider, cfpLoadingBarProvider, $tooltipProvider) {
$routeProvider.otherwise({redirectTo: '/404'});
$httpProvider.defaults.withCredentials = false;
$httpProvider.defaults.headers.common['content-type'] = "application/json";
}
angular
.module('pacman', ['ngCookies', 'ngRoute', 'ui.bootstrap', 'ui.validate',
'angular-cache', 'angular-loading-bar', 'angular-md5', 'rt.iso8601', 'ngAnimate']
)
.config(['$routeProvider', '$httpProvider', 'cfpLoadingBarProvider', '$tooltipProvider', config])
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
})();
app.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/components/landingpage/landingpage.html',
controller: 'appController'
});
}
function appController($scope, $rootScope, $location) {
$scope.submitLogin = function() {
alert("Successfully loggedIn");
};
}
angular
.module('pacman')
.controller('appController', ['$scope', '$rootScope', '$location', appController])
.config(['$routeProvider', config]);
})();
notFound.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/404', {
templateUrl: 'app/components/notFound/404page.html',
controller: 'notFoundController'
});
}
function notFoundController($scope, $rootScope, $location) {
debugger;
}
angular
.module('pacman')
.controller('notFoundController', ['$scope', '$rootScope', '$location', notFoundController])
.config(['$routeProvider', config]);
})();
My code is a simple app. I'm trying to load different controllers based on routes. However at the time of loading the app, in the last controller's '$routeProvider' it throws an error
Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have no clue how to figure out the problem. Any leads would be appreciated.
The following is my library bundle order.
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/jquery.transit/jquery.transit.js',
'node_modules/angular-cache/dist/angular-cache.js',
'node_modules/angular-cookies/angular-cookies.js',
'node_modules/angular-loading-bar/build/loading-bar.js',
'node_modules/angular-ui-validate/dist/validate.js',
'node_modules/chart.js/Chart.js',
'node_modules/angular-md5/angular-md5.js',
'node_modules/angular-iso8601/dist/angular-iso8601.js',
'node_modules/angular-animate/angular-animate.js',
'node_modules/angular-chart.js/dist/angular-chart.js',
'node_modules/rx/dist/rx.all.js',
'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js',
'node_modules/bootstrap/dist/js/bootstrap.js'
Kindly help.

Issue is in your index.js where you define the run method on your angular app.
angular
.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
The last argument in the array passed to run should be a function but you forgot to pass a function. Change your run to add some implementation like below or remove the run if you don't see any use for it.
angular.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies',
function($rootScope,$location,$modalStack,$cookies){
// some statements here
}]);

Angular JS file declaration must come before the jquery in your index.html
'node_modules/angular/angular.js',
'node_modules/jquery/dist/jquery.js',

AngularJS constants undefined is not an object

new to Angular and I'm trying to inject constants from a separate file. It seems to work with the DI, but when I try to use it, I get an error: Error: undefined is not an object (evaluating 'CApiEndpoints.authUrl').
I tried dot notation and brackets as suggested in Accessing AngularJS constants but continue to get the error.
The files are included in index.html, and DI doesn't complain.
index.html
<script type="text/javascript" src="js/angular/constants.js"></script>
<script type="text/javascript" src="js/angular/app.js"></script>
js/angular/constants.js
var app = angular.module('appConst', []);
app.constant('CApiEndpoints', {
authUrl: 'http://api.example.com/v1/',
...
});
and my js/angular/app.js
var app = angular.module('app', ['ngRoute', 'ngCookies', 'appConst', 'appServices']);
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints', function($scope, $route, $http, $cookies, $routeParams, $location, CApiEndpoints){
console.log(CApiEndpoints); // shows 'undefined'
$http({
method : 'GET',
url : CApiEndpoints.authUrl + 'user_info'
})
.then(
function successCallback(response) {
console.log(response);
},
function errorCallback(response) {
console.log(response);
});
}]);
Any help would be appreciated. I've searched for the last 2 hours trying to figure this out.

While injecting dependencies inside your controller function using DI inline array annotation, they must follow the order how they are injected in array.
If you follow above rule you will come to know that you have two extra paramters inside your function, so you should remove those two unwanted ($routeParams, $location) dependency.
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints',
function($scope, $route, $http, $cookies, CApiEndpoints){
//controller code
}
]);
If you haven't added those parameter mistakenly, you should add those parameter on both side inside function & array.
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', '$routeParams', '$location', 'CApiEndpoints',
function($scope, $route, $http, $cookies, $routeParams, $location CApiEndpoints){
//controller code
}
]);

AngularJS Error: [$injector:itkn] Incorrect injection token! Expected service name as string, got undefined

Trying to run an Angular app containing this controller:
routerApp.controller('chartSettingsCtrl', ['$scope', '$timeout',
, function($scope, $timeout) { /* body omitted */ }
gives me the error:
Error: [$injector:itkn] Incorrect injection token! Expected service name as string, got undefined
What am I doing wrong?

The actual problem is that I had an extra , in the controller. When I changed that, it worked.
From
routerApp.controller('chartSettingsCtrl', ['$scope', '$timeout',
, function($scope, $timeout) {
To
routerApp.controller('chartSettingsCtrl', ['$scope', '$timeout',
function($scope, $timeout) {

AngularJS: Having trouble restructuring

Here is the current (Working) way i have my angular app.
app.js
require('angular');
require('angular-ui-router');
var listStoresCtrl = require('./controllers/store/listStoresCtrl');
var createStoreCtrl = require('./controllers/store/createStoreCtrl.js');
var storeDetailsCtrl = require('./controllers/store/storeDetailsCtrl.js');
var listDepartmentsCtrl = require('./controllers/dept/listDepartmentsCtrl');
var createDepartmentCtrl = require('./controllers/dept/createDepartmentCtrl.js');
//-- init angular js
var ngApp = angular.module('ngApp', ['ui.router'], function($interpolateProvider){
//-- as the output conflicts with blade lets alter the defaults
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}).config(['$stateProvider','$logProvider','$urlRouterProvider', function ($stateProvider, $logProvider,$urlRouterProvider) {
//-- enable logging
$logProvider.debugEnabled(true);
}]);
ngApp.controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl]);
ngApp.controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl]);
ngApp.controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);
ngApp.controller('listDepartmentsCtrl', ['$scope', 'Department', '$log', listDepartmentsCtrl]);
ngApp.controller('createDepartmentCtrl', ['$scope', '$log', 'Department', '$rootScope', '$timeout','ManagerService', createDepartmentCtrl]);
//-- stick it all together and kick it off
angular.bootstrap(document, ['ngApp']);
BUT i would like to restructure this so that my Store ctrls etc and Department ctrls are within their own module.
EG: storeCtrls.js
angular.module('storeCtrls', [])
.controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl])
.controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl])
.controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);
Then in the app.js file call them in like so.
require('./controllers/storeCtrls');
angular.module('ngApp', ['storeCtrls'], function($interpolateProvider){...}
But for some reason this does not work I am get getting an error of Uncaught object.
Bit of relevant history on this:
I am using Gulp and Browserify to do my JS.
My listStoresCtrl for example are using the
module.exports = function(scope, Store, log){...}
method to return them.
UPDATE
i seem to have sorted the Uncaught object, as i was missing the ['ui.router'] with the call to
angular.module('ngApp', ['storeCtrls']...
so it should be
angular.module('ngApp', ['ui.router', 'storeCtrls']..
Now to get the rest to link up...

Seems the main issue was i was not injecting some items that i simply removed and forgot to re-add.
I simply must of copied over this injection ['ui.router'] with the call to
angular.module('ngApp', ['storeCtrls']...
where i should have been adding as well below:
angular.module('ngApp', ['ui.router', 'storeCtrls']..
Now to get the rest to link up...

Injecting factory into service fails

I've setup an angular seed project with some services and a factory. companyService depends on a factory called company. Injecting company into companyService fails with this error. I can't seem to figure out what I'm doing wrong.
var module = angular.module('project.services', []);
module.factory('company', ['$rootScope', 'Resource', function($rootScope, $resource){
return $resource($rootScope.api + 'companies/:id');
}]);
module.service('companyService',['$rootScope', '$http', 'company', function($rootScope, $http, company){
var companies;
//var $injector = angular.injector();
//var company = $injector.get('company');
// some more functions ....
}]);

ngResource is a separate module, so you should include the angular-resource[.min].js script and declare ngResource as a dependency of your app:
angular.module('myApp', [..., 'ngResource']);