3

如果我尝试使用 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-server 下。在这两种情况下，都没有任何证据表明曾经从服务器请求过部分页面。整个主视图有点毛茸茸，但相关的部分看起来像：

<!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>

我已经放弃了导航栏的内容，因为它似乎无关紧要，单击它或使用#whatever 直接输入 url 得到相同的结果。/libs 目录具有来自 bower 的最新 angular、angular-route、angulare-sanitize。

我尝试插入我的库和部分的小样本似乎可以工作，这更令人沮丧。这几天我一直被这件事难住了。我在生产中用一堆 ng-includes 和一些“聪明”的代码绕过它，但我宁愿让它工作。有什么弹出来的吗？当我说它不起作用时，我再次表示我没有看到任何证据表明发生了任何路由，因为这些部分从未从服务器请求。

4

3 回答 3

5

您的when通话中有拼写错误：

例子：

templateURL: '/partials/workspace_view.html',

应该

templateUrl: '/partials/workspace_view.html',

（注意大写的区别，templateURL 更改为 templateUrl）

于 2014-05-23T00:27:18.937 回答
1

夫妇的事情

1 - 字符串化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。将为您将控制器绑定到视图。但是，请确保您已在应用程序中定义，否则 Angular 会向您抛出错误bodyngRouteMainController

于 2014-05-22T23:44:55.503 回答
0

我看到@Mark Kline 的解决方案解决了您的问题，但我想提出一些建议，从长远来看可能会对您有所帮助。

您在评论中提到您的控制器很复杂，因此我强烈建议您将其分解为较小的控制器，每个控制器仅用于控制其中一个路由。根据经验，如果您使用路由来开发应用程序，那么使用一个控制器将很快变得非常大，并且从长远来看很难维护。我曾尝试在以前的应用程序中为多个不同的视图使用单个控制器，但它往往很快就会失控。

如果可以的话，我强烈建议您尽可能多地分离功能，以免将来为自己带来很多麻烦，这将使您的代码更易于阅读、维护和调试。

于 2014-05-23T00:50:54.440 回答