3

How does angular know to make a request for the template view that contains 'ng-view' element?

If I navigate in my application say directly to 

http://localhost/Categories/List/accessories

. A request is still made to '/ or the index template' as this contains the 'ng-view' element needed to render all the views.

When I navigate from the index to /Categories/List/accessories no request is made for the index again.

Below is my basic routing which has been copied in part from the Angular MVC "CookBook" example on GitHub

angular.module('myApp', ['myApp.ctrl.list'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/Home/Splash',
        });
        $routeProvider.when('/Categories/List/:slug', {
            templateUrl: '/Categories/List',
            controller: 'listCtrl',
        });
        $routeProvider.otherwise({
            redirectTo: '/'
        });
    }]);
Charles
  • 50,943
  • 13
  • 104
  • 142
ojhawkins
  • 3,200
  • 15
  • 50
  • 67

2 Answers2

3

With your routing configuration, I believe your example url is missing a pound sign (#), so it should look like:

http://localhost/#/Categories/List/accessories

The part after the # sign is the path intended to be resolved by AngularJS (ie. the routing configuration you have defined)

When you enter the above URL into the address bar of the browser, the browser automatically looks for index.html on localhost. Most browsers, if not all, are set to look for index.html when only the domain name is present in the URL.

What about the part after the # sign? You might ask. The path after the # sign does not get sent to the server, by definition, and thus the browser could care less of what that part is consisted of.

In the second scenario you mentioned, AngularJS does not request for index.html because it's been cached the first time it was loaded and that cached copy is used.

tamakisquare
  • 16,659
  • 26
  • 88
  • 129
0

Is your locationProvider configured for HTML5?

$locationProvider.html5Mode(true);

See Using HTML5 pushstate on angular.js

Community
  • 1
  • 1
andyczerwonka
  • 4,230
  • 5
  • 34
  • 57