Introduction

AngularJS is a JavaScript structural framework for dynamic web apps. It can be used in a HTML page with a <script> tag. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.
To use AngularJs you need to add the following reference to your application.
  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
Now we will learn AngularJS step-by-step.

How AngularJS Extend HTML?

When we read about AngularJS we hear many times that AbgularJS extends HTML. It uses ng-directives to extend HTML.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  2. <!DOCTYPE html>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <form id="form1" runat="server">
  11. <div ng-app="">
  12. <p>Enter Your Name:
  13. <input type="text" ng-model="Name">
  14. </p>
  15. <p ng-bind="Name"></p>
  16. </div>
  17. </form>
  18. </body>
  19. </html>
  1. Here ng-app declares that the application will run under the AngularJS framework.
  2. The ng-model directive binds the value of the input field to the application variable name.
  3. The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
ng-init directive for initializing AngularJS application variables
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  2. <!DOCTYPE html>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <form id="form1" runat="server">
  11. <div ng-app="">
  12. <div ng-app="" ng-init="Name='Priyanka Mathur'">
  13. <p>Your Name is:
  14. <span ng-bind="Name"></span>
  15. </p>
  16. </div>
  17. </div>
  18. </form>
  19. </body>
  20. </html>
AngularJS Expressions Double braces
{{ expression }} is used to write AngularJS expressions.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  2. <!DOCTYPE html>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <form id="form1" runat="server">
  11. <div ng-app="">
  12. <p>Expression In AngularJS: {{ 10 + 10 }}</p>
  13. </div>
  14. </form>
  15. </body>
  16. </html>
AngularJS Applications with AngularJS Architecture
  1. AngularJS modules define AngularJS applications.
  2. AngularJS controllers control AngularJS applications.
  3. The ng-app directive defines the application, the ng-controller directive defines the controller.
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
    2. <!DOCTYPE html>
    3. <html
    4. xmlns="http://www.w3.org/1999/xhtml">
    5. <head runat="server">
    6. <title></title>
    7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    8. <script>
    9. var app = angular.module('myApp', []);
    10. app.controller('myCtrl', function ($scope) {
    11. $scope.Name = "Rahul Saxena";
    12. $scope.Email = "[email protected]";
    13. $scope.Address = "Noida, India";
    14. });
    15. </script>
    16. </head>
    17. <body>
    18. <form id="form1" runat="server">
    19. <div ng-app="myApp" ng-controller="myCtrl">
    20. Name:<input type="text" ng-model="Name">
    21. <br><br>
    22. Email:<input type="text" ng-model="Email">
    23. <br><br>
    24. Address:<input type="text" ng-model="Address">
    25. <br><br>
    26. <b> Employee Information:</b> {{Name + " " + Email + " " +Address}}
    27. </div>
    28. </form>
    29. </body>
    30. </html>
    Use Number in AngularJS
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
    2. <!DOCTYPE html>
    3. <html
    4. xmlns="http://www.w3.org/1999/xhtml">
    5. <head runat="server">
    6. <title></title>
    7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    8. </head>
    9. <body>
    10. <form id="form1" runat="server">
    11. <div ng-app="" ng-init="Product=5;Cost=20">
    12. <p>
    13. <b>Total Cost Of your Order:</b> {{ Product * Cost }}
    14. </p>
    15. </div>
    16. </form>
    17. </body>
    18. </html>
    When initializing and using take care of case because AngularJS is case sensitive.
    Using Object in AngularJS
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
    2. <!DOCTYPE html>
    3. <html
    4. xmlns="http://www.w3.org/1999/xhtml">
    5. <head runat="server">
    6. <title></title>
    7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    8. </head>
    9. <body>
    10. <form id="form1" runat="server">
    11. <div ng-app="" ng-init="employee={Name:'Rahul Saxena',City:'Noida'}">
    12. <p>
    13. <b>Employee Information</b> {{ employee.Name + " - " + employee.City}}
    14. </p>
    15. </div>
    16. </form>
    17. </body>
    18. </html>
    Arrays in AngularJS
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
    2. <!DOCTYPE html>
    3. <html
    4. xmlns="http://www.w3.org/1999/xhtml">
    5. <head runat="server">
    6. <title></title>
    7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    8. </head>
    9. <body>
    10. <form id="form1" runat="server">
    11. <div ng-app="" ng-init="Employee=['Priya Mathur','Rahul Saxena','Sara Sinha']">
    12. <p>Employee at position 0: {{ Employee[0] }}</p>
    13. <p>Employee at position 1: {{ Employee[1] }}</p>
    14. <p>Employee at position 2: {{ Employee[2] }}</p>
    15. </div>
    16. </form>
    17. </body>
    18. </html>
    Perform Data Binding in AngularJS
      1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
      2. <!DOCTYPE html>
      3. <html
      4. xmlns="http://www.w3.org/1999/xhtml">
      5. <head runat="server">
      6. <title></title>
      7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      8. </head>
      9. <body>
      10. <form id="form1" runat="server">
      11. <div ng-app="" ng-init="product=1;cost=5">
      12. Product Quantity:<input type="number" ng-model="product">
      13. <br />
      14. <br />
      15. Product Cost:<input type="number" ng-model="cost">
      16. <br />
      17. <br />
      18. Total Cost: {{ product * cost }}
      19. </div>
      20. </form>
      21. </body>
      22. </html>
      Repeat in AngularJS
      1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
      2. <!DOCTYPE html>
      3. <html
      4. xmlns="http://www.w3.org/1999/xhtml">
      5. <head runat="server">
      6. <title></title>
      7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      8. </head>
      9. <body>
      10. <form id="form1" runat="server">
      11. <div ng-app="" ng-init="Employees=['Rahul','Shiva','Ram','Poonam']">
      12. <ul>
      13. <li ng-repeat="x in Employees">{{ x }}</li>
      14. </ul>
      15. </div>
      16. </form>
      17. </body>
      18. </html>
      Controller with Method In AngularJS
      1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
      2. <!DOCTYPE html>
      3. <html
      4. xmlns="http://www.w3.org/1999/xhtml">
      5. <head runat="server">
      6. <title></title>
      7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      8. <script>
      9. var app = angular.module('myApp', []);
      10. app.controller('personCtrl', function ($scope) {
      11. $scope.Name = "Rahul Saxena";
      12. $scope.Email = "[email protected]";
      13. $scope.Address = "Noida";
      14. $scope.EMP_Info = function () {
      15. return $scope.Name + " " + $scope.Email + " " + $scope.Address;
      16. }
      17. });
      18. </script>
      19. </head>
      20. <body>
      21. <form id="form1" runat="server">
      22. <div ng-app="myApp" ng-controller="personCtrl">
      23. Name:<input type="text" ng-model="Name">
      24. <br>
      25. <br />
      26. Email:<input type="text" ng-model="Email">
      27. <br>
      28. <br>
      29. Address:<input type="text" ng-model="Address">
      30. <br>
      31. <br>
      32. <b>Employee Information :</b> {{EMP_Info()}}
      33. </div>
      34. </form>
      35. </body>
      36. </html>
        The next part will come with more. Continued.