AngularJS ngRoute 似乎不适用于深度导航

Question

Angular 正在路由到不存在的部分 html 文件。

我的文件夹结构是

    |-- app.py (Python with Flask with basic routing into AngularJS) [Refer Code.01]  
    |-- static  
       |-- css   (Has .css files)  
       |-- img   (Has assets files)  
       |-- js  
          |-- app.js    (Inits the routes and controllers)            [Refer Code.04]  
       |-- lib    (Has Angular and 3rd party .js files)  
       |-- partials  
          |-- about.html  
          |-- list.html  (This page has place holder for ngGrid, with a cellTemplate that has link/route to Listdetail) [Refer Code.03]  
          |-- listdetail.html (This page has place holder for a form)   
    |-- templates  
        |-- 404.html  
        |-- index.html (Main page, with angular links and ng-view)     [Refer Code.02] 

列表显示正确，浏览器 url 为

http://myhost.com:5000/list.

单击网格中的"编辑"链接时，浏览器 url 将更改为

http://myhost.com:5000/list/CUSTOMER 

应该的，但是列表详细信息.html没有呈现，我在控制台中看到以下内容

GET http://myhost.com:5000/list/static/partials/listdetail.html 404 (NOT FOUND)

为什么 angular 在应该使用"static/partials/listdetail.html"时寻找"list/static/partials/listdetail.html"？

[代码.01]

# routing for basic pages (pass routing onto the Angular app)
@app.route('/')
@app.route('/about')
@app.route('/blog')
def basic_pages(**kwargs):
    return make_response(open('templates/index.html').read())
@app.route('/list')
@app.route('/list/<type_name>')
def show_list(type_name=None):
    return make_response(open('templates/index.html').read())

[代码.02]

<script src="/static/lib/angular/1.2.10/angular.js"></script>  
<script src="/static/lib/angular/1.2.10/angular-route.js"></script>  
<script src="/static/lib/angular-ng-grid/ng-grid.js"></script>  
<script src="/static/js/app.js"></script>  
<script src="/static/js/controllers.js"></script>  
<script src="/static/js/services.js"></script>  
:  
:  
:  
<div ng-controller="MainCntl as main">  
<div id="header" class="header navbar navbar-static-top">  
            <div class="navbar-inner">  
                <div class="container">  
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">  
                    </button>  
                    <a class="brand" href="/List">List</a>  
                </div>  
            </div>  
        </div>  
        <div class="container">  
            <div id="content" class="container main" ng-view>  
            </div>  
          <hr>  
            <footer id="footer" class="footer">  
                <div class="footer-left">  
                    <a href="/about">About</a> |  
                    <a href="/">Home</a>  
                </div>  
                <div class="footer-right">  
                    <span>&copy; Footer</span>  
                </div>  
            </footer>  
        </div>  
    </div>

[代码.03]

$scope.listGridOptions = { 
    data: 'list',
    multiSelect: false,
    columnDefs: [
        {field:'type', displayName:'Type'}, 
        {field:'name', displayName:'Name'}, 
        {field:'description', displayName:'Description'}, 
        {field:'createdby', displayName:'Created By'},
        {field:'editlayout', displayName: '', cellTemplate: '<div class="ngCellText"><a href="/list/{{row.entity.type}}">Edit</a></div>'}
        ]
    };

[代码.04]

    angular.module('ListManager', ['ngRoute', 'ngGrid'], 
    function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: 'static/partials/landing.html',
        controller: IndexController
    });
    $routeProvider.when('/about', {
        templateUrl: 'static/partials/about.html',
        controller: AboutController
    });
    $routeProvider.when('/list', {
        templateUrl: 'static/partials/list.html',
        controller: 'ListController'
    });
    $routeProvider.when('/list/:type_name', {
        templateUrl: 'static/partials/listdetail.html',
        controller: 'ListDetailController'
    });
    $locationProvider.html5Mode(true);
});

Answer 1

尝试在 templateUrl 定义之前添加"/"，如下所示：

 templateUrl: '/static/partials/listdetail.html'

编辑：鉴于上述方法不起作用，我还有其他2个建议：

1. 我对上述内容的想法是，前导"/"将为您提供相对于应用程序根目录而不是当前 URL 的路径。由于这不起作用，我会尝试一个领先的'../' 取而代之。不确定这是否有效，但可以很快尝试。

2. 考虑使用 Angular UI-Router 而不是 ngRoute。 我使用它并且没有遇到您遇到的路径问题。 更重要的是，UI-Router 支持嵌套视图，随着应用变得越来越复杂，您可能会想要嵌套视图。如果您确实使用 UI-Router，由于 0.2.8 中的一些错误，我建议使用 0.2.7 版本而不是最新的（截至本文发布时）0.2.8。