<html>
<head>
</head>
<body>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript">
var appName = "renameMe";
var fooModule = angular.module("foo", []);
var app = angular.module(appName, ["foo"]);
//var app = angular.module(appName, ["ui.router"]);
app.config(["foo", function (foo) {
}]);
angular.element(function () {
angular.bootstrap(document, [appName]);
});
</script>
I cannot figure out how to fix my code from getting the below error. Why am I getting this error and how can I fix it?
My End game is to have a standalone module injected into
app.config(["foo", 'function(foo){}]);
So I can run some custom code
Error: $injector:unpr Unknown Provider Unknown provider: foo
foo module is already included to renameMe module with
var app = angular.module(appName, ["foo"]);
While
app.config(["foo", function (foo) {...}]);
expects that there will be foo service (more specifically, constant service). If there is none, $injector:unpr error is triggered.
If there is supposed to be no foo service, it should be just
app.config(function () {...});
Related
AngularJS: Using angular.module & VM
I have defined my angular module as below and want to use VM as per guidelines. Not sure what I am doing wrong here but it gives me error in console:
Uncaught Error: No module: myApp
Here is my code:
<div ng-controller="Ctrl">
Hello, {{vm.name}}!
</div>
var app = angular.module('myApp');
app.controller('Ctrl', ['$scope', '$http',
function ($scope, $http) {
var vm = this;
vm.name = "John";
}]);
Here is my jsfiddle:
https://jsfiddle.net/dn7pkuf8/
First of, you need to add an empty array(or an array with your dependencies) when you declare your module. Without the array, you will try to fetch the module with the name myApp instead.
var app = angular.module('myApp', []);
Then you need to add the app name to the NgApp directive in the view, else the angular app want bootstrap.
Try it like this
<body ng-app="myApp">
<div ng-controller="Ctrl as vm">
Hello, {{vm.name}}!
</div>
</body>
When you create a new module you must pass an array as the second parameter.
var app = angular.module('myApp', []);
Otherwise it will look for an existing app 'myApp' which doesn't exist.
It looks like you're trying to use ContollerAs syntax. I've set up the plunkr here
Your HTML:
<html>
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
<div ng-controller="Ctrl as vm">
Hello, {{vm.name}}!
</div>
</body>
</html>
Your Javascript:
var app = angular.module('myApp', []);
app.controller('Ctrl', function () {
var vm = this;
vm.name = "John";
});
I couldn't get this working in your jsfiddle, but I think it was basically the syntax correction in the HTML where you use the controller, as well as the points raised by the others here (including ng-app, your javascript module syntax).
You are not using the correct syntax to create the app instance.
The correct syntax is as below
var app = angular.module('myApp',[]);
So what is the meaning of the sysntax you wrote?
var app = angular.module('myApp');
It means you have already created the instance and you wish to use it. Now you will get why angularjs is throwing this error. Because instead of creating a new instance it will look for that instance which is not created.
Note: The additional parameter [] is required to specify the
dependencies. It means you can add the existing angularjs
applications. Means you can add the dependencies and use it.
And you complete js file should like this below
var app = angular.module('myApp',[]);
app.controller('Ctrl', ['$scope', '$http',
function ($scope, $http) {
var vm = this;
vm.name = "John";
}]);
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 decided to add ngInfinitiScroll plugin to my application. Hence i called the file :
<script type="text/javascript" src="{!! asset('/js/ng-infinite-scroll.min.js') !!}"></script>
In my events.js file i initiated the module like this:
(function(window) {
// Define the `app` module
var app = angular.module('stayhyper', ['infinite-scroll']);
app.controller('eventController', ['$scope', '$rootScope', '$http', 'myService',
function($scope, $rootScope, $http, myService) {
} // end of main function
]); // end of controller
})(window);
Then I get the following error:
Error: $injector:unpr Unknown Provider
Unknown provider: myServiceProvider <- myService<- eventController
MyService (this is in a seperate js file which is loaded in the header):
app.service('myService', function() {
this.URL= function() {
// set the main route of the site
var subhost = "/"
if (window.location.host == "localhost") {
subhost = "/myapp/public/"
}
window.urlRoot = window.location.origin + subhost;//main root of the site
return window.urlRoot;
}
this.APIURL= function() {
// set the main route of the site
var subhost = "/api/"
if (window.location.host == "localhost") {
subhost = "/myapp/public/api/"
}
window.urlRoot = window.location.origin + subhost;//main root of the site
return window.urlRoot;
}
});
You need to load the event.js initially and then mainapp.js , then only the module will be created initially, also make sure you have added the references in html for infinite-scroll
So the order will be,
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.js"></script>
<script type="text/javascript" src="mainapp.js"></script>
<script type="text/javascript" src="event.js"></script>
also make sure you are not calling the module again.
I'm having trouble getting started using Jasmine and AngularJS. I've tried to create a minimal example, largely derived from the angular docs:
I have a module and a controller in testme.js:
(function(){
"use strict";
let cont = function($scope) {
$scope.data = 99;
};
let app = angular.module('Test', []);
app.controller('Cont', cont);
}());
I have a test TestSpec.js
"use strict";
console.log('launching test...');
describe('Test a test', function(){
console.log('in describe...');
beforeEach(angular.module('Test'));
it('should create a number', inject(function($controller){
let scope = {};
console.log('in test...');
let ctrl = $controller('Cont', {$scope:scope}); // fails here
console.log('got controller...');
expect(scope.data).toBe(99);
console.log('test completed...');
}));
});
And a SpecRunner.html
<!DOCTYPE html>
<html data-ng-app="Test">
<head>
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="jasmine/lib/jasmine-2.4.1/jasmine.css">
<script src="jasmine/lib/jasmine-2.4.1/jasmine.js"></script>
<script src="jasmine/lib/jasmine-2.4.1/jasmine-html.js"></script>
<script src="jasmine/lib/jasmine-2.4.1/boot.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-mocks.js"></script>
<script src="scripts/testme.js"></script>
<script src="test/TestSpec.js"></script>
</head>
<body data-ng-controller="Cont">
<h1>Value is {{data}}</h1>
</body>
</html>
It seems like it starts up, and I get the messages
launching test...
in describe...
in test...
but it fails trying to execute the line I marked as // fails here, in TestSpec.js. This tells me that I'm not managing to retrieve the controller. Needless to say, I don't understand why (there are many questions on this topic, but they all seem not applicable here, as far as I can see).
Oh, and in case it's relevant, I'm using Angular 1.5:
The error is here
beforeEach(angular.module('Test'));
It should be module.
You should create a new scope as the child of $rootScope. Replace the line to create scope with below in your test:
beforeEach(angular.mock.module('Test'));
it('should create a number', inject(function($controller, $rootScope){
let scope = $rootScope.$new();
console.log('in test...');
let ctrl = $controller('Cont', {$scope:scope});
console.log('got controller...');
expect(scope.data).toBe(99);
console.log('test completed...');
}));
Also you should not use angular.module but angular.mock.module to refer to modules
You're not injecting your controller dependencies, and your structure is a little off. You don't need to assign block level variables.
(function(){
"use strict";
angular.module('Test', [])
.controller('Cont', cont);
Cont.$inject = ['$scope'];
function cont($scope) {
$scope.data = 99;
};
}());
I am learning AngularJS and trying to do my first app where I count the number of characters left in the message text area. However, when I have
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myContactApp", []);
app.controller("nmContactCtrl", function ($scope) {
console.log("In nmContactCtrl");
$scope.message = "";
$scope.charactersLeft = function () {
return 200 - $scope.userMessage.length;
};
});
</script>
the "angular.module" gives error in "var app = angular.module("myContactApp", []);" saying "The global variable angular is not declared". I have the minified angular.js in the script. Not sure why this showing the error.
Please let me know. Thanks.
You're missing a quotation mark.
<script src="http
<html>
<head></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myContactApp", []);
app.controller("nmContactCtrl", function ($scope) {
console.log("In nmContactCtrl");
$scope.message = "";
$scope.charactersLeft = function () {
return 200 - $scope.userMessage.length;
};
});
</script>
</body>
</html>
There are no errors here if I run this locally.
Do you have a 'https' site? Because when I tried to repeat this on jsfiddle I got this error because there was also another one: "The page was loaded over HTTPS, but requested an insecure script"
So, if you use https then you should load AngularJS over https too:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">