Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=homeController&p1=not%20aNaNunction%2C%20got%20undefined
I am getting the above error
Controller.js
angular.module('app').controller('homeController', function($scope) {});
app.js
var app = angular.module('app', ['base', 'ngRoute', 'routeResolverServices']);
angular.bootstrap(document, ['app']);
return app;
This doesn't work because of the order of your scripts (and wouldn't work in any order the way you defined it). When Controller.js loads first, there is is still no module named "app". When app.js loads first, it immediately bootstraps the app without the controller.
It's best to define one module per file, for example:
feature1.js
angular.module("feature1", []).controller("homeController", function(){});
app.js
var app = angular.module('app',
['base', 'feature1', 'ngRoute', 'routeResolverServices']);
app.bootstrap(document, ['app']);
and load app.js last:
<script src="feature1.js"></script>
<scirpt src="app.js"></script>
Related
I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?
Currently trying to check very simple angular variables and functions. I cannot get even the simplest to work. This is my first time using it, and I need to use the older version as my lecturer requires it.
In the app.js I have many controllers but im only starting with one controller, with one variable assigned to a string:
var app = angular.module('myApp', ['ngRoute']);
blah blah blah etc etc
app.controller('HomeController', function ($scope) {
$scope.name = 'Batman';
}
In the runner.html file I have the following:
<script src="lib/jasmine-2.2.0/jasmine.js"></script>
<script src="lib/jasmine-2.2.0/jasmine-html.js"></script>
<script src="lib/jasmine-2.2.0/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src='https://code.angularjs.org/1.4.8/angular-mocks.js'></script>
<!-- include source files here... -->
<script src="../js/main.js"></script>
<!-- include spec files here... -->
<script src="spec/test.js"></script>
In the test.js i have the following:
describe('myApp', function () {
var scope, controller;
beforeEach(angular.mock.module('myApp'));
beforeEach(angular.mock.inject(function($controller,$rootScope){
scope = $rootScope.$new();
$controller('HomeController', {$scope: scope});
}));
it('sets the name', function () {
expect(scope.name).toBe('Batman');
});
});
I then get the following error when I run the test:
Error: [$injector:modulerr]
EDIT
It appears to be the angular routing causing the problem. When I removed the route module 'ngRoute' it appears to function correctly. Is there is method to using jasmine with routing?
The problem with this was you were not having angular-route library included despite having it as a module dependency (angular.module('myApp', ['ngRoute'])).
I added as the following along with other libraries:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
And it's working!
Here's working plunker
I have been trying to inject the other module(account.js) into main module (app.js) in a SPA using angularJs as given below
var app = angular.module('UniversityApp', ['ngAnimate', 'ngRoute', 'ngResource', 'ui.bootstrap', 'landing','account']);
angular.bootstrap(document, ['UniversityApp']); throws error "Uncaught Error: No module: myApp "
It should be
angular.bootstrap(document, ['UniversityApp']);
instead
angular.bootstrap(document, ['myApp']);
According to the doc
I have a project which I would like to add a modal to. Great, so I read up and it sounds like the way to go is by using $dialog. I've got angular already, I've got bootstrap and bootstrap-ui.
Reading a post from 2013, they say "Hey, go get The Angular-UI Module, that's where $dialog is!"
Okay, I went to the angular-ui site, and unless I'm really stupid (and maybe I am) there is no such thing as The Angular-UI Module. Nor can I figure out easily which file on that site (since there are a WHOLE bunch) would contain the magical $dialog.
Help?!
This is being included:
<script src="lib/AngularJS/angular.js"></script>
<script src="lib/AngularJS/angular-route.js"></script>
<script src="lib/AngularJS/angular-sanitize.js"></script>
<script src="lib/jQuery/jquery-2.1.1.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-ui/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/angular-file-upload/dist/angular-file-upload-all.js"></script>
var myApp = angular.module("myApp",
['ngRoute',
'angularFileUpload',
'ui.bootstrap.tpls',
'ui.bootstrap.rating',
'ui.bootstrap',
'ngMap',
'ngSanitize']
);
myApp.controller('myController',
['$scope','$rootScope', '$dialog',
function ($scope, $rootScope, $dialog) {
If I remove $dialog from the controller, everything is fine. As soon as I put it in there, I get the unknown provider error.
What you most likely want is $modal
myApp.controller('myController',
['$scope','$rootScope', '$modal',
function ($scope, $rootScope, $modal) {
Read more about it here: http://angular-ui.github.io/bootstrap/#/modal
If I remember correctly, is used to be called $dialog and was since changed.
I'm trying to do some unit tests with Jasmine in my Angular application, but I'm facing some errors.
Error
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
Spec
describe("testing the controller", function () {
var $controllerConstructor;
var scope;
beforeEach(module('app', ['ngRoute', 'LocalStorageModule']));
beforeEach(inject(function ($controller, $rootScope) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
}));
it("should validate a contact", function () {
var ctrl = $controllerConstructor('crmContatosCtrl', { $scope: scope });
});
});
App.js
angular
.module('app', ['ngRoute', 'LocalStorageModule'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
// My routeProvider here
}]);
I'm not using neither Yeoman nor Karma yet, because this is my fisrt application using Angular.
Included Files
<script src="../../Scripts/jasmine/jasmine.js"></script>
<script src="../../Scripts/jasmine/jasmine-html.js"></script>
<script src="../../Scripts/jasmine/boot.js"></script>
<script src="../../Scripts/angular/angular.js"></script>
<script src="../../Scripts/angular/angular-mocks.js"></script>
<script src="../../Scripts/angular/angular-route.js"></script>
<script src="../../Scripts/angular/angular-local-storage.js"></script>
<script src="../../Scripts/ngStorage.js"></script>
<script src="../../Scripts/ng-infinite-scroll.js"></script>
<script src="../../Scripts/angular/common.js"></script>
<link href="../../Scripts/jasmine/jasmine.css" rel="stylesheet" />
<script src="../core/app.js"></script>
<script src="../crm/contatos.js"></script>
<script src="contatosSpec.js"></script>
I think you may simply have a problem with your configuration for the dependencies for the tests. Without Karma I don't know how you do the tests but I guess you have somewhere a configuration file for Jasmine where you specify the files to be included. You have to include all files and you have to include first all the libraries. Be careful with the order and try to respect the same as you have in your html file that you use to run the application.
If the order is wrong the JS will try to execute before the libraries it needs are included. In your case maybe even the whole angular stack.
Update
Do not forget that Jasmine works using it's own html file and will not include the libraries you usually use if you do not tell it. And also don't forget to include Angular Mock library , essential for your tests
Update 2
Ok I think I found why you have a problem
There is something wrong in this code
beforeEach(module('app', ['ngRoute', 'LocalStorageModule']));
In angular when you call a module using module('smthg',[]) you are creating it, not calling it. You should use this form instead, there is no need to reimport the services that you already included in your main module.
beforeEach(module('app'));
check the Creating versus Retrieval section of the angular documentation https://docs.angularjs.org/guide/module