Basic Angular Routing Issue

Question

Playing around with routing in AngularJS but I can't seem to get it working correctly. Trying to display some templates with different controllers for each, but it seems to only route to one of them.

Plunker link: https://plnkr.co/edit/6nupjElxdxWR8Ov7f59n?p=preview

Here is the code:

index.html

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div class="container">
    <div id="menu">
      <a href="#">Home</a>
      <a href="#page1">Page1</a>
      <a href="#page2">Page2</a>
    </div>

    <div id="mainContent">
      <div ng-view></div>
    </div>
  </div>
</body>

</html>

script.js

app = angular.module('myApp', ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: "base.html",
      controller: "homeController"
    })
    .when('/page1', {
      templateUrl: "page1.html",
      controller: "pageController"
    })
    .when('/page2', {
      templateUrl: "page2.html",
      controller: "pageController"
    });
});

app.controller('homeController', [
  '$scope',
  function homeController($scope) {
    console.log("Home");
  }
]);

app.controller('pageController', [
  '$scope',
  function pageController($scope) {
    console.log("Page");
  }
]);

base.html

<div>Base</div>

page1.html

<div>Page1</div>

page2.html

<div>Page2</div>

Currently, it seems to only show the base.html template no matter what button is pressed.

is there anything on the console after you pressed the button? — kkesley
– kkesley, Commented Jan 8, 2017 at 21:36

kkesley · Accepted Answer · 2017-01-08 22:10:17Z

1

I think it has to do with the angular plugin. Try using

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>

it worked correctly in your plunkr with 1.5.8

EDIT it seems that you need to include ! before your path name in angular 1.6.0

<div id="menu">
      <a href="#!">Home</a>
      <a href="#!page1">Page1</a>
      <a href="#!page2">Page2</a>
</div>

answered Jan 8, 2017 at 22:10

kkesley

3,4162 gold badges36 silver badges60 bronze badges

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

Comments

Anders Vestergaard · Accepted Answer · 2017-01-08 22:17:26Z

The problem is a change in the default hash prefix:

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to you application:

appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); }]); Source

So if you want to do it right and not change the version of angular you should:

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Collectives™ on Stack Overflow

Basic Angular Routing Issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related