AngularJS subdirectory routing not working, with <base> tag applied

Question

I've got an incredibly simple AngularJS template, I'm trying to get routing to work but when I load the page I'm just seeing the H1 tag from my index.html.

My app is in a sub directory, /angular-route/, and I know that the partials exist, I can visit /angular-route/partials/interest.html and the page renders fine.

Have I missed something really basic here?

<html>
<head ng-app="myApp">
    <title>AngularJS Routing</title>
    <base href="/angular-route/" />
</head>
<body>

<h1>AngularJS Routing</h1>

<div ng-view></div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

<script>
    'use strict';

    var myApp = angular.module('myApp', []).
      config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/interest', {
                templateUrl: 'partials/interest.html',   
                controller: 'InterestCtrl'
            }).
            when('/catalogue', {
                templateUrl: 'partials/catalogue.html', 
                controller: 'CatalogueCtrl'
            }).
            otherwise({redirectTo: '/interest'});
    }]);

    myApp.controller('InterestCtrl', function($scope, $routeParams) {
        console.log('InterestCtrl');
    });
    myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
        console.log('CatalogueCtrl');
    });
</script>

That makes no difference, if I add <base href="/angular-route/" /> — Pete
– Pete, Commented Jun 28, 2013 at 23:01

Stewie · Accepted Answer · 2013-06-29 07:32:05Z

26

Beside the base tag, which you will need, you've also placed the ng-app directive on wrong element (head). In your code, the Application is initialized only inside the header. Rest of the HTML is ignored by Angular.

WORKING PLUNKER

<html ng-app="myApp">
<head>
  <title>AngularJS Routing</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script type="text/ng-template" id="partials/interest.html">
    <h2>Inereset</h2> 
  </script>
  <script type="text/ng-template" id="partials/catalogue.html">
    <h2>Catalogue</h2> 
  </script>
</head>
<body>

  <h1>AngularJS Routing</h1>

  <ul>
    <li><a href="#/interest">Interest</a></li>
    <li><a href="#/catalogue">Catalogue</a></li>
  </ul>

  <div ng-view></div>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

  <script>
      'use strict';

      var myApp = angular.module('myApp', []).
        config(['$routeProvider', function($routeProvider) {
          $routeProvider.
            when('/interest', {
              templateUrl: 'partials/interest.html',   
              controller: 'InterestCtrl'
            }).
            when('/catalogue', {
              templateUrl: 'partials/catalogue.html', 
              controller: 'CatalogueCtrl'
            }).
            otherwise({redirectTo: '/interest'});
      }]);

      myApp.controller('InterestCtrl', function($scope, $routeParams) {
        console.log('InterestCtrl');
      });
      myApp.controller('CatalogueCtrl', function($scope, $routeParams) {
        console.log('CatalogueCtrl');
      });
  </script>
</body>
</html

answered Jun 29, 2013 at 7:32

Stewie

60.4k20 gold badges149 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hao Over a year ago

Great! Just remember including assets using relative path like 'your_asset_path/asset'. And in ngRoutes, begin your match with '/', you should known ngRoute handle the url transfer, if base='/admin/', then '/index.html' in route will result to '/admin/index.html'

Brad Bird Over a year ago

@RomainBruckert why wouldn't it?

Gajen Sunthara · Accepted Answer · 2016-07-12 15:32:58Z

4

Following configuration worked for me!

Let's say we want to access our app using http://localhost:8000/app/

Then have your base tag with the following highlighted

answered Jul 12, 2016 at 15:32

Gajen Sunthara

4,87640 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS subdirectory routing not working, with <base> tag applied

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related