Jul 28, 2015

Basics of AngularJS

What AngularJS is
Angular is a very powerful JavaScript library. It is used in Single Page Application (SPA) projects. It extends the HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

Features

  • AngularJS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).
  • Applications written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser and it is a clean Model View Controller (MVC)
Prerequisites
  • Basic understanding of JavaScript and any text editor.
  • Web technologies such as HTML, CSS, AJAX and so on.
  • First, you will learn the basics of AngularJS: directives, expressions, filters, modules and controllers.
  • Then you will learn everything else you need to be familiar with Angular.
  • Events, DOM, Forms, Input, Validation, HTTP.
  • Any other editor like JsFiddle or W3 Schools editor to test the output.
The AngularJS framework can be divided into the following three major parts:
  • ng-app: This directive defines and links an AngularJS application to HTML.
  • ng-model: This directive binds the values of AngularJS application data to HTML input controls (input, select, text area).
  • ng-bind: This directive binds the AngularJS application data to HTML tags and views.
AngularJS is a JavaScript Framework
AngularJS is a JavaScript framework. It is a library written in JavaScript. Within the script tag use an Angular js reference file.


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

Step 1 The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.


 Step 2 The ng-model directive binds the value of the input field to the application variable name.






 Step 3 The ng-bind directive binds the innerHTML of the <p> element to the application variable name.



 ng-init: The ng-init directive initializes AngularJS application variables.

 Expressions: AngularJS expressions are written inside double braces: {{ expression }}. Sample: if you want to add a two digit use , {{4+5}}


AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.



No comments:

Post a Comment