Angular ngRoute - cannot create a page if you enter the URL manually

Question

I start AngularJS and ask the following question. I play with the ngRoute module, and so far this is my code:

HTML:

<nav ng-controller="navController as nav"> <ul> <li ng-repeat="item in navItems"> <a href="{{ item.url }}">{{ item.name }}</a> </li> </ul> </nav> <div id="main"> <div ng-view></div> </div> 

app.js

 (function(window) { var app = angular.module('app', ['ngRoute']); app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl : 'pages/home.html', controller : 'mainController' }) .when('/contact', { templateUrl : 'pages/contact.html', controller : 'contactController' }); if (window.history && window.history.pushState) { $locationProvider.html5Mode(true); } }]); app.controller('mainController', ['$scope', function($scope) { $scope.message = 'Hello from home page'; }]); app.controller('contactController', ['$scope', function($scope) { $scope.message = 'Hello from contact page'; }]); app.controller('navController', ['$scope', function($scope) { $scope.navItems = [ { name: 'Home', url: '/' }, { name: 'Contact', url: '/contact' } ]; }]); })(window); 

And it works great. Angular displays the menu, and when I click on the link, it shows me the desired page. But with the exception of the following case. When it displays the main page (url: http: // localhost: 3000 ) and I manually add the URL "/ contact", then I get a blank page with the error "Unable to get / contact". Can someone explain to me why this is happening and how can I fix it? I would appreciate any help. Thanks.

Answer 1

Actually you need # (hashtag) for browsers without HTML5.

Otherwise, they will simply make an HTTP call to the server at the specified href. # is an old short-haired browser that doesn’t start a request, which allows many js frameworks to create their own client routes on their own.

You can use $ locationProvider.html5Mode (true) to tell angular to use the HTML5 strategy, if available.

Here is a list of browsers that support the HTML5 strategy: http://caniuse.com/#feat=history

Source: AngularJS routing without hash '#'