AngularJs Using in Masterpage Asp.Net

AngularJs Using in Masterpage Asp.Net

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. 

The AngularJS Components

1.ng-app   - AngularJS application to HTML.

2.ng-model - AngularJS application data to HTML input controls.

3.ng-bind - AngularJS Application data to HTML tags.

Ex : {{ng-bind}}

What is AnjularJS

DEMO

HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ng-app ContentPlaceHolderID="head" Runat="Server">

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

     

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div align="center" ng-app>

        <h1>AnjularJs Using in Masterpage</h1>

<table><tr><td>

    <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>

    </td><td>

        <asp:TextBox ID="TextBox1" ng-model="name" runat="server"></asp:TextBox>

    </td><td style="color:red">{{name}}</td></tr>

    <tr><td>

        <asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>

        </td><td>

            <asp:TextBox ID="TextBox2" ng-model="email" runat="server"></asp:TextBox>

        </td><td style="color:red">{{email}}</td></tr>

    <tr><td>

        <asp:Label ID="Label3" runat="server" Text="Mobile Number"></asp:Label>

        </td><td>

            <asp:TextBox ID="TextBox3" ng-model="mobile" runat="server"></asp:TextBox>

        </td><td style="color:red">{{mobile}}</td></tr>

    <tr><td colspan="2" style="color:deeppink">{{name}},{{email}},{{mobile}}</td></tr>

</table>

    </div>

</asp:Content>