Angular JS with ASP.NET Master Pages

Question

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

Where can we define the app and controller attributes on the Child Page.
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)

Alvin Saldanha · Accepted Answer · 2016-07-22 10:08:54Z

2

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']);

answered Jul 22, 2016 at 10:08

Alvin Saldanha

91610 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hamid Saberi · Accepted Answer · 2015-08-16 08:17:36Z

0

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.

answered Aug 16, 2015 at 8:17

Hamid Saberi

1371 silver badge11 bronze badges

4 Comments

Ashutosh Vyas Over a year ago

By the looks of it, the Named Sections are for Razor and not ASPX syntax. My application is an ASP.NET one and not MVC. Secondly, the mainApp gets me data to display in the Navigation Bar at the top and Footer at the bottom. Therefore it is required in the Master Page.

Hamid Saberi Over a year ago

Oh! Sorry, I don't attention to your project type. I tested it in a web forms application. It seems that the problem isn't the location of your script tag in child page. I guess that you have a ng-app in your master page. If there is so, the problem is that, because you can have only one ng-app in your angular application.

Ashutosh Vyas Over a year ago

Thats correct and thats what is my problem for which I need a solution. How can I use the app for my master page to get details for navigation bar, footer and other common places while still continue to use native apps for the content pages. For the time being I have resorted to NOT using master pages and it seems to be fine. However there has to be a way out which I do not know :(

Hamid Saberi Over a year ago

You can't have more than one ng-app in your page, but you can have multiple ng-controllers and nested ones. You can add the controller of the child pages to the main application module. If you have some thing like this in your "mainPageApp": var app = angular.module('mainPage', ['ui.bootstrap', 'templateModule', 'ngCookies']); you can have this in your "cityPage": app.controller("cityPageCtrl", function($scope, $http, $modal, $cookies, $interval). Or angular.module('mainPage').controller(... this will add "cityPageCtrl" to "mainPage" module, which is set in ng-app of the master page.

Collectives™ on Stack Overflow

Angular JS with ASP.NET Master Pages

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related