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

Question

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...

try put <script src> tag inside the body, you should remove head and body tag and return only the main content — Elisheva Wasserman
– Elisheva Wasserman, Commented Jun 25, 2015 at 5:33
Thanks a lot.. It solved my problem.. Can you put this as answer.. I will mark it as answer.. — user3211705
– user3211705, Commented Jun 25, 2015 at 5:50

Elisheva Wasserman · Accepted Answer · 2015-06-25 05:53:01Z

1

Remove head and body tags from content pages
Add
```
<script src> 
```
tags inside the body content

answered Jun 25, 2015 at 5:53

Elisheva Wasserman

5042 silver badges9 bronze badges

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

Comments

km1882 · Accepted Answer · 2015-06-25 05:52:20Z

0

In a single page app, for your different views, you do not need to load your html, title, head and body tag again, all you need is to throw in your html that you want to see instead of the ng-view tag that you have added in the index page. So your dashboard page should look something like this:

<form id="form1" runat="server"> <div data-ng-controller="dashboardController"> {{message}} </div> </form>
So now all your *.js files would go at the end of body, as all your html templates will be loading in the index.html file

answered Jun 25, 2015 at 5:52

km1882

7505 silver badges22 bronze badges

Comments

Ashutosh Shukla · Accepted Answer · 2016-06-24 05:55:01Z

0

 <html>
 <body>
     <!--put all .js files here to see in chrome browser while debugging -->
     <script src="abc.js" type="text/javascript"></script>
 </body>
</html>

answered Jun 24, 2016 at 5:55

Ashutosh Shukla

5555 silver badges9 bronze badges

1 Comment

theblindprophet Over a year ago

You copied what was in the comments and put it as an answer after the user said he had solved the problem. And you lack commentary.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related