I am getting the 'Controller is not a function error in my application.
From what I have read the most common issue is that it the controller file is not referenced in the html page - this is not the case for me.
I do not get the error when I have included the controller in the same file as declaring the module, but when I am using seperate files for each controller.
Here is my folder structure:
app.js:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
controller: 'assets/controllers/mainController.js'
});
});
mainController.js
var myApp = angular.module('myApp');
myApp.controller('mainController', ['$scope', function($scope){
$scope.name = "test";
}]);
I have also read that when you declare a module, the array braces [] create a new module so I took them out of the module in mainController.js.
It works if I do this:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
controller: 'mainController.js'
});
});
myApp.controller('mainController', ['$scope', function($scope){
$scope.name = "hi";
}]);
I have referenced the controller like this in my index.html in the head section:
<script src="assets/scripts/js/app.js"></script>
<script src="assets/controllers/mainController.js"></script>
When you are having controller in another file no need to give path of the controller there which you have given in your config
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
//Remove this
//controller: 'assets/controllers/mainController.js'
//and then try this
controller: 'mainController'
});
});
Are you using IIFE? If not you should not assign angular module
var myApp = angular.module('myApp'); on your mainController.js as it overwrite your myApp variable since it is treated as globe variable.
If you want to apply IIFE your code should be:
app.js
(function () {
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
controller: 'mainController'
});
});
})();
mainController.js
(function () {
var myApp = angular.module('myApp');
myApp.controller('mainController', ['$scope', function($scope){
$scope.name = "test";
}]);
})();
Related
Please see my plunkr here
https://plnkr.co/edit/hk7Z0jMwOfoUwJZ98F7a?p=preview
In my app.js I have two controllers and a routeprovider with a resolve for TestController
var app = angular.module('app', ['ngRoute']);
app.controller('DefaultController', ['$scope', function($scope){
$scope.welcome = "Hello World";
}]);
app.controller('TestController', ['$scope', 'context', '$routeParams', function($scope, context, $routeParams){
$scope.text = "TestController loaded!"
}]);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(){return 'test';}
}
})
}])
In my html, I have an ng-include which should also load test.html in the default view
<body ng-controller="DefaultController">
<h1>{{welcome}}</h1>
<div ng-include="'test.html'" ng-controller='TestController'></div>
</body>
I cannot take the resolve out of the routeProvider as I still need it to when the user goes to '../test'
Is there any way I can resolve contextProvider from the ng-include?
or is there better ways to do this?
Any help would be greatly appreciated.
Create a factory/service and use that:
app.factory('fooResolver', function() {
return {
resolveMe: function() {
return 'test';
}
}
});
Now, use this in your router config:
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(fooResolver) {
return fooResolver.resolveMe();
}
}
})
}])
And do the same in your controller:
app.controller('TestController', ['$scope', 'fooResolver', '$routeParams', function($scope, fooResolver, $routeParams){
$scope.text = "TestController loaded!"
var context = fooResolver.resolveMe();
}]);
I dont know if its a valid question but as long as i inject ngRoute into my app
my $scope is undefined.
the app without ng-Route looks like this
angular.module('DummyApp', [])
.controller('DummyCtrl', ['$scope', function ($scope) {
$scope.name = "World";
}]);
the test case like this
describe( 'Dummy Controller', function(){
var scope, http, DummyCtrl;
beforeEach(module('DummyApp'));
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
DummyCtrl = $controller('DummyCtrl', {
$scope: scope
});
}));
it('should contain the word world', function(){
expect(scope.name).toEqual("World");
});
});
passing without any error
but if i inject the ngRoute to my app
angular.module('DummyApp', ['ngRoute'])
.controller('DummyCtrl', ['$scope', function ($scope) {
$scope.name = "World";
}]);
TypeError: 'undefined' is not an object (evaluating 'scope.name')
I also tried to configure the $routeProvider see below
but i just don't know how to write my test if the ngRoute is injected
angular.module('DummyApp', ['ngRoute']).app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/smth', {
templateUrl: 'smth.html',
controller: 'testController'
});
}])
.controller('DummyCtrl', ['$scope', function ($scope) {
$scope.name = "World";
}]);
I keep getting Uncaught Error: [$injector:modulerr] when using $locationProvider to remove the # from root. How can I fix it?
var myApp = angular.module('myApp', ['ngRoute']);
// routes
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller : 'mainController'
});
$locationProvider.html5Mode(true);
});
myApp.controller('mainController', function($scope) {
$scope.message = 'hello';
});
I am calling both angular/angular-route and using base href="/" on head.
Are you minifying the code?
You should add the dependencies as string before the function arguments.
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller : 'mainController'
});
$locationProvider.html5Mode(true);
}]);
I am trying to read a JSON data from a file using angular factory and service. But Angular can't see my defined service. Here is my factory:
//jsonService.js
angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
alert($resource)
return $resource('example.json',{}, {
getData: {method:'GET', isArray: false}
});
});
And my controller:
//app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version',
'jsonService'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]).
controller('mainController', ['JsonService', function($scope, JsonService){
JsonService.getData(function(data) {
console.log("Test");
$scope.length = data.length;
})}]);
And I get:
"Error: JsonService is undefined"
You're injecting 'JsonService' as the first parameter of your function, but you are using the JsonService as the 2nd parameter of your function.
Should be ['JsonService', '$scope', function($scope, JsonService){ or if $scope not needed then ['JsonService', function(JsonService){
This line in app.js should look like
controller('mainController', ['$scope','JsonService', function($scope, JsonService){
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.factory('Greeter', ['$resource',function($resource){
return $resource(
'http://123.com/processor-url.php',{
},{
query: {
method:'GET',
/*params: { myvar: myvarActual },*/
isArray:true
}
}
);
}]);
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
alert($routeParams.myvar);
Greeter.query(function(data) {
$scope.output = data.myvar;
});
}]);
app.controller('homeController', ['$scope', function($scope){
}])
/*Final Config After Loading Everything*/
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/appointments/:myvar', {templateUrl: 'appointments.html', controller: 'appointmentController'});
$routeProvider.when('/home', {templateUrl: 'home.html', controller: 'homeController'});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
</script>
In the above code, seems the controler is not even recognize myvar that was suppose to be included in the routeProvider's myvar. As the alert will show undefined, instead of the actually value of myvar (i.e. .../appointments/1066 ... if so I expect $routeParams.myvar = 1066, and alert($routeParams.myvar) should be 1066
$routeParams is missing from the dependency declaration so currently it's looking for myvar on Greeter which doesn't exist...
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
Should be...
app
.controller('appointmentController', ['$scope', '$routeParams', 'Greeter', function($scope, $routeParams, Greeter){