我用angular js创建了一个简单的单页应用程序。我有一个索引页，其中定义了路由并调用了ng-view。
Index.cshtml:
@inherits System.Web.Mvc.WebViewPage
@{
Layout = null;
}
<!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">
<!-- 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>
<!-- 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');
}
})
我为每个菜单创建了三个单独的cshtml页面和单独的.js文件(其中为每个页面定义了控制器)。
当页面加载时，它默认调用dashboard page，并抛出错误
Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=dashboardController&p1=not%20a%20function%2C%20got%20undefined
这里，dashboardController是Dashboard页面中定义的控制器的名称。
Dashboard.cshtml:
<script src="../Controllers/dashboard.js"></script>
<div data-ng-controller="dashboardController">
{{message}}
</div>
和关联的控制器文件如下(dashboard.js):
(function () {
var app = angular.module('app');
var controllerId = 'dashboardController';
app.controller(controllerId, function ($scope) {
$scope.message = "Hello!!";
});
})();
其他页面也有相同的代码，当菜单被选中时也会提供上述错误。
当我试图调用'dashboard.js'文件在索引。CSHTML本身，它可以正确显示页面。
但是我不想在开始时调用所有的js文件，因为在未来我将使用大量的数据来显示在每个页面，因此它可能会减慢应用程序。
请让我知道，当调用特定页面时，我应该如何通过调用控制器来获取输出。
所有应用程序资源(控制器等)都需要在主html页面(在您的示例中为'Index.cshtml')中引用，而不是在视图中引用。
您只需在Index.cshtml中声明<script src="../Controllers/dashboard.js"></script>这个脚本在<script src="../Controllers/app.js"></script>这个脚本的底部。我建议你采用这种方法。