I want to know why my config function is not injected properly. this is my module injection code
angular.module("myApp", ['ngRoute'])
.controller('myCtrl', myCtrl)
.controller('common', common)
.config('configuration', configuration)
.factory('cprPostService', cprPostService);
this is my config declaration I get the following error
[$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=myApp&p1=Error%3A%20%5Bng%3Aareq%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.13%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0A%20%20%20at%20yb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A18%3A354)%0A%20%20%20at%20Qa%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A18%3A447)%0A%20%20%20at%20jc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A28%3A333)%0A%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A30%3A291)%0A%20%20%20at%20Anonymous%20function%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A29%3A294)%0A%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A7%3A278)%0A%20%20%20at%20e%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A29%3A115)%0A%20%20%20at%20ac%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A32%3A230)%0A%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A17%3A429)%0A%20%20%20at%20%24b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.13%2Fangular.min.js%3A18%3A133)
function configuration($routeProvider, $locationProvider) {
$routeProvider
.when('/List', {
templateUrl: './pages/templates/initialization.html',
controller:'myCtrl'
})
.otherwise({
redirectTo: '/List'
});
};
You need to specify a $inject array for the config fuction:
configuration.$inject = ['$routeProvider', '$locationProvider'];
Actually the error line is
.config('configuration', configuration)
it has to be just,
.config(configuration)
Related
I downloaded Angular-Express-Bootstrap seed from https://github.com/jimakker/angular-express-bootstrap-seed. I would like to perform routing through angular js which is performed perfectly. But now I am facing some problem on calling 'controller' in controllers.js.
I can call my MyCtrl1 by this way and working perfectly:
function MyCtrl1() {
alert('calling Myctrl1..')
}
MyCtrl1.$inject = [];
But whether I call like this:
var app = angular.module('myApp.controllers', []);
app.controller('MyCtrl1', ['$scope', function($scope) {
$scope.greeting = 'MyCtrl1';
alert('calling'+ $scope.greeting+"..")
}]);
The above controller call back function not working and shows this error: Uncaught Error: [$injector:modulerr] MyCtrl1 is not defined
Routing Config in app.js:
var app = angular.module('myApp', ['myApp.filters','myApp.controllers','myApp.services', 'myApp.directives','ngRoute'])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
{
$routeProvider
.when('/view1', {
templateUrl: 'partial/1',
controller: MyCtrl1
})
$locationProvider.html5Mode(true);
}]);
I don't know why it is not working. Any help would be greatly appreciated.
Finally I got the solution, I missed the quotes to the controller name in $routeProvider
Soln : controller: 'MyCtrl1'
I work on AngularJS project.
Here is module definition:
(function () {
"use strict";
var myApp = angular.module("DIMManagement", ["ngResource", "ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/DIM/Home', { templateUrl: '/app/DIM/DIMView.html', controller: 'DIMController' });
$routeProvider.when('/DIM/Log', { templateUrl: '/app/Log/DIMLogView.html', controller: 'DIMLogController' });
$routeProvider.otherwise ->?
$locationProvider.html5Mode(true);
});
}());
I want to use otherwise method of $routeProvider any idea how can I use it?
The intellisense of dose not give option to select otherwise method.
Just set the property as normal:
$routeProvider.otherwise({ redirectTo: '/' });
Depending on your IDE, I wouldn't really count on the intellisense for the most accurate help (just my opinion tho)
I have a:
main module : kp
sub module : kp.venue
I want kp.venue to have it's own "route" definitions (for all paths relative to that module).
This is what I am trying to achieve in the code bellow.
Can anyone explain me why it doesn't work?
I followed the technique presented in this post: https://stackoverflow.com/a/15301427/971008
(function () {
'use strict';
angular.module('kp.venue', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/venue", {
template : "<p>This is the venue module</p>",
controller: "VenueCtrl"
});
}
])
.controller('VenueCtrl', ['$scope',
function($scope){
console.log("VenueController");
}
]);
angular.module('kp', ['ngRoute', 'ngAnimate', 'kp.venue'])
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.html5Mode({enabled:true, requireBase:false});
$routeProvider
.when("/", {
template: "<p>main app</p>",
controller: "MainController"
})
.otherwise({
redirectTo: '/'
});
}
]);
//Load controller
angular.module('kp')
.controller('MainController', ['$scope',
function($scope) {
$scope.test = "Testing...";
}
]);
}());
Note that I have already tried to move "kp.venue" bellow the definition of "kp" module to be sure that it was not a problem related to things not being loaded in the right order.
I'm building a practice app in Angular using Yeoman. I'm trying to keep my controllers in separate files.
However, when going to my "register" route, it throws an error in Chrome dev tools:
"Error: [ng:areq] Argument 'RegisterCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.6/ng/areq?p0=RegisterCtrl&p1=not%20aNaNunction%2C%20got%20undefined".
Even though it throws an error, I'm still able to visit the register page and see the "hello world" content.
I've looked at:
AngularJS: How do I create controllers in multiple files
How to create separate AngularJS controller files?
But neither helped solve my problem, despite trying some of their recommendations.
Currently, my app is laid out as:
app
...
--scripts
---controllers
-----main.js
-----register.js
---app.js
...
When I move the contents of register.js into Main.js, it no longer throws an error.
App.js looks like this:
angular.module('angYeomanApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Main.js:
angular.module('angYeomanApp')
.controller('MainCtrl', function ($scope) {
});
Register.js:
angular.module('angYeomanApp')
.controller("RegisterCtrl", function ($scope) {
});
Any help would be much appreciated!
Is register.js referenced from index.html?
I have two moudules:
var app = angular.module('app', ["homeModule"])...
angular.module("homeModule", [])...
and if in web config property "compilation debug="true".." everything works fine.
But when I build the project in release and "compilation debug="false".."
BundleCollection collects all JS files in one I have problem.
In log console i see error
Error: Unknown provider: n from homeModule
My "app" module can not find and connect "homeModule".
What am I doing wrong? How do I properly connect the "homeModule" module ?
I think you have problem with AngularJs and minification in general. When defining dependencies you need to use array notation, for example:
angular.module("app", ["homeModule"])
.controller("UsersController", ["$scope", "usersRepository", function($scope, usersRepository) {
// ...
}]);
or use https://github.com/btford/grunt-ngmin which makes conversion for you.
I found problem in homeModule.config
Worked code:
var app = angular.module('app', ["homeModule"]);
app.config(['$routeProvider', '$locationProvider',function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
angular.module("homeModule", [])
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.when('/', { templateUrl: 'ClientApp/Home/Index.html' });
$routeProvider.when('/home', { templateUrl: 'ClientApp/Home/Index.html' });
}])