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>

First Add new webform - Add Masterpage - Head section Contentplaceholder inside add AngularJs Script Plugin

Next - Add ng-app add to div tab - ng-modal add for name,mobile,email  and bind {{ng-bind}} individually even with total binding