使用 ngRoute 的角度路由不适用于某些路由

Question

在我的单页应用程序中，我使用 ngRoute 进行角度路由。但是我在角度路由方面遇到了一些问题。

配置：

app.config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
    $routeProvider
        .when('/product',{
            templateUrl : 'views/product/template/product.html',
            controller  : 'productCtrl'
        })
        .when('/product/add',{
            templateUrl : 'views/product/template/add-product.html',
            controller  : 'productCtrl'
        })
});

当我的路由路径为 /product 时，一切正常。但是当我的路由路径是 /product/add 时，它似乎是一个错误。但是如果“/product/add” 只替换为“/add”，那么该路线也可以。所以我无法识别路由“/product/add”的主要问题是什么。

错误：

http://localhost:3000/product/views/product/template/add-product.html 404 (Not Found)

在这里我看到了一个问题。其他路线看起来像：

http://localhost:3000/views/product/template/product.html

但错误路由在服务器链接后有 /product。

需要对此问题进行一些澄清和解决方案。

提前致谢

Answer 1

使用错误页面正确配置路由。您可以按照这个小提琴示例。

HTML

<div ng-controller="MainCtrl">
  <ul>
    <li><a href="/product">product</a></li>
    <li><a href="/product/add">add</a></li>
    <li><a href="/other">Other</a></li>
  </ul>
  <ng-view></ng-view>
</div>

角度

var app = angular.module( "myApp", [] );

app.config( function ( $routeProvider,$locationProvider ) {
        $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
  $routeProvider
    .when( '/product', { template: 'I am product root' } )
    .when( '/product/add', { template: 'Adding a product' } )
    .when( '/other', { template: 'Other pages' } )
    .otherwise( { redirectTo: '/product' } );
});

app.controller( 'MainCtrl', function ( $scope ) {
});

了解更多https://jsfiddle.net/zahiruldu/jLdce3vj/186/

您可以使用 UI Router 正确处理父路由，这将为您提供高级嵌套路由功能。