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
Related
Problem with ng-controller : Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
I'm beginner in AngularJS, i'm facing a problem while using ng-controller :
this is my code :
<html>
<head>
<title></title>
</head>
<body ng-app>
<div ng-controller="ListDataCtrl">
<div ng-repeat="item in listData">
<p><strong>{{item.name | uppercase}}</strong></p>
<p>{{item.country}}</p>
<p>*********************</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script>
function ListDataCtrl($scope){
$scope.listData =[
{"name":"Achraf", "country":"Tunisia"},
{"name":"Maher", "country":"UAE"},
{"name":"Ahmed", "country":"USA"},
{"name":"Issam", "country":"France"}
];
}
</script>
</body>
</html>
the error message is : angular.js:15567 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
The error indicated that controller is not registered:
The controller with the name 'ListDataCtrl' is not registered.
From AngularJS version 1.3 you have to register your controllers with modules rather than exposing them as globals:
documentation
First of all you need to declare an angularJS module for the app , and then register the controller to that module as below:
<body ng-app="myApp">
In script, app declaration:
var myApp = angular.module('myApp', []);
controller setup:
myApp.controller('ListDataCtrl', ['$scope', function($scope) {
...
}
ncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
You created an anonymous function, but never invoke it:
(function() {
var myApp = angular.module("myApp", []);
myApp.controller("FirstController", function($scope) {
$scope.Name = "Ahmed";
});
})() // add the ();
Also, to make your codepen work, I had to fix the angular import:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"
type="text/javascript">
</script>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="angular-1.6.4/angular.js" type="text/javascript"> </script>
</head>
<body >
<div ng-controller="FirstController">
<span>{{Name}}</span>
</div>
<script>
(function(){
var myApp = angular.module('myApp', []);
myApp.controller("FirstController", function ($scope) {
$scope.Name="Ahmed";
});
});
</script>
</body>
I am new to angularjs and have written a small program but facing the error "scope.detailsForm" as undefined. Could someone help me what is the issue with the below code.
b.js file:
var app = angular.module('my-app', []);
app.controller("my-cont", function($scope) {
$scope.detailsForm.clickme.$setValidity("error1",true);
});
b.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body ng-app="my-app" ng-controller="my-cont">
<form method="get" name="detailsForm" ng-model="detailsForm">
<button name='clickme' ng-disabled="detailsForm.clickme.$error.error1">Click Me!</button>
</form>
</body>
</html>
Your problem is that you can not get it when the controller is not built, you need to wait for the html to be processed by Angular. Here's an example.
As you'll see in the console, the first log will echo undefined, and the second will echo the form.
var app = angular.module('MyApp', []);
app.controller("MyCont", ['$scope', function($scope) {
console.log($scope.detailsForm);
$scope.onClicked = function()
{
console.log($scope.detailsForm);
}
}]);
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.
I am trying to make a simple service call using SOAP services in AngularJS based on this page http://mcgivery.com/soap-web-services-angular-ionic/
But I am getting this error: Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24soapProvider%20%3C-%20%24soap%20%3C-%20CallService
this is my code:
index.html
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<script src="soapclient.js"></script>
<script src="angular.soap.js"></script>
</head>
<body>
<form method="post" action="">
<div ng-app="myApp" ng-controller="MainCtrl">
<div>
<input type="button" value="Call Web Service - Test" ng-click="CallService();" />
</div>
</div>
</form>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', [])
app.factory("CallService", ['$soap',function($soap){
var base_url = "http://10.0.0.70:8080/WS_usrService/WS_usr?wsdl";
return {
getAll: function(){
return $soap.post(base_url, "getAll");
}
}
}])
app.controller('MainCtrl', function($scope, CallService) {
CallService.getAll().then(function(response){
$scope.response = response;
}, function(){
console.log("Something went wrong!");
});
})
Thank you
The error message indicates that Angular cannot find the service $soap, which is defined on the module angularSoap.
According to the official guide, add the module dependency as:
var app = angular.module('myApp', ['angularSoap'])
All the services and controllers are boot strapped in "myApp" in your case.
You have not defined the $soap , while bootstraping the application.
It must be like this var app = angular.module('myApp', ['angularSoap'])