CODEWITHSUNDEEP
javascriptjqueryasp.netangularjs
Ashutosh Vyas
Ashutosh Vyas

Reputation: 419

Angular JS with ASP.NET Master Pages

I am trying to user Angular JS with an ASP.NET Application.

I defined the app for my Main Page (Master Page) and it works fine. Now I run into multiple problems with other pages.

While I define a child page that consumes this master page, it has to use its own App. So

  1. Where can we define the app and controller attributes on the Child Page.
  2. If I define them on a DIV container it does not like it. It says - Argument 'cityPageCtrl' is not a function, got undefined

In my master page, I have added the references as below :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="<%=ApplicationPath %>lib/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="<%=ApplicationPath %>cust/js/templateApp.js"></script>
    <script src="<%=ApplicationPath %>cust/js/mainPageApp.js"></script>
    <script src="<%=ApplicationPath %>lib/js/parallax.min.js"></script>

In my child page, below is the code that I have to consume another ng application:

<asp:Content ID="Content1" ContentPlaceHolderID="headContent" runat="server">
    <script src="../cust/js/cityPageApp.js"></script>
    <title ng-bind="'Restaurants in '+cityName+' | Restaurants'">Restaurants in your city serving online | Online Restaurnats</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" runat="server">
   <div ng-app="cityPage" ng-controller="cityPageCtrl">
</div>
</asp:Content>

Below is what I have in my cityPage js file to define App for Angular.

var app = angular.module('cityPage', ['ui.bootstrap', 'templateModule', 'ngCookies']);
app.controller("cityPageCtrl", function($scope, $http, $modal, $cookies, $interval)

Upvotes: 0

Views: 4189

Answers (2)

Alvin Saldanha
Alvin Saldanha

Reputation: 916

Ideally you should be creating multiple modules for this. Your child page should create a module of its own which should then be added as a reference to your main module. 

    var mainApp= angular.module('main', ['childApp']);  //child 1

You can also try to manually bootstrap using the angular.bootstrap

    angular.bootstrap(document.getElementById("divId"), ['myChildModule']);

Upvotes: 2

Hamid Saberi
Hamid Saberi

Reputation: 137

You can use named sections to add each child page's script files.

In your master page:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="<%=ApplicationPath %>lib/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="<%=ApplicationPath %>cust/js/templateApp.js"></script>
    <script src="<%=ApplicationPath %>cust/js/mainPageApp.js"></script>
    <script src="<%=ApplicationPath %>lib/js/parallax.min.js"></script>

    @RenderSection("AngularScripts", required: false)

And in your child page:

@section AngularScripts
{
   <script src="../cust/js/cityPageApp.js"></script>
}

You should reference only general script files in your master page, and move other files to appropriate child pages. for example if the "mainPageApp.js" is only for one page, remove it from master page and put it in the child page.

Upvotes: 0

Related Questions