« Previous Page Next Page »
    

Introduction to AngularJs and its benefits.

POSTED

AUTHOR: VARUN SINGH

In this tutorials, I am going to introduce about AngularJs. AngularJs is java script framework developed by Google that helps to build web applications. AngularJs is a open source java script project which means we can change or shared by anyone. Angularjs is an excellent framework for building both single page business web applications and line of page business web applications.
We know that within market we have several javascript framework that help to build web applications. So why we need Angularjs? Today I will introduce all about AngularJs and its benefits over Java Scripts.



angularjs-introduction

What are the benifits of AngularJs over javascript framework that already we have?

    → Dependency injection
    → Two way Data binding
    → Testing
    → Model view controller
    → Diectives, Filters etc


To build AngularJs Application we need only one file that is called angular.min.js . You can download it from official site angularjs.org and use it within head section.
Another way to link AngularJs Library to your html page without download it. Just give the web link https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js within script tag in head section.





How to add AngularJs Library to your html page?

First way: You can get a web link from official site angularjs.org and use it within head section:


<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
 </head>
<body>

</body>
</html>



Second way: You can download it from official site angularjs.org and use it within head section:


<html>
     <head>
         <script src="js/angular.min.js"> </script>
     </head>
<body>

</body>
</html>


Html enhanced for web Apps using AngularJs:

AngularJS extends HTML with some ng-directives.

    • ng-app: The ng-app directive defines an AngularJS application.
    • ng-model: The ng-model directive binds the value of HTML controls to application data.
    • ng-bind: The ng-bind directive binds the innerHTML of the element to the application variable name.
    • ng-init: The ng-init create a variable when initiating the application.





• Lets see some examples using directives:


ng-app with expression: The ng-app directive tells AngularJS that the element is the "owner" of an AngularJS application.

<html>

   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

<body>

   <div ng-app>
  <p> Value of 10+20:  {{10+20}} </p>
   
   </div>
   
</body>

</html>


Try it Yourself

ng-model with expression: The ng-model directive binds the value of the input field to the application variable name.


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>


Try it Yourself

ng-app with expression and ng-bind: The ng-init create a variable when initiating the application.


<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
<center>
<br><br>
 <div ng-app="" ng-init="site='CoderGlass'; founder='Varun Singh';">
   <strong>Site: </strong>{{site}}<br>
   <strong>Founder:</strong> <span ng-bind="founder"></span>
</div>

</center>
</body>

</html>


Try it Yourself


The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.

« Previous Page Next Page »

Comments: