Wednesday, May 18, 2016

Introduction of AngularJs

AngularJs is an open source Javascript MVC framework. It is maintain and developed by Google. Google employee Misko Hevery started work on AngularJS in 2009. Its first version 1.0 was released in 2012. It make both development and testing easier. You should have the knowledge of HTML, CSS and JavaScript to use AngularJs in your web project. 1.5.5 is the latest version of AngularJs.

Angular JS is used to build the Single page web application. It extends the HTML DOM (Document Object Model) by adding directive.

Definition of AngularJs of on its website:

“AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.”

How to add AngularJs to web page?

We can add the Google CDN URL of AngularJs :

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

Or Download the latest version from official website, put it in Js folder of project and link to web page.

Directive:
AngularJs directive are used to create the custom HTML attributes. ng- or data-ng- is the special attribute, it is used as prefix with directive.

ng-app : It defines the root  element of application. You can define it with body <body ng-app="">. You can also define it on particular section like div <div ng-app="">.

ng-model : It defines the model that bind the value of textbox, text area to application variable.

ng-bind : It display the data that we enter in input, text area etc.


Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body data-ng-app="">
    <form id="form1" runat="server">
    <div >    
    Enter Your City Name : <input type="text" data-ng-model="city" />  <br />  
    <p>City Name : <span data-ng-bind="city"></span></p>
    </div>
    </form>
</body>
</html>

 DEMO :
Introduction of AngularJs




No comments:

Post a Comment