Угловая маршрутизация с 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/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 

Но ошибка маршрута имеет/продукт после ссылки сервера.

Необходимо внести ясность & Решение этой проблемы.

Заранее заблаговременно

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/

Вы можете использовать пользовательский интерфейс маршрутизатор для обработки родителя маршрутизации правильно, что даст вам заранее вложенные объекты маршрута.