A very practical example on the subject does not really change much.
1 - MasterPage.aspx
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteMasterPage.master.cs" Inherits="WebApplicationForms.SiteMasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/angular.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="ctrl">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
In MasterPage , we have the ng-app="app" directives and a div ng-controller="ctrl" , where we have in head a ContentPlaceHolder where in the pages that load MasterPage there can be manipulation example:
2 - Angular.Aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/SiteMasterPage.Master" AutoEventWireup="true" CodeBehind="Angular.aspx.cs" Inherits="WebApplicationForms.Angular" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
angular.module('app', [])
.controller('ctrl', function ($scope)
{
$scope.itens = [
{ "Numero": 1, "Nome": "AAAAAA" },
{ "Numero": 2, "Nome": "BBBBBB" }
];
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ul>
<li ng-repeat="item in itens">{{item.Nome}}</li>
</ul>
</asp:Content>
Result when rotating the page with the name of Angular.aspx
Surelythisitemhasalogicforittowork,but,italldependsonthewayyouaregoingtomountit.
3-Onlypoliciesondaughters:
<%@PageTitle="" Language="C#" MasterPageFile="~/SiteMasterPage.Master" AutoEventWireup="true" CodeBehind="Angular.aspx.cs" Inherits="WebApplicationForms.Angular" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
angular.module('app', [])
.controller('ctrl', function ($scope)
{
$scope.itens = [
{ "Numero": 1, "Nome": "AAAAAA" },
{ "Numero": 2, "Nome": "BBBBBB" }
];
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ul ng-app="app" ng-controller="ctrl">
<li ng-repeat="item in itens">{{item.Nome}}</li>
</ul>
</asp:Content>
Note that: the call is <ul ng-app="app" ng-controller="ctrl"> as you want, that is, only on the child pages. The only thing that is in MasterPage is <script src="Scripts/angular.min.js"></script> , to make handling easier.
