【发布时间】：2015-06-24 19:51:02
【问题描述】：
我用 Angular js 创建了一个简单的单页应用程序。我有一个索引页面，其中定义了路由并调用了 ng-view。
索引.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 页面（其中为每个页面定义了控制器）。
页面加载时，默认调用dashboard页面，报错为
错误：[ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=dashboardController&p1=not%20a%20function%2C%20got%20undefined
这里，dashboardController 是 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!!";
});
})();
其他页面也有相同的代码，并且在选择菜单时也会出现上述错误。
当我尝试在 index.aspx 本身中调用“dashboard.js”文件时，它会正确显示页面。
但我不想在开始时调用所有 js 文件，因为将来我将使用大量数据显示在每个页面中，因此可能会降低应用程序的速度。
请告诉我，当调用该特定页面时，我应该如何通过调用控制器来获取输出。
提前谢谢...
【问题讨论】：
标签： javascript html asp.net angularjs single-page-application