Very practical example on the subject, it doesn’t 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 that Masterpage, we have the directives ng-app="app" and in a div ng-controller="ctrl", being that we have in the head one ContentPlaceHolder where on the pages that carry this MasterPage there can be angular 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
Surely this item has a logic for it to work, but, it all depends on the way you will assemble.
3 - Only directives on daughters:
<%@ 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 ng-app="app" ng-controller="ctrl">
<li ng-repeat="item in itens">{{item.Nome}}</li>
</ul>
</asp:Content>
Note: the call are <ul ng-app="app" ng-controller="ctrl"> as you want, ie only on the pages daughters. The only thing that is in the MasterPage are the <script src="Scripts/angular.min.js"></script>, to facilitate handling.
Hi Maria, thanks for the help. But, I could only have an app.js file in this case, check? I have several pages daughters, and I wouldn’t just use a remote like you put in that div. It seems to me that the way you did there, I’ll need to do everything in this app.js file, or I’m wrong (still not much of angular manjo yet).
– Eduardo
You are mistaken @Murphy, because, this is an example that you can explore and put your implementation, IE, has no limitation. If you want to improve your question please do so which may improve the answer!
– Maria
Hi @Maria, sorry if I didn’t express well ok? I am grateful for your help. Just because I don’t eat too much angular, maybe my question gets confused. But in short, I wanted to know if: 1) in an application that uses angular, I have a single app.js? 2) I didn’t want to put any implementation of the angular directives on the master page, but on the daughters. How would I do this?
– Eduardo
If it can have several js, in what comes to highlight what I said, will depend even on programming ... I’m going to edit and put that only on Angular.aspx, OK!
– Maria
Wow, thank you Maria.
– Eduardo