控制器文件（.js）未加载到浏览器中-angular js

Question

I have created a simple Single page application with angular js. 我已经用angular js创建了一个简单的单页应用程序。 I have a index page in which the route is defined and the ng-view is called. 我有一个索引页面，在其中定义了路由并调用了ng-view。

Index.aspx: 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: 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). 我为每个菜单和单独的.js文件（在其中为每个页面定义了控制器）创建了三个单独的aspx页面。

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 错误：[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. 在这里， dashboardController是在“仪表板”页面中定义的控制器的名称。

I found that 'dashboard.js' file is not loaded in browser. 我发现“ dashboard.js”文件未加载到浏览器中。

Dashboard.aspx: 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): 关联的控制器文件如下（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). 当我尝试在index.aspx本身中调用“ dashboard.js”文件时，它会正确显示该页面（已在浏览器中加载）。

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. 但是我不想在一开始就调用所有的js文件，因为将来我会在每个页面上使用大量数据来显示，因此可能会使应用程序变慢。

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. 请让我知道，当调用特定页面时，如何继续通过调用控制器来获取输出，以及如何使.js文件加载到浏览器中。

Thanks in advance... 提前致谢...

Answer 1

Remove head and body tags from content pages 从内容页面删除头部和身体标签
Add 加
```
 <script src> 
```
tags inside the body content 体内内容标签

Answer 2

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. 在单页应用中，对于您的不同视图，您无需再次加载html，title，head和body标签，您所要做的就是将要查看的html而不是ng-view标签您已经在索引页面中添加了。 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 现在，您所有的* .js文件都将放在正文的末尾，因为所有HTML模板都将加载到index.html文件中

Answer 3

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

控制器文件（.js）未加载到浏览器中-angular js

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-06-25 05:53:01

解决方案2
0 2015-06-25 05:52:20

解决方案3
0 2016-06-24 05:55:01

控制器文件（.js）未加载到浏览器中-angular js

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-06-25 05:53:01

解决方案2 0 2015-06-25 05:52:20

解决方案3 0 2016-06-24 05:55:01

解决方案1
1 已采纳 2015-06-25 05:53:01

解决方案2
0 2015-06-25 05:52:20

解决方案3
0 2016-06-24 05:55:01