AngularJS is providing lot of extraordinary build in feature. One among many feature is creating a custom service.
We can have an custom service which can be reused in many controllers.
In below sample I had created a common service for $http and displaying responses from different controllers.
URL is passed as dynamic input parameter to the service and the service will send response back to the controller. The code is mode easy and self explanatory.
HTML Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/httpFactory.js"></script>
</head>
<body ng-app="skMain">
<div ng-controller="skCtrl1">
VALID HTML RESPONSE DATA : {{mydata}}
</div>
<br/>
<div ng-controller="skCtrl2">
INVALID HTML RESPONSE DATA : {{getResponse}}
</div>
</body>
</html>
AngularJS Example
///
//Angulare module
var skMain = angular.module("skMain", []);
//Declaring controller
skMain.controller("skCtrl1", skCtrl1);
skMain.controller("skCtrl2", skCtrl2);
//declaring service/factory
skMain.factory("httpFact",httpFact);
//Controller has farctoy injected
function skCtrl1($scope, httpFact) {
//Get http response from factory for valid HTML page
httpFact.getData("httpFactory.html")
.then(
function (response) {
//getting success response
$scope.mydata = "Success --> httpFactory.html : status"
+ response.status + " " + response.statusText;
console.log(response);
},
function (response) {
//getting failure response
$scope.mydata = "Failed --> httpFactory.html : status"
+ response.status + " " + response.statusText;
});
}
//Controller has farctoy injected
function skCtrl2($scope, httpFact) {
//Get http response from factory for valid HTML page
httpFact.getData("httpFactory1.html")
.then(
function (response) {
//getting success response
$scope.getResponse = "Success --> httpFactory.html : status"
+ response.status + " " + response.statusText;
},
function (response) {
//getting failure response
$scope.getResponse = "Failed --> httpFactory.html : status"
+ response.status + " " + response.statusText;
console.log(response);
});
}
//Defining factory method. getDate will be returned as http response
function httpFact($http) {
return {
getData: function(myUrl) {
return $http({
method: "GET",
url: myUrl
});
}
}
}
Result:
VALID HTML RESPONSE DATA : Success --> httpFactory.html : status 200 OK
INVALID HTML RESPONSE DATA : Failed --> httpFactory.html : status 404 Not Found
We can have an custom service which can be reused in many controllers.
In below sample I had created a common service for $http and displaying responses from different controllers.
URL is passed as dynamic input parameter to the service and the service will send response back to the controller. The code is mode easy and self explanatory.
HTML Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/httpFactory.js"></script>
</head>
<body ng-app="skMain">
<div ng-controller="skCtrl1">
VALID HTML RESPONSE DATA : {{mydata}}
</div>
<br/>
<div ng-controller="skCtrl2">
INVALID HTML RESPONSE DATA : {{getResponse}}
</div>
</body>
</html>
Saved above html name " httpFactory.html"
AngularJS Example
///
//Angulare module
var skMain = angular.module("skMain", []);
//Declaring controller
skMain.controller("skCtrl1", skCtrl1);
skMain.controller("skCtrl2", skCtrl2);
//declaring service/factory
skMain.factory("httpFact",httpFact);
//Controller has farctoy injected
function skCtrl1($scope, httpFact) {
//Get http response from factory for valid HTML page
httpFact.getData("httpFactory.html")
.then(
function (response) {
//getting success response
$scope.mydata = "Success --> httpFactory.html : status"
+ response.status + " " + response.statusText;
console.log(response);
},
function (response) {
//getting failure response
$scope.mydata = "Failed --> httpFactory.html : status"
+ response.status + " " + response.statusText;
});
}
//Controller has farctoy injected
function skCtrl2($scope, httpFact) {
//Get http response from factory for valid HTML page
httpFact.getData("httpFactory1.html")
.then(
function (response) {
//getting success response
$scope.getResponse = "Success --> httpFactory.html : status"
+ response.status + " " + response.statusText;
},
function (response) {
//getting failure response
$scope.getResponse = "Failed --> httpFactory.html : status"
+ response.status + " " + response.statusText;
console.log(response);
});
}
//Defining factory method. getDate will be returned as http response
function httpFact($http) {
return {
getData: function(myUrl) {
return $http({
method: "GET",
url: myUrl
});
}
}
}
Result:
VALID HTML RESPONSE DATA : Success --> httpFactory.html : status 200 OK
INVALID HTML RESPONSE DATA : Failed --> httpFactory.html : status 404 Not Found
xhtml sample codes
ReplyDeleteBasic XHTML table