Md. Nazmul Hossain Bilash Md. Nazmul Hossain Bilash - 4 months ago 23
Node.js Question

Angular Routing with ngRoute doesn't work for some routes

In my single page application I have used ngRoute for angular routing. But I am facing some problems for angular routing.

configuration :

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'
})
});


When my routing path is /product then everything is ok. But when my routing path is /product/add then it seems an error. But if "/product/add"
replace with just "/add" then that route is also ok. So I cant recognize whats the main problem on routing "/product/add".

Error :

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


here I have seen a problem. other route seems like :

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


But error route has /product after server link.

Need some clarification & solution for this problem.

Thanks in advance

Answer

configure the route properly with error pages. You can follow this fiddle example.

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>

Angular

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 ) {
});

for more https://jsfiddle.net/zahiruldu/jLdce3vj/186/

You can use UI Router for handling parent routing properly that will give you advance nested route facilities.