I have this angular app that I am running off only one webpage of my site.
I have a main application that uses another module I made as a dependency.
The problem I am having is that nothing inside my controller is being ran. Why won't my controller run?
My route does bring in the view however so I know that the module is working.
I got rid of my data service to be certain that it was not it.
The console.log before the function outputs, but nothing in the function runs.
I also have no console errors.
app.js:
(function(){
'use strict';
var dependencies = [
'ghpg',
'ngRoute'
];
angular.module('blogger', dependencies)
.config(Config);
Config.$inject = ['$locationProvider']
function Config($locationProvider){
$locationProvider.hashPrefix('!');
}
if (window.location.hash === '#_=_'){
window.location.hash = '#!';
}
//bootstrap angular
angular.element(document).ready(function(){
angular.bootstrap(document, ['ghpg']);
});
})();
module:
(function(){
'use strict';
var dependencies = [ 'ngRoute' ];
angular.module('ghpg', dependencies)
.run(init)
init.$inject = ['$rootScope','$location' ];
function init($rootScope, $location){
var vm = this;
}
})();
View:
<div class="container-fluid" data-ngController="blogController as vm">
<h2> Articles </h2>
<div class="post-listing" data-ng-repeat=" post in vm.data">
<p> {{ post }} </p>
</div>
</div>
Controller:
(function(){
'use strict';
angular
.module('ghpg')
.controller('blogController', blogController);
blogController.$inject = ['$scope'];
////
console.log("In controller file");
function blogController($scope){
console.log('running controller');
var vm = this;
vm.data = blogContent.getContent();
console.log(vm.data);
}
})();
I am wondering if it has something to do with bootstrapping my application? (But it all still works even without the explicit ng-app, so I am thinking that my bootstrapping does work)
My next best guess is that my controller in my html is not being set correctly, but every time I mess with it I either get the same result or an error in the console, and it still doesn't work.
blogController.$inject = ['$scope','blogController']
you're trying to inject your controller into your controller. Change it to
blogController.$inject = ['$scope'] and function blogController($scope).
Did you mean to write? blogController.$inject = ['$scope','blogContent']
I see you're calling a method on blogContent and I don't see it injected anywhere.
Edit
data-ngController should be data-ng-controller.
I am relatively new to angular and here is what I am trying to do:
I am trying to pre-compile angular templates into a view so that they can be shown instantaneously when the navigation event to the view occurs.
I am trying mock some kind of a navigation controller behavior for my app where the views preload or stack up and don't show in the SPA until their routes are active.
I did some research and $templateCache might not be something that would work for me since it seems to be only prefetching the template, viz. the uncompiled view (as per my limited understanding of angular), but what I am looking for is the "compiled version"; that is, the result of a $scope applied to a template.
Currently, the app's templates and controllers are linked through $routeProvider and ng-view constructs.
Minimal code skeleton:
JS:
var app = angular.module('airfiApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: ''
})
.when('/shop', {
templateUrl: 'views/shop.html',
controller: 'ShopController'
})
.otherwise({
redirectTo: "/index.html"
}))
});
app.controller('ShopController', ['ImageFetchService', function(ImageFetchService) {
ImageFetchService.get().then(function(images) {
$scope.images = images;
});
}]);
app.factory('ImageFetchService', ['$q', '$http', function($q, $http) {
var def = $q.defer();
//basically get product docs with id products:name-of-product
var couchdbURL = 'http://username:password#localhost:5984/db_name/_all_docs?startkey="products"&endkey="products\uffff"';
$http.get(couchdbURL).then(function() {
//do some processing and send back array of objects called 'images'
/* images =
[
{
... product information... ,
src: http://couchurl/db_name/product1/attachment_name
},
{
... product information... ,
src: http://couchurl/db_name/product2/attachment_name
}
.
.
.
]
*/
def.resolve(images)
});
}]);
HTML:
//index.html
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/angular.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<!-- some home page html -->
<section ng-view> </section>
</body>
</html>
//shop.html
<div ng-repeat = " img in images">
<img ng-src="img.src" alt="img.productName" />
</div>
I really don't think you need to compile the template manually - angular will do this for you. If you really insist, you can compile any template against any scope using $compile:
$compile( element.contents() )( scope );
What I really think you're after is loading of inline template. This question shows how it is done.
A couple things you can do to easily speed up how fast a view is rendered, first thing is you can pre-load the data by calling a pre-load method in a service, during the run phase of the App. Example
//service that has a preload function that stores an http result in memory
app.service('myService', function($http){
var data;
this.getData= function(){
return $http.get('dataUrl')
.success(function(data, status, headers, config) {
return data;
})
};
// calls get data and stores result in memory
this.preloadData = function(){
this.getData().then(function(data){
data = data;
});
};
// returns in memory result
this.getPreloadedData = function(){
return data;
};
});
// call preload in run block
app.run(function(myService){
// preloads data from service
myService.preloadData();
});
// get data from in memory
app.controller('TestCtrl', function($scope, myService) {
$scope.data = myService.getPreloadedData();
});
The second thing you can do is store the template in $template cache rather than fetching it form a http request, you can do this in the run block as well, and if you using gulp or grunt there are some great plug ins that provide a better way of doing this
app.run(function($templateCache){
// cache template
var tempalate = '<h2>hello world</h2>'
$templateCache.put('test.html', tempalate);
});
here is a plunk that goes into better detail and shows more examples
http://embed.plnkr.co/DSeWLVNoV2Fe0SJI3Bwa/preview
This does exactly preload the route but it will help performance :)
I'm having trouble getting a $scope variable to trigger the screen to rebind. Yes, I've tried calling $scope.$apply() after assigning $scope.value = value; Yes, I've tried calling $digest() manually after the assignment; I get the error "$rootScope:inprog] $digest already in progress.
So What I've done is try to get my $rootScope.$on('message'function(){}) listener to create a secondary $broadcast to all scopes to try and get to the bottom of this; however, my $scope's registration of the event is not firing and I'm thinking this might be related to the same issue....maybe not. At any rate, here's my codez.
I'd build a fiddle but it's currently blocked by network policy.
Manifest:
[config]
[index.html]
[foo.html]
[ctrl]
[config] (a couple of attempted hacks. They're marked with comments)
var kata = angular.module('kata',[
'ngRoute'
]).run(['$rootScope',
function($rootScope){
$rootScope.$on('message:foo',function(event,data){
$rootScope.$broadcast('message:bar',['foo1','foo2','foo3']);//send secondary msg
$rootScope.data = data; //Hack #1: When I couldn't get $scope to rebind, I tried to use $rootScope;still doesn't rebind.
});
}]);
kata.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/Foo',{
templateUrl: 'foo.html',
controller: 'FooCtrl'
});
}]);
[index] (nothing funny here)
<html ng-app="kata">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"></meta>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="./routingConfig.js"></script>
<script src="./controllers.js"></script>
</head>
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
[foo.html] (nothing funny here)
A couple of tests with a couple of $scope variables attached to same stuff.
Neither of these update
<div>
This page is for capturing Data
Data: {{data}}
<hr />
<ul>
<li ng-repeat="foo in foos">
<span>Foo Found!</span>
</li>
</ul>
</div>
[ctrl] (created several variables on scope trying to attack this problem in different ways)
var kataCtrl= kata.controller("FooCtrl",
[ '$scope', '$http','$rootScope','$location'
,function($scope, $http, $rootScope , $location) {
$scope.data = "Foo";
$scope.data1 = "[placeholder]";
$scope.foos = [];
//fires, assigns, view does not update
$scope.$watch(function(){
return $rootScope.data;
}, function(){
$scope.foos = ['data','foo','bar','baz'];<=Assignment succeeds. View does not update
$scope.$apply();//<=Does nothing apparent; View does not update
$scope.$digest();//<= Console Error. Already in digest loop
},true);
//does not fire
$scope.$on('message:foo',function(event,data){ //<= This never catches
$scope.data = data;
});
//fires, assigns, View does not update
$rootScope.$on('message:bar',function(event,data){
$scope.foos = ['data','foo','bar','baz'];
$scope.foo1 = data.element1;
$scope.data = "[Foos returned from $rootScope]";
$scope.$apply();//<= Does not help. Changing to $scope.$digest() indicates already in digest loop
});
}]);
So as a recap, $rootScope.$on() inside my config is firing. It is assigning values to variables on $rootScope properly. $rootScope.$broadcast is generating a secondary message. The controller's $scope.$on registration of the message does not catch.The controller's $rootScope.$on registration fires and assigns values on $scope, but the view does not rebind. Calling $scope.$apply() does not help. Calling $scope.$digest() merely reports that a digest loop is currently running.
Scoped variables are assigned to but the view never rebinds.
What in the wide wide world of sports is going on here?
I think the problem is you are broadcasting 'message:bar' and listening to 'message:foo' in controller. I have made simplified version of your code. You can see thet my code emits event to root scope and gots broadcasted event in child scope:
<html ng-app="kata">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"></meta>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>
<body>
<div class="view-container" ng-controller="FooCtrl">
<div class="view-frame">
<div>
This page is for capturing Data
<br>
Data: {{data}}
<hr />
<ul>
<li ng-repeat="foo in foos">
<span>Foo Found!</span>
</li>
</ul>
</div>
</div>
</div>
<script>
var kata = angular.module('kata',[
'ngRoute'
]).run(['$rootScope',
function($rootScope){
$rootScope.$on('message:foo',function(event,data){
$rootScope.$broadcast('message:bar',['Data', 'from', 'root', 'scope']);//send secondary msg
});
}]);
kata.controller("FooCtrl",
[ '$scope', '$http','$rootScope','$location'
,function($scope, $http, $rootScope , $location) {
$scope.data = "Foo";
$scope.data1 = "[placeholder]";
$scope.foos = [];
$scope.$on('message:bar',function(event,data){
$scope.data = data;
});
$scope.$emit('message:foo');
}]);
</script>
</body>
</html>
I have each of my angular controllers/services in separate folders (taken from angular seed).
I need to call different controllers on different pages.
I am getting errors that ***Ctrl is not loading. How do I 'inherit' controllers specific to each page?
Here is my current structure.
// Index.html
<script>app.js</script>
<div ng-app='myApp'>
<div ng-controller='headerCtrl'> Load user profile on every page</div>
</div>
// TaskList.html
<script>app.js</script>
<script>task.js</script>
<div ng-app='myApp'>
<div ng-controller='headerCtrl'>Load user profile on every page</div>
<div ng-controller='taskCtrl'> Load task list </div>
</div>
// ProjectList.html
<script>app.js</script>
<script>project.js</script>
<div ng-app='myApp'>
<div ng-controller='headerCtrl'>Load user profile on every page</div>
<div ng-controller='projectCtrl'>Load task list</div>
</div>
// app.js
var myApp = angular.module('myApp', []);
myApp.controller('headerCtrl', function ($scope, $window) {
// do stuff
});
// task.js
var taskCtrl = angular.module('taskCtrl', []);
taskCtrl.controller('taskCtrl', function ($scope, $window) {
// do stuff
});
// project.js
var projectCtrl = angular.module('projectCtrl', []);
projectCtrl.controller('projectCtrl', function ($scope, $window) {
// do stuff
});
Unless you have a good reason to do, I would recommend just putting your controllers in the same module. You can reference your taskApp module in other files (task.js and project.js) by doing the following:
var taskApp = angular.module('taskApp');
taskApp.controller('taskCtrl, ...);
Note that the call to angular.module has only one parameter - that's telling Angular that you want to get a reference to an existing module, rather than create a new module. On the other hand, doing this:
var taskApp = angular.module('taskApp', []);
Is telling Angular that you want to create a new module (with no dependencies). Subtle but very important difference.
That's because you're putting each controller in a separate module, but only referencing myApp , you need to inject the other app dependencies to your main app. Also, why are you storing your app and controllers in the same object? No wonder you're getting errors. Do this instead:
var taskApp = angular.module('taskApp', []);
taskApp.controller('taskCtrl', function ($scope, $window) {
// do stuff
});
var projectApp = angular.module('projectApp', []);
projectApp.controller('projectCtrl', function ($scope, $window) {
// do stuff
});
var myApp = angular.module('myApp', ['taskApp','projectApp']);
This is a long shot, but has anyone seen this error before? I am trying to add 'Transporters' using express, angular and mongoDB. I get this error whenever I access a page ruled by the transporters controller:
Error: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=TransportersController&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at http://localhost:3000/lib/angular/angular.min.js:6:450
at tb (http://localhost:3000/lib/angular/angular.min.js:18:360)
at Pa (http://localhost:3000/lib/angular/angular.min.js:18:447)
at http://localhost:3000/lib/angular/angular.min.js:62:17
at http://localhost:3000/lib/angular/angular.min.js:49:43
at q (http://localhost:3000/lib/angular/angular.min.js:7:386)
at H (http://localhost:3000/lib/angular/angular.min.js:48:406)
at f (http://localhost:3000/lib/angular/angular.min.js:42:399)
at http://localhost:3000/lib/angular/angular.min.js:42:67
The transporters controller looks like this:
'use strict';
angular.module('mean.transporters').controller('TransportersController', ['$scope', '$routeParams', '$location', 'Global', 'Transporters', function ($scope, $routeParams, $location, Global, Transporters) {
$scope.global = Global;
$scope.create = function() {
var transporter = new Transporters({
name: this.name,
natl_id: this.natl_id,
phone: this.phone
});
transporter.$save(function(response) {
$location.path('transporters/' + response._id);
});
this.title = '';
this.content = '';
};
$scope.remove = function(transporter) {
if (transporter) {
transporter.$remove();
for (var i in $scope.transporters) {
if ($scope.transporters[i] === transporter) {
$scope.transporters.splice(i, 1);
}
}
}
else {
$scope.transporter.$remove();
$location.path('transporters');
}
};
$scope.update = function() {
var transporter = $scope.transporter;
if (!transporter.updated) {
transporter.updated = [];
}
transporter.updated.push(new Date().getTime());
transporter.$update(function() {
$location.path('transporters/' + transporter._id);
});
};
$scope.find = function() {
Transporters.query(function(transporters) {
$scope.transporters = transporters;
});
};
$scope.findOne = function() {
Transporters.get({
transporterId: $routeParams.transporterId
}, function(transporter) {
$scope.transporter = transporter;
});
};
}]);
In my views I call the list and create methods. They generate the above error
I got this from the angular docs for ng:areq though still can't figure what's going on
AngularJS often asserts that certain values will be present and truthy
using a helper function. If the assertion fails, this error is thrown.
To fix this problem, make sure that the value the assertion expects is
defined and truthy.
Here's the view that calls the controller public/views/transporters/list.html:
<section data-ng-controller="TransportersController" data-ng-init="find()">
<ul class="transporters unstyled">
<li data-ng-repeat="transporter in transporters">
<span>{{transporter.created | date:'medium'}}</span> /
<h2><a data-ng-href="#!/transporters/{{transporter._id}}">{{transporter.name}}</a></h2>
<div>{{transporter.natl_id}}</div>
<div>{{transporter.phone}}</div>
</li>
</ul>
<h1 data-ng-hide="!transporters || transporters.length">No transporters yet. <br> Why don't you Create One?</h1>
</section>
Transporters service code:
angular.module('transporterService', [])
.factory('Transporter', ['$http', function($http){
// all return promise objects
return {
get: function(){
return $http.get('/api/transporters');
},
create: function(transporterData){
return $http.post('/api/transporters', transporterData);
},
delete: function(id){
return $http.delete('/api/transporters/'+id);
}
};
}]);
I experienced this error once. The problem was I had defined angular.module() in two places with different arguments.
Eg:
var MyApp = angular.module('MyApp', []);
in other place,
var MyApp2 = angular.module('MyApp', ['ngAnimate']);
I've gotten that error twice:
1) When I wrote:
var app = module('flapperNews', []);
instead of:
var app = angular.module('flapperNews', []);
2) When I copy and pasted some html, and the controller name in the html did not exactly match the controller name in my app.js file, for instance:
index.html:
<script src="app.js"></script>
...
...
<body ng-app="flapperNews" ng-controller="MainCtrl">
app.js:
var app = angular.module('flapperNews', []);
app.controller('MyCtrl', ....
In the html, the controller name is "MainCtrl", and in the js I used the name "MyCtrl".
There is actually an error message embedded in the error url:
Error: [ng:areq]
http://errors.angularjs.org/1.3.2/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got%20undefined
Here it is without the hieroglyphics:
MainCtrl not a function got undefined
In other words, "There is no function named MainCtrl. Check your spelling."
I ran into this issue when I had defined the module in the Angular controller but neglected to set the app name in my HTML file. For example:
<html ng-app>
instead of the correct:
<html ng-app="myApp">
when I had defined something like:
angular.module('myApp', []).controller(...
and referenced it in my HTML file.
you forgot to include the controller in your index.html. The controller doesn't exist.
<script src="js/controllers/Controller.js"></script>
I had same error and the issue was that I didn't inject the new module in the main application
var app = angular.module("geo", []);
...
angular
.module('myApp', [
'ui.router',
'ngResource',
'photos',
'geo' //was missing
])
Check the name of your angular module...what is the name of your module in your app.js?
In your TransportersController, you have:
angular.module('mean.transporters')
and in your TransportersService you have:
angular.module('transporterService', [])
You probably want to reference the same module in each:
angular.module('myApp')
I had this error too, I changed the code like this then it worked.
html
<html ng-app="app">
<div ng-controller="firstCtrl">
...
</div>
</html>
app.js
(function(){
var app = angular.module('app',[]);
app.controller('firstCtrl',function($scope){
...
})
})();
You have to make sure that the name in module is same as ng-app
then div will be in the scope of firstCtrl
The same problem happened with me but my problem was that I wasn't adding the FILE_NAME_WHERE_IS_MY_FUNCTION.js
so my file.html never found where my function was
Once I add the "file.js" I resolved the problem
<html ng-app='myApp'>
<body ng-controller='TextController'>
....
....
....
<script src="../file.js"></script>
</body>
</html>
:)
I've got that error when the controller name was not the same (case sensitivity!):
.controller('mainCOntroller', ... // notice CO
and in view
<div class="container" ng-controller="mainController"> <!-- notice Co -->
I got this same error when I included the entire controller file name in the Routes like this:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController.js'
})
.when('/portfolio', {
templateUrl: 'portfolio.html',
controller: 'mainController.js'
})
});
When it should be
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/portfolio', {
templateUrl: 'portfolio.html',
controller: 'mainController'
})
});
Angular takes certain things you name like the app and controller and expounds on them in directives and across your app, take care to name everything consistently and check for this when debugging
I know this sounds stupid, but don't see it on here yet :). I had this error caused by forgetting the closing bracket on a function and its associated semi-colon since it was anonymous assigned to a var at the end of my controller.
It appears that many issues with the controller (whether caused by injection error, syntax, etc.) cause this error to appear.
This happened to me when I have multiple angular modules in the same page
I encountered this error when I used partial views
One partial view had
<script src="~/Scripts/Items.js"></script>
<div ng-app="SearchModule">
<div ng-controller="SearchSomething" class="col-md-1">
<input class="searchClass" type="text" placeholder="Search" />
</div>
</div>
Other had
<div ng-app="FeaturedItems" ng-controller="featured">
<ul>
<li ng-repeat="item in Items">{{item.Name}}</li>
</ul>
</div>
I had them in same module with different controller and it started working
I had the same error in a demo app that was concerned with security and login state. None of the other solutions helped, but simply opening a new anonymous browser window did the trick.
Basically, there were cookies and tokens left from a previous version of the app which put AngularJS in a state that it was never supposed to reach. Hence the areq assertions failed.
There's also another way this could happen.
In my app I have a main module that takes care of the ui-router state management, config, and things like that. The actual functionality is all defined in other modules.
I had defined a module
angular.module('account', ['services']);
that had a controller 'DashboardController' in it, but had forgotten to inject it into the main module where I had a state that referenced the DashboardController.
Since the DashboardController wasn't available because of the missing injection, it threw this error.
In my case I included app.js below the controller while app.js should include above any controller like
<script src="js/app.js"></script>
<script src="js/controllers/mainCtrl.js"></script>
I had done everything right other than setting controller in $stateProvider. I used filename rather than variable name.
Following code is wrong:
formApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('management', {
url: '/management',
templateUrl: 'Views/management.html',
controller: 'Controllers/ManagementController.js'
});
and this is the right approach;
formApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('management', {
url: '/management',
templateUrl: 'Views/management.html',
controller: 'ManagementController'
});
Make sure you noticed;
controller: 'ManagementController'
And for those who are curious about my controller file ManagementController.js, it looks like the this;
formApp.controller('ManagementController', ['$scope', '$http', '$filter', '$state',function(scope, http, filter, state) {
scope.testFunc = function() {
scope.managementMsg = "Controller Works Fine.";
};
}]);
For those who want a quick-start angular skeleton for above example check this link https://github.com/zaferfatih/angular_skeleton
The error will be seen when your controller could not be found in the application. You need to make sure that you are correct using values in ng-app and ng-controller directives
This happened to me when using ng-include, and the included page had controllers defined. Apparently that's not supported.
Controller loaded by ng-include not working
I have made a stupid mistake and wasted lot of time so adding this answer over here so that it helps someone
I was incorrectly adding the $scope variable(dependency)(was adding it without single quotes)
for example what i was doing was something like this
angular.module("myApp",[]).controller('akshay',[$scope,
where the desired syntax is like this
angular.module("myApp",[]).controller('akshay',['$scope',
// include controller dependency in case of third type
var app = angular.module('app', ['controller']);
// first type to declare controller
// this doesn't work well
var FirstController = function($scope) {
$scope.val = "First Value";
}
//Second type of declaration
app.controller('FirstController', function($scope) {
$scope.val = "First Controller";
});
// Third and best type
angular.module('controller',[]).controller('FirstController', function($scope) {
$scope.val = "Best Way of Controller";
});