Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

AngularJS Service

In daily life term Service!!

Simple explanation of term “service” is doing work for someone, example in hotel Chef provides service to hotel or he is doing work for customers.

In technical language

A service offered by a one resource or device to another resource or device communicating with each other via the World Wide Web.

What is AngularJS Service?

In simple word AngularJS service is an object that does some sort of work.

With AngularJS service objects are wired together using dependency injection (DI), you can use service to organize, share and reuse code.

Why AngularJS service?

Following are four main reasons JavaScript applications require Service

1. Code organizing and architecture

2. Code share and code reuse

3. Loosely coupled binding

4. Solid principles like Single Responsibility Principle (SRP) and the Dependency Inversion Principle (DIP).


Inbuilt AngularJS Services

AngularJS provides some inbuilt Services following are some,

$http, $route, $window, $location, $animate, $compile, $filter, $locale etc.

Using inbuilt Service Example

With Following code example we used inbuilt service $http to retrieve data from server

  <script>
    var myApp = angular.module("myApp",[]);
    myApp.controller('myCtrl',function($scope, $http) {
 
    var url = "https://test.codechef4u.com/usersData/users?userid=nk54ts";
    $http.get(url).then(function(response) {
     $scope.users = response.data;
   });
   });
 </script>

 

Angular services are,

Lazily instantiated
Angular only instantiates a service when an application component depends on it.
Factory or Singletons
Each component dependent on a service gets a reference to the single instance generated by the service factory.


Creating a custom service

You can create your own service using following two approach,

Factory

Using factory method you first define factory and then assign method to it, check following sample example for clear understanding.

Example

    <script>
    var CalcApp = angular.module("mathApp", []);
    CalcApp.factory('CalService', function () {
    var factory = {};
 
    factory.AddNumbers = function(a, b, c ) {
    return a + b + C
    }
 
    return factory;
    });
    </script>

Service

With service first define service and then assign method to it, check following sample example for clear understanding.

Example

   <script>
    var CalcApp = angular.module("myApp", []);
    CalcApp.service('CalcService', function () {
        this.myFunc = function (a,b) {
            return a-b;
        }
    });
    </script>

धन्यवाद मित्रानो ... 


AngularJS limitTo Filter

    What is AngularJS limitTo Filter?

     AngularJS limitTo Filter,

      1.     Allows you to create new array or string containing only a specified number of elements.

      2.     The array elements are considered either from beginning or end of source (array, string, numbers), specified by the value and sign (positive or negative) of limit.

      3.      If you are using input filed then its value is converted into string.

      Syntax:

{{object | limitTo : limit : begin }}

Parameter value

Description

limit

A number count specify number of elements to return.

begin

This is optional parameter, a number specify where to begin limitation.

 

Example:

<body>
    <div ng-app="myApp" ng-controller="EmployeeController">
        Id: {{Employee.id}}
        <br />
        User Name:{{Employee.userName }}
 
        <!--limitTo filter -->
        <ul>
            <li data-ng-repeat="myObject in Employee.Projects | limitTo : -2">id:{{myObject.id}} name:{{myObject.name}} Team Size:{{myObject.TeamSize}}</li>
        </ul>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('EmployeeController', ['$scope', function ($scope) {
            $scope.Employee = {
                id: 1,
                userName: 'sKendre;',
                name: 'Shourya Kendre',
 
                Projects: [
                    { id: 1, name: 'E shop', TeamSize: 5, isActive: true },
                    { id: 2, name: 'Employee Notifier', TeamSize: 3, isActive: true },
                    { id: 3, name: 'CRM', TeamSize: 10, isActive: false }
                ]
            };
        }]);
    </script>
</body>
 

 

AngularJS Date Filter

Date Filter

Date filter formats date to a string based on the requested format.

The date can be a date object, milliseconds, or a date time string like "1985-04-05 12:08:15.773"

Syntax:

{{ date | date : date format : timezone }

Parameter Value

Description

Format

'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)

'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)

'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)

'MMMM': Month in year (January-December)

'MMM': Month in year (Jan-Dec)

'MM': Month in year, padded (01-12)

'M': Month in year (1-12)

'LLLL': Stand-alone month in year (January-December)

'dd': Day in month, padded (01-31)

'd': Day in month (1-31)

'EEEE': Day in Week,(Sunday-Saturday)

'EEE': Day in Week, (Sun-Sat)

'HH': Hour in day, padded (00-23)

'H': Hour in day (0-23)

'hh': Hour in AM/PM, padded (01-12)

'h': Hour in AM/PM, (1-12)

'mm': Minute in hour, padded (00-59)

'm': Minute in hour (0-59)

'ss': Second in minute, padded (00-59)

's': Second in minute (0-59)

'sss': Millisecond in second, padded (000-999)

'a': AM/PM marker

'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)

'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year

'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year

'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD')

'GGGG': The long form of the era string (e.g. 'Anno Domini')

 

Date formats filter supports following predefined string formats also

 

 a. medium: equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)

 

 b. short: equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)

 

 c. fullDate: equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)

 

 d. longDate: equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)

 

 e. mediumDate: equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)

 

 f. shortDate: equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)

 

 g. mediumTime: equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)

 

 h. shortTime: equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)

timezone

This is optional parameter, used to format the date.

 

Example

<body>
    <div ng-app="mydateApp" ng-controller="EmplDeatilController">
      
        User Name:{{Employee.userName }}
        <br />
        <!--date filter predefined format -->
        Birth Date:{{Employee.BirthDate | date:'medium' }}
 
        <br />
        <!--date filter with specific year -->
        Birth year:{{Employee.BirthDate | date:'y' }}
 
        <br />
        <!--date filter with specific month -->
        Birth Month:{{Employee.BirthDate | date:'MMMM' }}
 
        <br />
        <!--date filter with specific time (hours) -->
        Birth Time:{{Employee.BirthDate | date:'h' }}
 
    </div>
    <script>
        var app = angular.module('mydateApp', []);
        var dateOut = new Date('1985-04-05 12:08:15.773');
        app.controller('EmplDeatilController', ['$scope', function ($scope) {
            $scope.Employee = {
                userName: 'sKendre;',
                name: 'Shourya Kendre',
                BirthDate: dateOut
 
            };
        }]);
    </script>
</body>

 धन्यवाद मित्रानो ...