Overview about AngularJs

AngularJS History

AngularJS version 1.0 was released in 2012.

Miško Hevery, a Google employee, started to work with AngularJS in 2009.

The idea turned out very well, and the project is now officially supported by Google.

What is AngularJS?
AngularJS is a JavaScript framework. It is a library written in JavaScript. you have access it from here
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="text/javascript"></script>


Basic AngularJS directives

Actually the directive starts with data-ng,  but You can use ng-, instead of data-ng, the html gets understand this is AngularJS  directives.  some of directives are listed below

1. ng-app
2. ng-init
3. ng-model
4. ng-bind
5. Expressions
6. Module
7. ng-controller
8. ng-repeat
9. ng-click

1. ng-app

• In c language the program starts with void main(). Like as AngularJS  identify our program starts with here. So the ng-app directive initializes an AngularJS application. 

       2. ng-init

• The ng-init directive initializes application data. (i.e) the default value of our HTML controls (input, select, textarea).

       3. ng-model

• The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. (i.e) like act as a temporary storage memory. 

        4. ng-bind

• The ng-bind directive binds application data to the HTML view. (i.e) shows data from temporary storage memory.  So here keep that same Address (value) of ng-model. (i.e) ng-model and ng-bind are twins.

         5. Expressions

• AngularJS expressions can be written inside double braces: {{ expression }}. It can also be written inside a directive: ng-bind="expression". It contains literals, operators, and variables and also perform actions.
• For Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
• <input style="background-color:{{ClrName}}" ng-model="ClrName" value="{{ClrName}}">

         6. Module

• The module is a splitter of an our application. We can split our whole complicated application into little bit of units by using this Module
• Controllers always belong to a module.
• For example <script>  var app = angular.module("myApp", []);  </script>
• here myApp defines for ng-app 

         7. ng-controller

• We can access the Variable values and user defined function by using this controller. Controllers always belong to a module. for Example

              <Script>

                 var app = angular.module("myApp", []);

                 app.controller("myCntrl", function ($scope, $http) {

                           $scope.Show = function () {

                                  alert($scope.Name);

                            };

                  });

               </Script>

             <div ng-app="myApp" ng-controller="myCntrl">

                  <input type="text" id="Name" ng-model="Name" />

                  <input type="button" value="Show" ng-click="Show()" />

            </div>

      8. ng-click

• It's like as onclick or onclientclick in asp.net. you can use javascript function name within this ng-click
• for example  <input type="button" value="Show" ng-click="Show()" />