ngRoute, кажется, не работает

У меня есть веб-приложение, которое, похоже, вообще не работает, если я пытаюсь использовать подход ngRoute для изменения представления основной страницы. Конфигурация маршрутизации выглядит следующим образом: 

var app;
app = angular.module('genehaxx', ['ngGrid','ngRoute', 'ngSanitize', 'ui.bootstrap','genehaxx.filters', 'genehaxx.services'])
.config(function($routeProvider){
        //route setup
  $routeProvider
    .when('/workflows', {
        templateURL: '/partials/workspace_view.html',
        controller: 'MainController'
    })

    .when('/jobs', {
        templateURL: '/partials/submissions_view.html' ,
        controller: 'MainController'
    })

    .when('/', {
        templateURL: '/partials/analyses_view.html',
        controller: 'MainController'
    })

    .when('/analyses', {
            redirectTo: '/'
        })

    .otherwise({
            redirectTo: '/'
    });

});

function MainController($scope, $modal, $rootScope, User, Data, Workflow, Step){
  //lots of proprietary code here..
}

Я пробовал его с и без ' / ' перед партиалами. Я пробовал его как с его обычным веб-сервером, обратным проксированным под nginx, так и непосредственно под http-сервером из его каталога. В обоих случаях нет никаких доказательств того, что партиальные страницы когда-либо запрашивались с сервера. Основной вид немного волосатый, чтобы разместить полностью, но соответствующие биты выглядят так: 

<!doctype html>
<html lang="en" ng-app="genehaxx" >
<head>
  <meta charset="utf-8">
  <title>Welcome to Genengine!</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/ng-grid.css">

  <script src="lib/jquery-2.0.2.js"></script>
  <script src="libs/angular/angular.js"></script>
  <script src="libs/angular-route/angular-route.min.js"></script>
  <script src="libs/angular-sanitize/angular-sanitize.js"></script>
  <script src="lib/transition.js"></script>
  <script src="lib/bootstrap-custom/ui-bootstrap-custom-tpls-0.10.0.js"></script>
  <script src="lib/ng-grid-2.0.7.debug.js"></script>
  <script src="js/app.js"></script>
  <script src="js/filters.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
  <script src="js/objects.js"></script>
  <script src="js/services2.js"></script>
  <script src="js/dropdownToggle.js"></script>
</head>
<body>
  <div id="main">
    <div ng-view></div>
  </div>
</body>
</html>

Я оставил материал navbar, поскольку он кажется неуместным, и я получаю те же результаты, нажав на него или непосредственно введя url с #whatever. Каталоги /libs имеют последнюю версию angular, angular-route, angulare-sanitize от bower.

Небольшие образцы, которые я пытался подключить к своим библиотекам и частичным элементам, похоже, работают, что еще более расстраивает. Я уже несколько дней пребываю в тупике. Я взломал его внутри производство с беспорядком ng-includes и некоторым "умным" кодом, но я бы предпочел, чтобы это работало. Что-нибудь выскочило? Когда я говорю, что это не работает, я снова имею в виду, что я не вижу никаких доказательств того, что какая-либо маршрутизация произошла в том, что эти партиалы никогда не запрашиваются с сервера.

3 3
angularjs angularjs-ng-route

3 ответа:

У вас есть опечатки внутри ваших when вызовов:

Пример: 

templateURL: '/partials/workspace_view.html',

Должно быть 

templateUrl: '/partials/workspace_view.html',

(Обратите внимание на разницу в шапках, templateURL меняется на templateUrl)

5

Пара вещей

1-Stringify MainController

.

$routeProvider
.when('/workflows', {
  templateURL: '/partials/workspace_view.html',
  controller: 'MainController'
})

.when('/jobs', {
  templateURL: '/partials/submissions_view.html' ,
  controller: 'MainController'
})

.when('/', {
  templateURL: '/partials/analyses_view.html',
  controller: 'MainController'
})

.when('/analyses', {
  redirectTo: '/'
})

.otherwise({
  redirectTo: '/'
});

2 - вам не нужно ng-controller на body. ngRoute свяжет контроллер с представлением для вас. Однако убедитесь, что вы определили MainController в своем приложении, иначе angular выдаст вам ошибку

1

Я вижу, что решение @Mark Kline решило вашу проблему, но я хотел бы сделать предложение, которое может помочь вам в долгосрочной перспективе.

Вы упоминаете в комментарии, что ваш контроллер сложен, поэтому я настоятельно рекомендую вам разбить его на более мелкие контроллеры, где каждый используется только для управления одним из маршрутов. По опыту, если вы используете маршрутизацию для разработки приложения, то использование одного контроллера будет очень большим быстро, и в долгосрочной перспективе будет очень трудно поддерживать. Я пробовал в предыдущих приложениях использовать один контроллер для нескольких различных представлений, и он довольно быстро выходит из-под контроля.

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

0