控制器文件(.js)未在浏览器中加载 - 角度js

时间:2015-06-25 04:23:41

标签: html asp.net angularjs single-page-application

我创建了一个带角度js的简单单页面应用程序。我有一个索引页面,其中定义了路由并调用了ng-view。

的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');
    }
})

我为每个菜单和单独的.js文件创建了三个单独的aspx页面(在每个页面中定义了控制器)。

当页面加载时,它默认调用仪表板页面,它会抛出错误

  

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

此处,dashboardController是仪表板页面中定义的控制器的名称。

我发现了&#39; dashboard.js&#39;文件未在浏览器中加载。

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>

和关联的控制器文件如下(dashboard.js):

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

    var controllerId = 'dashboardController';

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

其他页面也有相同的代码,并且在选择菜单时也会提供上述错误。

当我尝试拨打&#39; dashboard.js&#39;在index.aspx本身的文件中,它正确显示页面(它在浏览器中加载)。

但我不想在开始时调用所有js文件,因为将来我会在每个页面中使用大量数据,因此可能会降低应用程序的速度。

请告诉我,如何在调用该特定页面时调用控制器以及如何在浏览器中加载.js文件来继续获取输出。

提前致谢...

3 个答案:

答案 0 :(得分:1)

  1. 从内容页面中删除头部和身体标签
  2. 添加

    <script src> 
    

    标签内部的内容

答案 1 :(得分:0)

  1. 在单页应用中,对于不同的视图,您不需要再次加载html,title,head和body标记,只需要输入您想要查看的html而不是您在索引页面中添加的ALAsset *asset = // your asset if(asset.editable) { NSDictionary *metadata = asset.defaultRepresentation.metadata; NSDictionary *gpsInfo=metadata[@"{GPS}"]; if (gpsInfo) { NSMutableDictionary *mutableGPSInfo = [gpsInfo mutableCopy]; [mutableGPSInfo setObject:@"yourNewLatitude" forKey:@"Latitude"]; [mutableGPSInfo setObject:@"yourNewLongitude" forKey:@"Longitude"]; NSMutableDictionary *mutableMetadata = [metadata mutableCopy]; [mutableMetadata setObject:[mutableGPSInfo copy] forKey:@"{GPS}"]; ALAssetRepresentation *rep = [asset defaultRepresentation]; Byte *buffer = (Byte*)malloc(rep.size); NSUInteger buffered = [rep getBytes:buffer fromOffset:0.0 length:rep.size error:nil]; NSData *data = [NSData dataWithBytesNoCopy:buffer length:buffered freeWhenDone:YES]; [asset setImageData:data metadata:[mutableMetadata copy] completionBlock:^(NSURL *assetURL, NSError *error) { if (error) { NSLog(@"Error : %@",error); } else { NSLog(@"Asset metadata is successfully edited"); } }]; } } else { NSLog(@"oops..! Asset can not be edited"); } 标记。因此,您的信息中心页面应如下所示:

    ng-view

  2. 所以现在所有的* .js文件都会放在正文的末尾,因为你的所有html模板都会在index.html文件中加载

答案 2 :(得分: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>