Я создал простое одностраничное приложение с угловыми js. У меня есть индексная страница, в которой определен маршрут, и вызывается ng-view.Вызов контроллера при выборе меню в одностраничном приложении - MVC & angularJs
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 файл (в котором контроллер, определенные для каждой страницы).
При загрузке страницы, она вызывает приборную панель страницы по умолчанию, и он выдает ошибку как
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 'в самом файле index.cshtml, он отображает страницу правильно.
Но я не хочу вызывать весь файл js при запуске, так как в будущем я буду использовать большой объем данных для отображения на каждой странице и, следовательно, это может замедлить работу приложения.
Пожалуйста, дайте мне знать, как я должен начать получать вывод, вызывая контроллеры при вызове этой конкретной страницы.
Заранее спасибо ...
Если я вызываю контроллеры из моего файла index.cshtml, он работает. Но я не хочу вызывать весь js-файл при запуске, так как в будущем я буду использовать большой объем данных для отображения на каждой странице, и, следовательно, это может замедлить работу приложения. – user3211705