Understanding Providers in AngularJS

In our previous Article, we discussed about service and Factory. Here is the complete details about Providers.

Provider allows us to create and inject a service into configuration phase of our application. For example, If we want to set API key to access the application, we can set the API key via provider and pass the provider to the application while its in config phase.

Creating Providerservice using $provider service in module.config

Module.config(function ($provide) {

$provide.provider(‘globalSetting, function() {

this.$get = function {

var appname = “My 1^st Application”;

return {

appName: appname

};

}

})

});

Explanation:

1.     Inject $provide built-in service in config method.

2.     Create a provider service by using $provide.

3.     The Provider service function has 2 parameters

i.        The provider service Name.

ii.      Function

4.     The provider must have this.$get function

5.      Return the object literal from this function

Now the “globalSetting” provider is available for all other components. Because it has some properties and methods in a object.

To View about the Complete Article, Please visit our Main Blog.

What is Services and Factory in AngularJS

Services are singleton objects. In other words, It's javascript function to perform a specific task. Angular allow us to use these services with controllers, service, filter or directive.

Whenever we want to use service with the above components, we will have to inject the service name along with the component. By doing so, component ask angular to load that particular service in the application. This method of injecting service is called dependency injection.

To know more about the complete collection of Service lists, please visit Complete lists of Services.

How to use Service withComponents?

To use a service, you will have to add it as a dependency with a component  such as controller, filter  or service. To add a service with component, you have to pass it as an argument.

For Example:

App.controller(“controllerName”, function($scope, $service))

{

});

In the above example we injected our $service along with the controller.

Types of Services:

There are 2 types of Services are available in AngulrJS,

1.     Inbuilt Service

2.     Custom Service

Inbuilt Service:

AngulaeJS provides  many Built-in Services and Each service has individual functions and characteristics. The built-it services are prefixed by $ sign.

For Example,

$http, $filter, $route, etc.,

Custom Services:

AngularJS allows users to create their own Service. You can add any functions and behaviors to the custom service.

For Example,

app.service('servicename', function() {

this.maethodname1 = function() {

......

}

this.methodname2 = function() {

......

}

});

Factory Method:

In the factory method of creating service, we first create empty object of the factory then we assign properties and method to it and at last, we return the factory object. Below syntax is used to create service using factory method.

For Example,

modulename.factory('Factoryname', function() {

var factory = {};

factory.methodname1 = function() {

.............

}

factory.methodname2 = function() {

..............

}

return factory;

});

We can also inject the above existing factory in to our service.

For Example,

app.service('servicename', function(‘'Factoryname'’) {

this.maethodname1 = function() {

......

}

this.methodname2 = function() {

......

}

});

I hope you got a cleared information about service and Factory. To know more about all other topics, please visit AngularJS Complete Topics.

AngularJS Training In Chennai | Best AngularJS Training Institute in Chennai | AngularJS Course in Chennai

Amazing Form Validation by using AngularJS

AngularJS provides an amazing form validation by default. We don't need to write any additional code. AngularJS allows you to get current state of Input Elements and also Forms.
By using the states you can do form validation and also you can set options for the validation messages, like in which state the message should be display.

Here you can get complete collection of AngularJS Topics.

Here are the list of states for Input Elements

• $untouched
• $touched
• $pristine
• $dirty
• $invalid
• $valid
• $error

Here are the list of states for Form

• $pristine
• $dirty
• $invalid
• $valid
• $submitted

To Know more about the above Form and Input states Please visit our Main Blog

Different Types of Filters in AngularJS

AngularJS provides number of inbuilt Directives and we don't need to write any additional code to get the filter feature. By adding the filter component, we can access the features. Here I have listed of list of Filters.

1.Currency

2.Date

3.Filter

4.json

5.lowercase / uppercase

6.orderBy

To know about the full description of the above Filters, Please click Complete collection of AngularJS File.

Top 10 Directives in AngularJS

Directives are the normal HTML Syntax. AngularJS allows you to extend existing HTML syntax with new attributes called as Directives. AngularJS comes with set of inbuilt Directives and all the Directives has individual behaviors.

All the Directives are starts with the prefix of “ng-”. Also AngularJS allows the developer to create custom Directives with custom behaviours.

Here are the list of Top 10 Directives in AngularJS,

1.     ng-app

2.     ng-model

3.     ng-bind

4.     ng-click

5.     ng-controller

6.     ng-hide / ng-show

7.     ng-if

8.     ng-include

9.     ng-repeat

10. ng-submit

To know More about the above 10 Directives, Please Visit Top 10 Directives of AngularJS.

5 Pillars of AngularJS

We saw a Brief Introductionof AngularJS in our Previous Article. Here You go about the Main 5 Pillars of AngularJS. As we know that Starting an AngularJS Application is incredibly very Easy.

You can Implement Angularjs in your Application by just 2 stpes.

Step 1:

Just you need to include the Angularjs Library file in your HTML <head> Tag.

<script scr=”angulrjs.js”></script>

Step 2:

Initialize the Angularjs Module in you Application with root element of AngularJS.

<HTML ng-app>

That’s it, You have successfully implemented AngularJS in your Application.

To know more about the Trending Framework - AngularJS Visit us.

Here we go about the main 5 pillars of AngularJS. It will be helpful for further going. The names of 5 pillars are,

1.     Directives

2.     Controllers

3.     Scopes

4.     Services

5.     Dependency Injection

Lets see a glance about the above 5 pillars.

Check AngularJS lists of Other components also.

1. Directives

Directives are nothing but HTML Tags and attributes. AngularJS has plenty of inbuilt Directives and each directive has individual behaviors.

It extends existing HTML Tags with additional Attributes. AngularJS allows you to create your own Directives. It means you can create a directive in your name, like <your-name></your-name>

ng-bind, ng-controller, ng-model, etc., are the examples of Directives. Here the prefix ng represents “Angular”.

You can use ng-bind as data-ng-bind, ng_bind, ng:bind, x-ng-bind. But the good practice is ng-bind.

2. Controllers

In AngularJS Controllers are defined by JavaScript constructor function. It is used to controller Application data. The controller has very important property which is $scope . The controller should be light weight and shouldn’t add too much works here.

Mainly use controller for,

1.     Set up the initial state of $scope Object.

2.     Adding behavior (methods) to the $scope object.

All the controllers are attached with HTML  DOM via ng-controller directive.

For example,

<div ng-controller=”myCtrl”></div>

3.Scopes

$Scope is a regular JavaScript Object. It refers to the application data model. Scope is a property of controller. The scope may contain any kinday of data. All the inputs and responses are passed via the $scope. The Scope is available in both view and controller.

In view, the Scope attached with ng-bind directive or  via the expression {{}}

4.Services

In AngularJS Services are objects. The services are implemented in any controller via Dependency Injection. Once we injected the services into the controller, we can start to use. There are plenty of inbuilt services and also you can create custom services via the module. The services are start with “$”.

Examples of services are,

$http, $location, $timeout, $interval etc.,

5. Dependency Injection

Dependency Injection is software design pattern in which components are given dependencies to other components. Instead of rewrite the code from scratch, we can reuse via Dependency Injection. 

To know more about the other components in AngularJS, Click Here.