8

Estou envolvido com o angularJS por estes dias, então, nesta fase de aprendizagem, me surgiu uma dúvida.

Como eu trabalho com o angularJS em páginas asp.net que tenham uma master page?

POr exemplo, eu percebi que a diretiva "ng-app" deve ser colocada na tag html da página. Mas essa tag existe basicamente na master page. Se eu usar por exemplo: ng-app="Pessoa.js", como poderia em outra página filha, usar por exemplo, ng-app="Produto.js"?

Sei que isto deve ser bem básico e que posso estar confundindo as coisas, mas é que já tenho um projeto asp.net web-forms legado, e não vou poder mudar ele para MVC para fazer do jeito "ideal" digamos assim. Estou mexendo com Web Api e AngularJS neste projeto que já existe (só pra facilitar o entendimento).

1 Resposta 1

2

Exemplo bem prático sobre o assunto, na verdade não muda muito.

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>

Nesse MasterPage, temos as diretivas ng-app="app" e na uma div ng-controller="ctrl", sendo que temos no head um ContentPlaceHolder aonde nas páginas que carregam essa MasterPage pode haver a manipulação do angular, exemplo:

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>

Resultado ao rodar a página com o nome de Angular.aspx

inserir a descrição da imagem aqui

Certamente esse item tem uma lógica para que funcione, mas, tudo depende da maneira como você vai montar.


3 - Somente diretivas nas filhas:

<%@ 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>

Observe que: a chamada estão <ul ng-app="app" ng-controller="ctrl"> como você quer, ou seja, somente nas páginas filhas. A única coisa que está na MasterPage são os <script src="Scripts/angular.min.js"></script>, para facilitar o manuseio.

5
  • Oi Maria, obrigado pela ajuda. Mas, eu só poderia ter um arquivo app.js neste caso, confere? Eu tenho várias páginas filhas, e não usaria somente um controle como você colocou ali naquela div. Me parece que do jeito que você fez aí, eu vou precisar fazer tudo neste arquivo app.js, ou estou enganado (ainda não manjo muito de angular).
    – Eduardo
    21/08/2014 às 15:16
  • Está enganado @Murphy, porque, isso é um exemplo que você pode explorar e colocar a sua implementação, ou seja, não tem limitação. Se quiser melhorar seu questionamento por favor o faça que talvez melhora a resposta!
    – Maria
    21/08/2014 às 15:19
  • Oi @Maria, desculpe se não me expressei bem ok? Sou grato pela sua ajuda. Justamente por não manjar muito de angular, talvez minha pergunta fique confusa. Mas em resumo, eu queria saber se: 1) em uma aplicação que usa angular, eu tenho um único app.js? 2) Não queria colocar nenhuma implementação das diretivas do angular na master page, e sim nas filhas. Como eu faria isto?
    – Eduardo
    21/08/2014 às 16:01
  • Se pode ter vários js, no que vem realçar o que eu disse, vai depender mesmo da programação ... Vou editar e colocar aquilo somente na Angular.aspx, Ok!
    – Maria
    21/08/2014 às 18:43
  • 1
    Wow, obrigado Maria.
    – Eduardo
    21/08/2014 às 20:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .