Im pretty new to Angular.js and trying to implement it on my Node.js app.
Ive had success creating an RESTful API using angular for a single controller but now would like to use two or more controllers on a single DOM.
Specifically, I would like to..
1) Use angular to load a global scope for the DOM template containing things like site title, navigation, and metadata, all of which will be loaded into the head, header, and footer. The scope would be pulled using a GET request to my Node server.
2) Use angular to load the scope for a given page. This would be on a case-by-case basis for each page. The simple case being to load the scope into the template.
I have succeeded in doing both (1) and (2) separately, but combining them throws an error.
Here is my complete template (actually loaded in parts by Node):
Head - containing ng-controller="configCtrl" for global configuration scope
<html ng-app="angular" ng-controller="configCtrl" ><head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title>{{context.title}}</title>
<meta name="description" content="{{context.description}}">
<meta name="author" content="{{context.author}}">
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head><body><div id="wrapper" >
Body - containing ng-controller="testCtrl" for this particular page scope
<div class="container" ng-controller="testCtrl">
<div class="gutter col hidden-xs"> </div>
<div class="content col" >
<div class="py80">
<h1>{{context.test}}</h1>
</div>
</div>
<div class="gutter col hidden-xs"> </div>
</div>
<!-- ANGULAR CONTROLLER FOR THIS PAGE -->
<script src="/public/js/angular/test_controller.js"></script>
Footer - includes the link to controller for global scope
<footer id="footer" ></footer>
</div></body></html> <!-- close tags-->
<!-- ANGULAR CONTROLLER FOR GLOBAL CONFIGURATION SCOPE -->
<script src="/public/js/angular/config_controller.js"></script>
Here is my Angular controller for the "configuration scope"
var app = angular.module('angular', []);
app.controller('configCtrl', function($scope, $http) {
console.log("config controller");
$http.get('/config').then(function(response){
console.log(response.data);
$scope.context = response.data;
});
});
Here is my Angular controller for the page scope
var app = angular.module('angular', []);
app.controller('testCtrl', function($scope, $http) {
console.log("test controller");
$http.get('/test').then(function(response){
console.log(response.data);
$scope.context = response.data;
});
});
I have some server-side controllers returning data back to angular, as mentioned, they each work when used independently but using them together (as shown above) throws the following client-side error:
angular.js:13920 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=testCtrl&p1=not%20a%20function%2C%20got%20undefined
at angular.js:38
at sb (angular.js:1892)
at Pa (angular.js:1902)
at angular.js:10330
at ag (angular.js:9451)
at p (angular.js:9232)
at g (angular.js:8620)
at g (angular.js:8623)
at g (angular.js:8623)
at g (angular.js:8623)
Any suggestions?
The problem is you are initializing the app twice. Do this only once:
var app = angular.module('angular', []);
And you’ll be fine. Best practice is to separate that line out into another file entirely (like 'app-initialize.js') and then, you can just do:
angular.module('angular').controller(...);
in all of your files.
var app = angular.module('angular', []);
You're calling this line twice (based on your example) which will create a module called 'angular' twice.
Also, instead of using a controller for the configuration, you can create a factory or service and inject it into any controller that needs it.
(roughly:)
var app = angular.module('someApp', []);
app.controller('testCtrl', function($scope, $http, configFactory) {
$scope.getConfig = function() {
configFactory.getConfig()
.success(function (someConfig) {
console.log(someConfig);
});
}
$scope.getConfig();
console.log("test controller");
$http.get('/test').then(function(response){
console.log(response.data);
$scope.context = response.data;
});
});
app.factory('configFactory', ['$http', function($http) {
var getConfig = function() {
return $http.get('/config');
}
return getConfig;
}]);
Alternatively, you can create a configuration module and pass that as a dependency.
var config = angular.module('config', []).constant('config', { 'something': 2 });
...
var app = angular.module('someApp', ['config']);
...
<script src="/library/angularjs/1.2.0-rc.3/angularjs.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-route.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-resource.js"></script>
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.service('Greeter', ['$resource',function($resource){
return $resource(
'http://123.com/processor.php',
{callback: 'JSON_CALLBACK'},
{
query: {method:'JSON_CALLBACK',isArray:true}
});
}]);
app
.controller('MyCtrl', ['$scope', 'Greeter',
function($scope,Greeter){
alert("yes");
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){
alert(response.greeting);
});
};
}]);
</script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
Your name:
<input type="text" name="name" value="World"/>
<button ng-click="greet()">greet</button>
</div>
</div>
The PHP file simply throw out a JSON array, but I saw chrome inspectors tells me that:
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- Greeter
I wonder if there is any syntax error? As the PHP do throw out a valid JSON array.
Thanks
Update1----
I update the code shows that I loaded the resource and angular in the right order.
After Bielski's fix, still, there is error shows (same error)
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- Greeter
Update 2
After runTarm fix, The only trouble now seems the way I reference Greeter is not correct...
ReferenceError: Greeter is not defined
at Scope.$scope.greet (http://123.com/index-query.php:21:5)
which represent this line:
Greeter.query({name:this.name}, function(response){
Update 3
After suggested adding Greeter ad resource, still, the error of below will appear:
TypeError: undefined is not a function
at Scope.$scope.greet (http://123.com/index-query.php:21:13)
Seemingly something is wrong between these 3 lines
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){
You have to include the ngResource in your module's dependency list like this:
var app = angular.module('myApp', ['ngRoute', 'ngResource']);
Another thing is about the greet() function, when you bind a function in ng-click like this:
<button ng-click="greet()">
Angular will look for the greet() function in the controller's scope, but you define the greet() in the controller instance itself.
One way is to move the greet() function into the $scope like this:
app
.controller('MyCtrl', ['$scope', 'Greeter',
function($scope, Greeter){
alert("yes");
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){
alert(response.greeting);
});
};
}]);
The $resource provider isn't being loaded and/or referenced correctly. Two things:
First, you need to make sure that the file 'angular-resource.js' is being loaded in your page, and that it appears in the list of scripts to be loaded BEFORE you load your app.
Second, try setting your service up like this:
app.service('Greeter', ['$resource', function($resource){
return $resource(
'http://123.com/processor.php',
{callback: 'JSON_CALLBACK'},
{
query: {method:'JSON_CALLBACK',isArray:true}
});
}]);
This will give you protection from minification errors and it is sometimes eaiser to spot which providers are missing using this format.
You forgot to add Greeter to the controller function's arguments
app
.controller('MyCtrl', ['$scope', 'Greeter',
function($scope, Greeter){
alert("yes");
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){
alert(response.greeting);
});
};
}]);
I need to create a directive that can be used inside Angular UI modal. This directive also need to know about modal's controller in order to use some functions from it. What I have now:
JS:
'use strict';
var DemoApp = angular.module('DemoApp', [ 'ui.bootstrap' ]);
DemoApp.controller('PageController', ['$scope', '$modal', function($scope, $modal){
$scope.openModal = function(){
var scope = $scope.$new(true);
$modal.open({
'templateUrl' : 'modal.html',
'controller' : 'ModalController',
'scope' : scope
});
}
}]);
DemoApp.controller('ModalController', ['$scope', '$modalInstance', function($scope, $modalInstance){
$scope.ok = function() {
$modalInstance.dismiss();
};
$scope.cancel = function() {
$modalInstance.dismiss();
};
}]);
DemoApp.directive('expression', function() {
return {
restrict : 'A',
require : ['ngModel', '^ModalController'],
link : function(scope, element, attrs, controllers) {
console.log(arguments);
}
};
});
Modal template:
<div class="modal-header">
<h3>Test!</h3>
</div>
<div class="modal-body">
<input data-ng-model="someValue" expression>{{someValue}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">Ok</button>
<button class="btn btn-warning" data-ng-click="cancel()">Cancel</button>
</div>
And the red button:
<button id="demoButton" class="btn btn-primary" data-ng-click="openModal()">Click me!</button>
But when the modal is created ModalController is not resolved, and I get $compile:ctreq error:
Error: [$compile:ctreq] http://errors.angularjs.org/1.2.17/$compile/ctreq?p0=ModalController&p1=expression
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:6:450
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:80)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:137
at Array.forEach (native)
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:280)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:114)
at N (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:54:128)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:82)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:99) <input data-ng-model="someValue" expression="" class="ng-pristine ng-valid">
I tried to debug the code: getControllers() somewhere around 6433 LOC at angular.js is used to search controller: value = value || $element[retrievalMethod]('$' + require + 'Controller');, so I tried to require Modal instead of ModalController (Controller is appended by Angular), but it didn't help. I cannot understand how $element[retrievalMethod] works (stepped into it, but it is to low-level). So, I'm stuck and appreciate any help.
I've created a Plunk, so you can play and see in console what I mean.
Please, checkout updated plunker:
ModalController scope isn't child scope of PageController, so if you need to pass variables to ModalController you should do it through resolving dependencies directly.
In your directive you can set scope as child of ModalController scope, so you can have access to functions defined there instead of requiring ModalController.
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";
});