Question

如果我尝试使用ngRoute方法更改主页面视图，我有一个似乎根本不起作用的Web应用程序。路由配置如下所示：

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..
}

我在部分前面有没有'/'的情况下尝试过。我已经尝试了它的正常web服务器反向代理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的网址。 / libs目录具有最新的角度，角度路线，来自凉亭的angulare-sanitize。

小样本我试图插入我的库和部分似乎工作，这更令人沮丧。我被困在这几天了。我在生产中乱砍了包含ng-includes和一些“聪明”的代码，但我宁愿让它工作。什么东西弹出来？当我说它不起作用时，我的意思是我没有看到任何证据表明发生了任何路由，因为这些部分从未从服务器请求过。

Answer 1

您的when来电中存在拼写错误：

示例：

templateURL: '/partials/workspace_view.html',

应该是

templateUrl: '/partials/workspace_view.html',

（注意大写字母的差异，templateURL更改为templateUrl）

Answer 2

情侣

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会向您抛出错误

Answer 3

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

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

如果您有能力，我强烈建议您尽可能多地分离功能以避免未来的麻烦，这将使您的代码更易于阅读，维护和调试。

ngRoute似乎不起作用

3 个答案: