AngularJS: Factory, Service and Provider

Posted on

Tallerconcepts & Angularjs

AngularJS: Factory, Service and Provider

Introduction:

AngularJS is a powerful JavaScript framework which is widely used for SPA (Single Page Application) projects. The library of this framework is written in JavaScript and distributes as a JavaScript file which can be added into a webpage by using script tag. It extends the HTML DOM with additional attributes and allows the pages to become more responsive to user actions. AngularJS library is completely free, open source and very much popular JavaScript library among all. The library is being used by thousands of developers and applications as well.

In AngularJS, there are some keywords used for different purposes such as Controllers, Service, Factory and Provider etc. The controller is used to handle the connection, request and responses made through your application and must be light. It means most of the persistent data and business logic of your application must be stored in a service. Services in AngularJS holds the data around for the application lifetime and can be easily accessed through different controllers. AngularJS library offers developers with three different ways to register their own services – Factory, Service and Provider.

Services:

The syntax for a service is as follows:

app.service(‘serviceName’, function() {});

AngularJS instantiates services in the background of your application with a ‘new’ keyword. This is why developers can use the property ‘this’ and the relevant service will return the expected value of ‘this’. If you pass the service into your controller then all the properties and attributes of ‘this’ will now be available on that controller through your defined service.

When you are declaring serviceName as an injectable argument then you’ll be provided with the instance of a function passed to app.service. The services of AngularJS could be useful while sharing utility function that are useful to invoke by simply appending () to the injected reference of a function.

Factories:

The syntax for factories in AngularJS is as follows:

app.factory(‘factoryName’, function() {} );

You simply create an object when you are using a factory. It means you add properties and attributes to it and then return the same object. When you pass your factory object into your controller then all the defined attributes and properties on the object will now be available in that controller through your defined factory.

When your are declaring factoryName as an injectable argument then you’ll be provided the value that is returned by calling the function reference passed to app.factory. These factories could be useful for returning a ‘class’ function that can then be ready to generate an instance using ‘new’ keyword.

Providers:

The syntax for providers in AngularJS is as follows:

app.provider(‘providerName’, function() {

});

app.config(function (providerNameProvider) {

// define your config here for this provider

});

The providers in AngularJS is the only service which can be passed into your .config() function. It exposes the API for the application-wide configuration that must be prepared before the start of your application. The providers are used when developer want to provide module-wide configuration for a service object before making it available.

Conclusion:

The single page applications are composed to objects that collaborate to get request response done as expected for end-users. All these objects must be instantiated when they required and wired together in order to function properly. In AngularJS so far we learn that these objects are instantiated and wired together automatically by a variety of injector services such as Services, Factories and Providers. The applications developed using AngularJs library are very much lighter and highly responsive for your targeted users.

AngularJs Forms

Posted on

         AngularJs Forms – creation, submission and validation

Tallerconcepts & Angularjs

Introduction:

The developers were already submitting and validating forms before AngularJS came out in the market. There are a number of ways available to submit a form and lots of ways to validate it as well. AngularJS has always strived to offer tools to manipulate form in an easier way. A form can be easily validated and submitted using Ajax forms and AngularJS built-in validation functionalities. There are also third-party modules available to help developers to deal with forms such as angular-formly. In this article, we’ll explain the complete walkthrough of creating, validating and submitting a form in AngularJs.

Form and controls provide validation services for end users so that they can be notified of invalid input before submitting a form. It offers a better user experience than server side validation as the user gets instant feedback on how to correct input errors. Keep in mind that, the server side validation is more secure than client side validation.

These are the steps developers should follow to deal with AngularJs forms:

Create a form: In this section, we’ll understand how we can create a form in AngularJS and set their different properties as well. The form creation in Angular is similar to any other language and can have all the existing form input types. The example below has an input type inside a form in which end users provide their values.

<form name=”formExample” role=”form” novalidate>

<div class=”form-group” >

<label>Username</label>

<input name=”username” type=”text” maxLength=10 class=”form-control” data-ng-model=”formData.username” id=”username” placeholder=”Username” required>

</div>

</form>

In this example, we are using a single text box type input for the username. The ng-model property is used to display data fetched from the backend.

Validate form: AngularJS offers some basic implementation for all input types such as text, number, email, date, URL, checkbox and radio buttons, as well as some directives for a variety of validations such as pattern, minlength, maxlength, required, min and max etc.

 

<div class=”form-group” ng-class=”{ ‘has-error’ : submitted && formExample.username.$invalid }”>

<label>Username</label>

<input name=”username” type=”text” ng-minlength=”3″ ng-maxlength=”8″ class=”form-control” data-ng-model=”formData.username” id=”username” placeholder=”Username” required>

<div ng-show=”submitted && formExample.username.$invalid” class=”help-block”>

<p ng-show=”formExample.username.$error.required”>Username is required</p>

<p ng-show=”formExample.username.$error.minlength” class=”help-block”>Username is too short.</p>

<p ng-show=”formExample.username.$error.maxlength” class=”help-block”>Username is too long.</p>

</div>

</div>

In the above example, the same form field is validated for minimum and maximum length for username field.

 

  1. Form submission: In AngularJS, you can submit a form in two different ways –
  1. Using ng-submit attribute on the form element and
  2. Using a button element with ng-click attribute

In both the above submission methods, a JavaScript function is invoked on the $scope object. The developers can attach this JavaScript function to the $scope object in your controller. The data from your form element must be sent to your server through AJAX.

 

$http.post(‘/form’,$scope.formData).

then(function(response) {

//success response

$scope.submittedData.push(response.data)

$scope.formData = {};

$scope.submitted = false;

alert(“The form was posted to the httpBackend”)

}, function(response) {

//error response

});

The alternate way to submit a form to the server is using resource property of AngularJs. An example of such submission will be as follows:

 

var Forms = $resource(‘/form’);

Forms.save($scope.formData, function(data){

$scope.submittedData.push(data)

$scope.formData = {};

$scope.submitted = false;

alert(“The form was posted to the httpBackend”)

});
Conclusion: So this is a simple way to create, validate and submit a form in AngularJs. The library is dedicated to simplifying the handling of forms for developers as much as possible. There are some third party libraries also available that can be used for handling form for your application. The validation at the front end is not as secure as backend validation as it can be compromised in user’s system using few lines of codes.

 

For more content checkout the Repo

AngularJS “1.x to 2.x”

Posted on

Tallerconcepts & Angularjs

The migration from AngularJS 1.x to AngularJS 2.x has opened a whole new world of possibilities for frontend development here at Taller Concepts. Our core principal of Being Taller means we offer services that are head and shoulders above the rest. Included in that promise is staying on the forefront of coding developments. When the Google Team announced that they would be upgraded from 1.x to 2.x, Taller Concepts ensured we are on the forefront of development by relishing the change. We did not see this change as a challenge. Other developers were not pleased that 2.x would be incompatible with 1.x. We, however, were excited by the new world of possibilities. We chose to look at the change as a fresh start with a horizon of endless opportunities. Innovation excites rather than frightens us.

While Google did release news of 1.5.x, an intermediary release which will allow a smoother transition between 1.x and 2.x, some people still saw concerns which promoted Google to release more information including a simple guide and a unique AngularJS library. Inside developers went so far as to announce that the ng-upgrade and Angular 2 would be in the existing Angular 1 app, to help users “mix and match,” according to Softpedia.

Developers here at Taller Concepts think the differences between 1.x and 2.x are interested. The hard and new developments that 2.x presents are electrifying. We are prepared to weather the projected storm of the transitional phase with positive attitudes, innovated approaches, and an optimistic outlook. We love the adventure that AngularJS 2.x promises. At times frontend development feels like the Wild West or the new frontier of the digital revolution, and that is what we love about the speed and agility of changes in the coding world. Taller Concepts keeps pace with things like the migration from 1.x to 2.x because we look forward to updates and new models of coding, just as the people who fared well in Wild West or on harsh seas. We look forward to change, rather than shying away from it. Where others see potential problems, we see opportunities for revolution.

Taller Concepts also likes some of the features of AngularJS 2.x because they align with our other two core principles: partnership and belief. At various conferences presenters have introduced a suite of benchmarks which showed AngularJS 2.x as approximately two times faster and three times more efficient in memory usage than 1.x. We like double the speed and triple the efficiency. We will extract the maximum benefits of those upgrades for the organizations we partner with by presenting them with a high quality, visually stunning, and unforgettable online experience.