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'])
Related
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);
}
}]);
This world is sad to cry , am blocked for two hours with a problem that i couldnt define ,i can't retrieve data from my json file ,everything in my code seems correct.
This is my factory:
'use strict';
angular.module('starter.services')
.factory('userService',function ($http) {
return{
getUsers:function(){
return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
return response.data;
});
}
}
});
and this controller :
'use strict';
angular.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
$scope.Users = [];
userService.getUsers().then(function (data) { $scope.Users= data.data; }); });
});
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/UserControllerIonic.js"></script>
<script src="js/UsersServiceIonic.js"></script>
</head>
<body ng-app="starter" ng-controller="UsersCtrl">
<ion-view>
<div class = "list" >
<a class = "item" ng-repeat = "user in Users">
<h2>{{user.nom}}</h2>
</a>
</div>
</ion-view>
</body>
</html>
Thank you in advance
SOLUTION
i solved the problem by :
1- adding in the config.xml the permission <allow-navigation href="http://*/*"/>
2-installing cordova-plugin-whitelist ionic plugin add cordova-plugin-whitelist
3-add control-allow-origin extention to chrome :https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en-US
and finally : specifying the type of data returned by the back-end controller by adding this code to my Global.asax in Application_start method :config.Formatters.JsonFormatter.SerializerSettings.Formatting =
Newtonsoft.Json.Formatting.Indented;
config.Formatters.Remove(config.Formatters.XmlFormatter);
hope this helps someone
You don't want to resolve your $http call inside factory.
JS:
angular.module('app',[])
.controller('MainCtrl', function($scope, MyService){
var url = "http://jsonplaceholder.typicode.com/users";
MyService.getData(url).then(function(res){
console.log(res.data);
$scope.data = res.data;
});
})
.service('MyService', function($http){
return {
getData: function(url){
return $http.get(url);
}
}
})
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in data">{{item.name}}</li>
</ul>
</body>
</html>
The issue is that you are resolving the promise in service with the value response.data, and again expecting the resolved value to have data property. Change your service code as below:
'use strict';
angular
.module('starter.services')
.factory('userService',function ($http) {
return {
getUsers: function(){
return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
return response;
});
}
}
});
Or simply return the promise as below:
'use strict';
angular
.module('starter.services')
.factory('userService',function ($http) {
return {
getUsers: function(){
return $http.get("http://localhost:26309/api/User/getAll/");
}
}
});
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
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 am trying to follow along on the eggheads angularJS tutorials. I have the same code however mine is not working...
Here is the code I am using:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="../foundation/css/foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>
</html>
main.js:
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
The problem is angular version.
Your version is 1.3.4 instead of 1.2.3.
App with angular 1.2.3 (egghead) : plunkr
App with angular 1.3.4 :plunker
Hi you've missed couple thing
Declaration of you app :
var app = angular.module('app', []);
Declaration of your controller
app.controller('FirstCtrl', FirstCtrl);
In your html
ng-app="app"
var app = angular.module('app', []);
app.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</body>