AngularJS ngRoute doesn't seem to work with deep navigation

Question

Angular is routing to a non-existing partial html file.

My folder structure is

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

The List is displayed correctly with the browser url is

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

When "Edit" link is clicked in the grid, the browser url changes to

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

as it should, but the listdetail.html is not rendered, and I see the following in the console

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

Why is angular looking for "list/static/partials/listdetail.html" when it should be using "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

Try adding a '/' before the templateUrl definitions, like this:

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

Edit: Given that the above did not work, I have 2 other suggestions:

1. What I was thinking with the above was that the leading '/' would give you a path relative to the root of the app instead of to the current URL. Since that didn't work I would try a leading '../' instead. Not sure if that will work either but it's quick to try.

2. Consider using Angular UI-Router instead of ngRoute. I use it and have not had the path problem you're having. More important than that, UI-Router supports nested views, which you'll likely want as your app gets more and more complex. If you do use UI-Router, I suggest version 0.2.7 rather than the latest (as of the time of this post) 0.2.8, due to some bugs in 0.2.8.