3

プライマリ ページ ビューを変更するために 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..
}

パーシャルの前に「/」を付けて、付けずに試してみました。nginxの下でリバースプロキシされた通常のWebサーバーと、そのディレクトリから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>

無関係と思われるため、ナビゲーションバーのものは省略しました。それをクリックするか、#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 に答える
0

@Mark Kline のソリューションで問題が解決したようですが、長期的には役立つかもしれない提案をしたいと思います。

コメントで、コントローラーが複雑であると述べています。そのため、それぞれがルートの 1 つを制御するためだけに使用される小さなコントローラーに分割することを強くお勧めします。ルーティングを使用してアプリケーションを開発している場合の経験から、1 つのコントローラーを使用するとすぐに非常に大きくなり、長期的には保守が非常に困難になります。以前のアプリで、複数の異なるビューに 1 つのコントローラーを使用しようとしましたが、すぐに手に負えなくなる傾向があります。

可能であれば、将来の多くの頭痛の種を避けるために、できるだけ多くの機能を分離することを強くお勧めします。これにより、コードが読みやすくなり、保守しやすくなり、デバッグしやすくなります。

于 2014-05-23T00:50:54.440 に答える