PU$]-[KAR's

… Every drop has ability to survive .


Leave a comment

Introduction to AngularJS service

As we know angularJS is one of the leading framework now a days, the reason is it can used across the platforms even provides stability across the devices as well. It means it is compatible for application to run on laptops, desktop, smartphone & tabs. & for that separation of concern is at the heart while designing an AngularJS application. So to maintain this modularity i.e. separation angularJS has proposed two designs.

  1. Service
  2. Factory

Because while writing code controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or manipulating it. Not anything about business logic should be in controller.

Brief about AngularJS service:

As documented Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
Thus service is a stateless object that contains some useful functions. These functions can be called from anywhere; Controllers, Directive, Filters etc. So it increases modularity and reusability too.

So what are key advantages of putting a business logic in services?

  1. It fulfills the principle of separation of concern or segregation of duties. Each component is responsible for its own work making application more manageable
  2. This is the way by which each component can be more testable. AngularJS provides first class support for unit testing. Thus we can quickly write tests for our services making them robust and less error prone. For writing unit tests cases we can use Jasmine framework too.
  3. Increases reusability and modularity so that it reduces code maintainability efforts.

In angularJS there are two types of service that we can use.

  1. Internal Services: AngularJS provides few services like $location, $windows, $http that we can use as it is in our controller using dependency injection.
  2. Custom Services: This means we can write our own service in angularJs and we can use them via dependency injection.

Example of custom service:

If you see below I have created a sample service for addition of number.
app.service('MathSampleService', function() {
this.add = function(a, b) { return a + b };});

And this service is injected in controller to use that business logic.
app.controller('CalculatorController', function($scope, MathSampleService) {
$scope.doAdd = function() {
$scope.answer = MathSampleService.add($scope.number1,$scope.number2);}});

But keep it in mind while injecting service in controller name of service should be exact.

This is very simple and basic example.In real life scenario even we can inject one service into another service too.So If you observe our overall business logic remains inside a service and controller is just responsible for binding data to UI nothing else than that.

For Complete demo please look at the following link:

click here

Advertisements


1 Comment

Routing in AngularJS

Back to basics!!!

Routing is one of the key feature that angularJS is supporting on the background of MVC principles.Basically angularJS routing is a strong weapon while developing SPA (Single Page Application).

Brief about SPA:

As name suggest ‘single-page-application’ is application or web site which contains only single page to provide more fluid experience to user comparatively similar desktop application. The page does not reload at any point in the process, nor does control transfer to another page.
So SPA can contains more than one html pages and that need to be routed perfectly on any event such as navigation or application state transfer or as per requirement. Using multiple html files result into avoiding server trips.

Routing concept:

Routing is a technique in which html pages are transited conditionally based on certain condition.
This routing in angularJs is mainly rely on ‘ng-view’ and ‘$route’ service. The role of the ngView directive is to include the view template for the current route into the layout template.It means ‘ng-view’ acts as placeholder to render those html which will displayed on UI on demand. (similar to partial view in MVC) & ‘$route’ service is responsible for selecting a particular html to be displayed on UI based on selection criteria.

Routing code should be written under config section of defined module. as shown in code snippet, here we have defined it under module ‘app’ as app.conig. It uses ‘$routeProvider‘ api. If you observe code in ‘when()clause is used for selecting specific html based on selection criteria.

JS Code:

app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addView', {
templateUrl: 'addView.html',
controller: 'addCtrl',
resolve: {
resolvedVal: function() {}}})
.when('/deleteView', {
templateUrl: 'deleteView.html',
controller: 'deleteCtrl',
resolve: {
resolvedVal: function() {}}})
.when('/editView', {
templateUrl: 'editView.html',
controller: 'editCtrl',
resolve: {
resolvedVal: function() {}}});}]);

As showed in code snippet ‘when’clause contains three components as listed below:

1. template: This holds html which is going to be displayed.
2. controller:This holds ‘controller’ which is bound to that html.
3. resolve: This contains condition which should be checked before rendering that html. So it might looks as check-point for html.

‘otherwise’ clause acts as default condition in switch case. It means if any conditions fails to match with ‘when’ in that case ‘html’ specified in ‘otherwise’ will get routed.

For Complete demo please look at the following link:

click here


Leave a comment

Localization of bootstrap datepicker control

Continuing  with datepicker control

In newer version of bootstrap they even have provided way to show customize day/month in datepicker control. It can be used to localize day/month name. ‘$.fn.datepicker.dates’ is the property that we can use to customize our calender control. Consuming this property we can modify following properties of datepicker control. 1. days 2. daysShort: Can be used to give short name to days like ‘Sun’ for ‘Sunday’ 3. daysMin: Can be used to give a very tiny name. e.g. ‘Su’ for ‘Sunday’ 4. months 5. monthsShort: Can be used to give short name to months like ‘Jan’ for ‘January’ even few more options are there that we can be used to customize calender e.g ‘today’,’clear’. Following code can illustrate it in more details.

JS

$.fn.datepicker.dates['en'] = { days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], daysMin: ["Su1", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], months: ["January1", "February1", "March1", "April1", "May1", "June1", "July1", "August1", "September1", "October1", "November1", "December1"], monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]};

Description:

It you can see in above code ‘months’ & ‘daysMin’ are used to modify/localize calender control.

Important:

While implementing ‘$.fn.datepicker.dates’ it should be written before ‘$(‘#datepickerControlId’).datepicker({})’

For Complete demo please look at the following link:

click here