Wednesday 16 September 2015

Introduction to Angular JS - HTML enhanced for web apps!


Today let’s have brief introduction about angular JS, which becomes very popular web app development framework among developers. We cover following points in our article

  • What is angular JS?
  • Why angular JS? OR purpose of angular JS?
  • What are the alternatives of angular JS?
  • What controls are providing by angular JS?
  • Features of angular JS?
    • Components.
    • Backend
    • Main feature: built –in facility: Injectable & testable:
  • Example
  • Conclusion

What is angular JS?

Angular JS is a framework to develop dynamic web apps. It is template language by using extended HTML’s code which can help to express your application’s components to user. 

Why angular JS? OR purpose of angular JS?

Angular JS is used for creating mobile application. No doubt, that HTML is most likely use for delivering static declaring documents. But, when required to declaring dynamic views to the web – applications at that time the angular JS is comes in picture.

The angular JS helps to create dynamic views with extended HTML vocabulary for web – applications. And also give extraordinary expressive, readable & quick ways to develop applications.

What are the alternatives of angular JS?

Here, alternative means I try to introduce other frameworks who work like angular JS.

Ionic.
Sencha Touch.
JQueary Mobile.
Kendo UI.
Framework 7.
Knockout.
Backbone JS.
Ember JS.
And many more…

These are the other frameworks who can also deal with HTML’s short tags either by abstracting away HTML, CSS, and JavaScript or by providing a mandatory way for manipulating the DOM model.

All these are the hybrid with the HTML, CSS, & JavaScript & jQuery. But, let us gleams about the particular framework that is Angular JS.

What controls are providing by angular JS?

Data binding:

Data – binding are two types respectively early binding & late binding in other words static binding or dynamic binding.

Whatever the variables, references, objects, when created they have either primitive or non primitive, class_type, or instance of any class or superclass.

As we know that the data – binding is one of the OOPs concepts which can follows the auto updating way whenever the changes are required, it can updated models & manage auto view changes also. This is very good because it eliminates DOM manipulation which can be bad impact to data – binding.

Controller:

Controllers are representing a JavaScript Constructor Function which can help to augment angular scope.

When a controller is used to the DOM model via the ng-controller directive, Angular JS will instantiate a new Controller object, using the specified Controller’s constructor function.

In short, Controllers are the behavior behind the DOM model’s elements. And, Angular JS will express the behavior in a clean & readable form.

Features of angular JS?

As I said ago, it is a just framework to develop dynamic web apps. With that it is provide so many features to developer as well users also. Let’s took look on these features of Angular JS.

Provide Components: like; directives, reusability, and localization.

Provide Backend Processes: like; deep linking, from validations, and server communications.

Main feature provided as built-in facility: like; Injectable & testable.

General features are: like as below;
  • Easy to learn and implement.
  • Stable API.
  • Backend by Google.
  • Nicely integrated with CSS, HTML & jQuery.
  • Two-way data binding.
  • Dependency injection or management.
  • Ready templates.
  • Predefine Services.
  • Abstracted the DOM.
  • Unit test runner.
  • Integration test runner.
  • Cross-module communication.
  • Animation support.
  • AJAX/JSONP.
  • RESTful API.
  • MVC support.
  • And many more

By these features I can assure you that the angular JS is provide lot of things which all are very useful to create web – application as efficiently. It’s also saves the memory as well as time of developer with good result.

Example:

<html ng-app = “myContactApp”>

     <script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”>
</script>

<body>
          <div id = “heading” ng-controller = “myContactApp”>
                    <h3> My Contact </h3>
          </div>
          <div id= “form”>
                   <form>

                   First Name: <br> <input type = “text” ng-model = “co.firstName”><br>
                   Last Name: <br> <input type = “text” ng-model = “co.lastName”><br>
                   Contact No: <br> <input type = “number” ng-model = “co.coNo”><br>
<button ng-click = “save ()”>save</button>
<button ng-click = “cancel ()”>cancel</button>
</form>
                             <p>form = {{co}} </p>
</div>

<script src = “myContactApp.js”></script>
<script>
          var app = angular.module(‘myContactApp’,[]);
          app.controller (‘formCtrl’, function ($scope)
{
          $scope.master = {FirstName: “abc”, LastName: “def”, CoNo: “9999999999”};
$scope.reset=function ()
{
          $scope.user = angular.copy ($scope.master);
};
$scope.reset ();
}
);
        </script>

</body>
</html>

Conclusion

Angular JS is everything for web – application developer. Because, it provides good qualitative & interactive performances with every supporting files, & codes. That’s why Angular JS framework is mostly common choice by the application developer. It’s allows two-way data binding, interaction with backend services. It helps to create interactive applications. With supportive HTML, CSS & JavaScript files & structure. I suggest that all developer, can just do experience at least once with the Angular JS. 

At Kensvalley, Our developers are using Angular JS to provide better user experience to clients web application.

No comments:

Post a Comment