Thursday, July 7, 2016

Angular JS

What is Angular JS?

Angular JS is one of the important framework of JavaScript. It is easy to add Angular JS to any HTML page just with a <script> tag. Angular JS is used bind data to HTML with its Expression and it also extends the attributes of HTML with Directives. Angular JS is library written in Java Script.

It extends the functionality of HTML with new attributes. It is MVW (Model-View-Whatever) structured framework which allow us to create dynamic web application. It is maintained by Google and is allows you to develop with well-constructed web app and it also easy to maintain. It uses declarative programming to build UI. It is client side so all processing is on the browser itself.

Why Angular JS?
  1. We can create and reuse the template any time and whenever we need it.
  2. There are 2 ways to bind the data, which is changing data will automatically change the element and changing element will change the data.
  3. We can directly use the code-behind with HTML.
  4. We can directly validate forms and fields without writing any type of code.
  5. We can control DOM structure.
  6. It allows us to write basic flow end-to-end testing, unit-testing.

In short, Angular JS provides all the functionality to build a CRUD application such as data-binding, data validation, URL routing, reusable HTML components and most importantly dependency injection.

How to use it?


Angular JS can be added to a web page with a script tag:


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
or

<script src="your DIRECTORY/angularjs/1.4.8/angular.min.js"></script>


HTML example


<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
 
<p>Name: <input type="text" ng-model="name"></p>
 
<p ng-bind="name"></p>
</div>

</body>
</html>

We don’t need to start Angular JS it is automatically starts when html page is loaded.
The ng-app is a directive which tells Angular JS that the <div> element is "owner" of an Angular JS app.
The ng-model is also directive which binds the value of the input field to app variable name.
The ng-bind directive binds the inner HTML of the <p> tag to the application variable name.





Other interesting things to know about Agular JS

  • AngularJS is designed to separate your presentation layer from your business logic layer
  • AngularJS is a powerful tool which, when used correctly, can make your presentation layer both more maintainable and more robust
  • It is fully extensible and works well with other libraries




No comments: