I am new to Angularjs and have written my app.js which has the run function defined. I also have a custom service called coreService which I need to inject into the run function. When I inject, I get an error stating
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- coreService http://errors.angularjs.org/1.4.7/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20coreService
I am using the angularjs-fullstack yeoman generator to develop the application. Please let me know where I am going wrong. Link to Plnkr - Plnkr link
I corrected your code you have many errors there.Take a look at PLUNKER You cannot call $scope inside service.
'use strict';
angular.module('myApp')
.service('coreService', function () {
var sayHi=function(){
console.log("Hi..");
}
return {
sayHi:sayHi
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<script src="https://code.angularjs.org/1.4.6/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
<script src="script.js"></script>
<script src="coreService.js"></script>
</body>
</html>
And rename your coreService to coreService.js
Rename coreService to coreService.js and include coreService.js after script.js.
Related
I have a factory service as below
FamilyService.js
(function(){
'use strict';
angular.module('app')
.factory('ABC', FamilyService);
FamilyService.$inject = ['DEF'];
function FamilyService(DEF) {
function returnTrue() {
var a="true";
}
}
}());
I want to call returnTrue method in My test case
**TestFamilyService.js**
describe('testing my_controller.my_function', function () {
var mockedFactory, $rootScope, $controller;
beforeEach(module('app', function($provide) {
mockedFactory = {
save: jasmine.createSpy()
};
$provide.value('ABC', mockedFactory);
}));
it('should call the save function', function() {
expect(mockedFactory.returnTrue()).toHaveBeenCalled();
});
});
**specrunner.html**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.4.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
<script src="lib/jasmine-2.4.1/jasmine.js"></script>
<script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.4.1/boot.js"></script>
<script src="lib/jasmine-2.4.1/angular.js"></script>
<script src="lib/jasmine-2.4.1/angular-mocks.js"></script>
<!-- include source files here... -->
<script src="src/Player.js"></script>
<script src="src/webapp/Mock.js"></script>
<script src="src/webapp/FamilyService.js"></script>
<!-- include spec files here... -->
<script src="spec/TestFamilyService.js"></script>
</head>
<body>
</body>
</html>
When i run specrunner.html in the browser it displays
Error: No module: app
TypeError: Unable to get value of the property 'returnTrue': object is null or undefined
Please Tel me whats wrong here?
In FamilyService.js
angular.module('app').factory('ABC', FamilyService);
you are creating a factory for the existing module app, but if the module doesn't exist you need to write
angular.module('app',[]).factory('ABC', FamilyService);
In your case just create a new file, where the angular module gets created
angular.module('app',[]);
UPDATE
Just include the dependencies of your module in the html
<script src="lib/angular-sanititze/angular-sanitize.js"></script>
If you want to mock these modules, you can do something like
beforeEach(function() {
angular.module('second',[]);
}
But in the case that you are using some methods of the third party library, you need to mock these methods as well.
I am trying to learn angular, and I am stuck in first chapter :-(
I am using angular 2.0, but when i try to create a module I get error "angular is not defined".
My plunker: Plunker:
my script:
(function() {
console.log("Hello");
var app = angular.Module("gitHubViewer", []);
app.controller("MainController", MainController);
var MainController = function($scope) {
$scope.message = "Hello World!";
};
}());
HTML:
<html ng-app="gitHubViewer">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular.js" data-semver="2.0.0-alpha.20" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Can some body please help, is this a wrong way of creating module?
Thanks
Please check https://code.angularjs.org/2.0.0-alpha.20/angular.js link.
Display 404 Not Found.
Please download angularJS From https://angularjs.org/ and add it in your project.
I've not looked into Angular 2 very much but your code looks more like Angular 1 to me.
Angular 2 apps are bootstrapped in a very different way using ES6 components (specifically System). It should look more like this:
<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>
This code was taken from this excellent tutorial: Getting Started with Angular 2.0.
I've got a very simple angular app that I can not figure out what is wrong with. The code is on plunkr here: http://plnkr.co/edit/QQkP2HB6VGv50KDdBPag?p=preview and generates the error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: testService
The code is below
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>simple problem I can not figure out</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script type="text/javascript">
(function() {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.service('testService', function (testService) {
});
myAppModule.config(['testService',
function (testService) {
}]);
})();
</script>
</head>
<body >
<div ng-app="myApp">
<div>
myApp Here
</div>
</div>
</body>
</html>
There are multi phase in angular bootstraps process. in config phase you can just inject provider. for example you can use this code:
myAppModule.config(['testServiceProvider',
function (testServiceProvider) {
}]);
To get more information please check this link:
https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection#configuring-providers
I have a problem with boostrapping an angularjs app - with initialization code in the controller. The simplified test-case is like this (index.js):
var myApp = angular.module( 'myApp', []);
myApp.controller( 'myAppController', [ '$scope', function($scope) {
console.log('never shown');
$scope.test = 'constructor called';
// removed more init code
}]);
$(document).ready(function(){
angular.bootstrap( document, ['myApp']);
console.log('Finished boostrapping.');
});
The HTML file for this test-case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TeST</title>
</head>
<body>
{{test}}
<script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
The result is that console output only says "Finished bootstrapping" - and the controller function is never invoked. .. This baffles me a little, but this is my first angular 1.2 app. I get the same result If I put ng-app="myApp" in the tag and let angular bootstrap the app automatically. ...
you never set ng-controller anywhere in your markup.
also, you should either put your script tags in the head, or after </body>.
edit: when using bootstrap this way, the placement of the <script> tags goes matter.
The first parameter to the angular.bootstrap method is an element. Currently you are passing in document, which is not an element.
Try
angular.bootstrap(document.documentElement, ['myApp']);
or
angular.bootstrap(document.body, ['myApp']);
I'm trying to run a simple hello world example and can't get it to work. What am I doing wrong here? I keep getting 'Uncaught Error: No module: myapp' error in the chrome console.
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<title>Angular App</title>
</head>
<body>
<div ng-controller="TextController">
<h1>Angular App says {{greeting.message}}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
<script type="text/javascript">
var myModule = angular.module('myapp',[]);
myModule.controller("TextController", function($scope){
$scope.greeting.message = "hello world!";
});
</script>
</body>
</html>
Here's the JSFiddle link: http://jsfiddle.net/HdR2c/1/
You can't self close script tags first of all so you need to change your angular include to be the following:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
Then change your $scope.greeting.message var to something like $scope.greetingMessage. The way you are currently doing it you are looking for an attribute called "message" in a greeting object.
You can't self-close script tag. This is wrong:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
You should close it this way:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
Make sure your module definition have the argument [] blocks in it, even though they are empty.
angular.module('module_name',[]);