CODEWITHSUNDEEP
htmlasp.netangularjssingle-page-application
user3211705
user3211705

Reputation: 2578

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

Upvotes: 0

Views: 3059

Answers (3)

Ashutosh Shukla
Ashutosh Shukla

Reputation: 555

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

Upvotes: 0

Elisheva Wasserman
Elisheva Wasserman

Reputation: 504

  1. Remove head and body tags from content pages

  2. Add 

    <script src>

    tags inside the body content

Upvotes: 1

km1882
km1882

Reputation: 750

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

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

Upvotes: 0

Related Questions