user3211705 user3211705 - 5 months ago 22
AngularJS Question

Controller file (.js) is not loaded in browser - angular js

I have created a simple Single page application with angular js. I have a index page in which the route is defined and the ng-view is called.

Index.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="SPA.Views.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head runat="server">
<title>SPA</title>

<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<body data-ng-controller="Index as ind">
<form id="form1" runat="server">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>

<ul class="nav navbar-nav navbar-right">
<li><a href="" data-ng-click="openDashboard()"><i class="fa fa-home"></i> Dashboard</a></li>
<li><a href="" data-ng-click="openAbout()"><i class="fa fa-shield"></i> About</a></li>
<li><a href="" data-ng-click="openContact()"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>

<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">

<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>

</div>
</form>

<!-- load angular and angular route via CDN -->
<%--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>--%>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

<script src="../Controllers/app.js"></script>
</body>
</html>


App.js:

var app = angular.module('app', ['ngRoute']);

// configure our routes
app.constant('routes', [
{
url: '/',
config: {
templateUrl: 'dashboard.aspx',
menuItem: 'MainPage'
}
},
{
url: '/about',
config: {
templateUrl: 'about.aspx',
menuItem: 'aboutPage'
}
},
{
url: '/contact',
config: {
templateUrl: 'contact.aspx',
menuItem: 'contactPage'
}
}
]);

app.config(['$routeProvider', 'routes', '$controllerProvider', function ($routeProvider, routes, $controllerProvider) {

//$controllerProvider.allowGlobals();

app._controller = app.controller;

// Provider-based controller.
app.controller = function (name, constructor) {
$controllerProvider.register(name, constructor);
return (this);
};

routes.forEach(function (route) {
$routeProvider.when(route.url, route.config);
});
}]);

var controllerId = 'Index';

app.controller(controllerId, function ($scope, $location) {
var ind = this;

$scope.openDashboard = function () {
$location.path('/');
}

$scope.openOpportunity = function () {
$location.path('/opportunity');
}

$scope.openContact = function () {
$location.path('/contact');
}
})


I have created three separate aspx pages for each menu and separate .js file (in which controller is defined for each page).

When the page load, it calls dashboard page by default and it throws error as


Error: [ng:areq]
http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=dashboardController&p1=not%20a%20function%2C%20got%20undefined


Here,
dashboardController
is the name of the controller defined in Dashboard page.

I found that 'dashboard.js' file is not loaded in browser.

Dashboard.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dashboard.aspx.cs" Inherits="SPA.Views.dashboard" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="../Controllers/dashboard.js"></script>

</head>
<body>
<form id="form1" runat="server">
<div data-ng-controller="dashboardController">
{{message}}
</div>
</form>
</body>
</html>


and the associated controller file is as follows (dashboard.js):

(function () {
var app = angular.module('app');

var controllerId = 'dashboardController';

app.controller(controllerId, function ($scope) {
$scope.message = "Hello!!";
});
})();


The other pages also have the same code and that too provide the above mentioned error when a menu is selected.

When I tried to call 'dashboard.js' file in index.aspx itself, it display the page correctly (it is loaded in the browser).

But I don't want to call all the js file at the starting, since in future i will be using a large amount of data to display in each page and hence it might slow down the application.

Please let me know, how I should proceed to get the output by calling the controllers when that particular page is called and how I should make the .js file loaded in browser.

Thanks in advance...

Answer
  1. Remove head and body tags from content pages
  2. Add

    <script src> 
    

    tags inside the body content

Comments