Introduction
This tip can be helpful to implement routing in AngularJS and to call WCF service from different controllers by creating a common factory using $http service.
Using the Code
Routing
Routing is used to create SPA (Single page application) in angularJS. We need to include "ngRoute" directive to implement routing.
AngularJS Services
AngularJS provides us with three ways to create and register our own service:
- Factory
- Service
- Provider
I am going to extract the use of factory to act as a common function to call a WCF service from different controllers.
Factories are the most popular way to create and configure a service. You just create an object, add properties to it, then return that same object. Then when you pass the factory into your controller, those properties on the object will now be available in that controller through your factory.
You can set landing HTML page with ng-view directive and you must have implemented routing using AngularJS described as below.
Landing HTML page looks like this:
Home.html
<html ng-app="mainApp">
<head>
<script src="../CommonFiles/AngularJS/angular-1.2.16/angular.js"
type="text/javascript"></script>
<script src="../CommonFiles/AngularJS/angular-1.2.16/angular-route.js"
type="text/javascript"></script>
</head>
<body>
<ul>
<li><a href="javascript:;">
<ul>
<li class=""><a href="#DTHTopup">DTH Topup</a> </li>
<li class=""><a href="#MOBTopup">Mobile Topup</a> </li>
</ul>
</li>
</ul>
<div ng-view>
</div>
<script src="../Controllers/mainController.js" type="text/javascript"></script>
<script src="../Controllers/DTHTopupController.js" type="text/javascript"></script>
</body>
</html>
I have designed home.html page as my landing page. It will act as a master page in ASP.NET.
I am going to open two different HTML pages on home.html page with the help of ng-view directive and AngularJS routing.
I have designed mainController.js to implement routing and to make a common factory to access WCF service with post method.
We must have to include angular.js and angular-route.js on landing page to use angular js with routing.
I have folders CommonFiles, UI, Controllers to set an application.
I have placed mainController.js and DTHTopupController.js inside Controllers folder.
DTHTopup.html is placed inside UI folder.
mainController.js code is shown below:
var app = angular.module('mainApp', '');
app.factory('mainService', function ($http, $q) {
return {
PostData: function (URL, param) {
var deferred = $q.defer();
$http({
url: URL,
method: "POST",
data: param,
contentType: "application/json; charset=utf-8",
dataType: "json"
}).success(function (data) {
deferred.resolve(data);
}).error(function (e) {
deferred.reject();
});
return deferred.promise;
}
}
});
app.config(function ($routeProvider) {
$routeProvider
.when('/MOBTopup', {
templateUrl: '../UI/DTHTopup.html'
})
});
.when('/DTHTopup', {
templateUrl: '../UI/Mobiletopup.html'
})
});
<li class=""><a href="#DTHTopup">DTH Topup</a> </li>
When you click on DTH Topup link, DTHTopup.html page will get displayed in div of home.html.
We can do coding for DTHTopup.html page in different JavaScript file, we can say it as a controller.
Here, DTHTopupController will get loaded while opening DTHTopup.html.
I have created DTHTopupController in DTHTopupController.js.
You can code required for DTHTopup.html in the controller named as DTHTopupController created in DTHTopupController.js file.
DTHTopup.html Page
<div ng-controller="DTHTopupController">
<button type="button" ng-click="DTHRecharge()">
Recharge</button>
</div>
Note: There is no need to define <html>, <head> and <body> tag in this page. Because we have already set this structure in landing page.
I am calling DTHRecharge() function of DTHTopupController controller while clicking on Recharge button.
And calling WCF service using common factory created in mainController.js by passing required parameters and URL to factory.
DTHTopupController.js
var app = angular.module('mainApp');
app.controller('DTHTopupController', ['$scope', 'mainService', function ($scope, mainService) {
$scope.DTHRecharge = function () {
$scope.param = "{"Flag":0,"CustomerMobileNo":"9987654321"}";
$scope.URL = "../Transaction.svc/DTHTopup";
mainService.PostData($scope.URL, $scope.param).then(function (data) {
});
}
} ]);
Here, I have passed two parameters in json format as per the environment set to fetch two parameters in Transaction.svc service.
"mainService" is the name of the factory and PostData is function inside that factory defined in mainController.js.
The $http object is injected into the factory and used to make Ajax calls to the server.
Like this, we can call WCF service from any other controller created using mainApp. We can pass URL and parameters as per our requirements.
Points of Interest
I have implemented routing in business web application like this. I found a common factory consisting $http service to call WCF service with post method. I am using this factory across the web application. Now the web application is running very fast and getting a quick response from the WCF service.
