Угловые, многократные контроллеры и маршрутизация с помощью $ routeProvider

Я пытаюсь правильно настроить приложение углов с отдельными контроллерами.

Используя $routeProvider, я хочу настроить маршрутизацию, чтобы видеть разные виды в зависимости от URL.

Пока он работает, но только с видом в зависимости от загрузки последнего контроллера.

Вот код:

конфигурации Маршруты, app.js:

'use strict'; 

var app = angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap', 'BalrogApp.controllers']); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/projectsList.html', 
     controller : 'projectsController', 
     controllerAs: 'p' 
     }) 
     .when('/requests', { 
     templateUrl: 'views/requestsList.html', 
     controller : 'requestsController', 
     controllerAs: 'r' 
     }) 
     .when('/projects', { 
     templateUrl: 'views/projectsList.html', 
     controller : 'projectsController', 
     controllerAs: 'p' 
     }) 
     .otherwise({ 
     redirectTo: '/lol' 
     }); 

    }]);

Контроллер 1, requestsController.js:

'use strict'; 

var requestsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']); 

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) { 

    this.studentName = "Request data"; 
    this.studentMark = 75; 

});

Контроллер 2, projectsController.js:

'use strict'; 

var projectsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']); 

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) { 

    this.studentName = "Project data"; 
    this.studentMark = 75; 

});

Главная страница HTML, index.html:

<!doctype html> 
    <html lang="en" ng-app="BalrogApp"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Student Details App</title> 
     <link rel="stylesheet" href="../node_modules/angular-ui-bootstrap/ui-bootstrap-csp.css"/> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    </head> 

    <body> 
    Index page : 

    <ng-view></ng-view> 

    <!--Required JS Files List :start --> 
    <script src="../node_modules/angular/angular.js"></script> 
    <script src="../node_modules/angular/angular-route.js"></script> 
    <script src="../node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script> 

    <script src="controllers/requestsController.js"></script> 
    <script src="controllers/projectsController.js"></script> 

    <script src="js/app.js"></script> 

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <!--Required JS Files List :end --> 

    </body> 
    </html>

HTML Просьбы Вид: Запрос:

<div class="row-fluid"> 
    <div class="span2">{{r.studentName}} </div> 
    <div style="display:inline-block; min-height:290px;"> 
    <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker> 
    </div> 
</div>

HTML проекты Вид:

Project view : 
<div class="row-fluid"> 
    <div class="span2">{{p.studentName}} </div> 
    <div style="display:inline-block; min-height:290px;"> 
    <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker> 
    </div> 
</div>

Таким образом, проблема там меняется в зависимости от index.html :

<script src="controllers/requestsController.js"></script> 
<script src="controllers/projectsController.js"></script>

Результатом будет просмотр рабочих проектов, но не просмотр рабочих запросов. Если после этого включить контроллер запросов, это будет наоборот.

Кроме того, есть проблема с моим синтаксисом ControllerAs? Поскольку я использую его с $routeProvider, он не работает вообще.

источник

2015-10-27 Ellone

Вы видите какую-либо ошибку в консоли? – insomiac

С видом, который не работает, консоль показывает это: '" Ошибка: [ng: areq] Аргумент 'requestController' не является функцией, получил undefined ... ' – Ellone

вы определили два URL-адреса для projectController, что происходит ? если вы идете в/или/проекты – insomiac

Когда вы делаете angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);, он создает новый модуль. То, что вы действительно хотите, это ссылка на существующий модуль, иначе вы будете перезаписывать его каждый раз, когда вы загружаете файл JavaScript контроллера.

инициализация Изменения вы диспетчеры это:

angular.module('BalrogApp').controller('requestsController', function() { 
    // ... 
});

angular.module('BalrogApp').controller('projectsController', function() { 
    // ... 
});

Таким образом, вы будете ссылки существующего модуля и не будешь перезаписывать его каждый раз.

источник

2015-10-27 16:21:35 katspaugh

Как это работает? Синтаксис 'angular.module ('BalrogApp.controllers', ...' создаст модуль 'controllers' в модуле' BalrogApp' и наследует его зависимость? Я попытался удалить зависимости от con как вы предложили, но это не сработало для меня. Я также не знаю, должен ли я удалить все эти «BalrogApp.controllers», чтобы сохранить только «BalrogApp» Не могли бы вы предоставить плункер? – Ellone

Просто введите его точно так же, как я набрал. Не 'BalrogApp.controllers', а просто' BalrogApp'. – katspaugh

Название модуля абсолютно произвольно, оно не наследует ничего, что вы его называете. Он всегда создает совершенно новый модуль. https://docs.angularjs.org/guide/module – katspaugh

В вашем приложении.JS вы уже определили зависимости модулей и путем определения снова в контроллерах вы переопределяете его, Зафиксируйте модуль линию в контроллерах, как показано ниже:

Просьбы Вид:

«использовать строгий»;

var requestsControllerModule = angular.module('BalrogApp.controllers', []); // Fix This.. 

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) { 

    this.studentName = "Request data"; 
    this.studentMark = 75; 

});

Проекты просмотра:

var projectsControllerModule = angular.module('BalrogApp.controllers', []); // Fix this.. 

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) { 

    this.studentName = "Project data"; 
    this.studentMark = 75; 

});

источник

2015-10-27 16:26:21 insomiac

Я сделал это, но этого было недостаточно. Он по-прежнему делает то же самое, я могу получить доступ к данным из 'projectsController', потому что он последний объявлен, но я не могу получить доступ к' requestController' ... – Ellone

Угловые, многократные контроллеры и маршрутизация с помощью $ routeProvider

ответ

Смежные вопросы