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]

列表正确显示，浏览器网址为

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

在网格中单击“编辑”链接时，浏览器网址将更改为

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

应该如此，但是listdetail.html没有渲染，我在控制台中看到以下内容

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

为什么当它应该使用“static / partials / listdetail.html”时，angular会查找“list / static / partials / listdetail.html”？

[Code.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())

[Code.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>

[Code.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>'}
        ]
    };

[Code.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条建议：

我在上面的想法是，前导'/'会给你一个相对于应用程序根目录而不是当前URL的路径。由于那不起作用，我会尝试一个领先的'../'。不确定这是否有效但是很快就可以尝试。
考虑使用Angular UI-Router代替ngRoute。我使用它并且没有你遇到的路径问题。更重要的是，UI-Router支持嵌套视图，当您的应用变得越来越复杂时，您可能会想要这些视图。如果您使用UI-Router，我建议使用版本0.2.7而不是最新版本（截至本文发布时间）0.2.8，因为0.2.8中存在一些错误。

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

1 个答案: