AngularJS: ngRouter cannot work


Because the UI-Route cannot work with directive (it has the unbreakable isolated scope) and cannot fit my scenario, I’m testing to remove the UI-Route and go for ngRoute. I spent a day on the ngRoute and it still did not work. I think there must be some subtle mistake in my code but I just cannot figure it out. The simplified test code is as bellow:

<html lang="en" ng-app="Hello" ng-strict-di>

  <script script type="text/javascript" src=""></script>
  <script script type="text/javascript" src=""></script>
    'use strict';
    angular.module('Hello', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/hello', {
        templateUrl: 'hello.html',
        controller: 'Ctrl1'
        redirectTo: "/"
    .controller('Ctrl1', ['$scope', function ($scope) {
      $scope.content = 'Hello World!';

    <a href="#/hello">click me</a>
  <script type="text/ng-template" id="hello.html">


Really appreciate if you may help me out.


You have to use <a href="#!/hello">click me</a> since you are using angular 1.6.x. You have to append an exclamation mark ! to your href.

For more reference: Angular All slashes in URL changed to %2F

Answered By – Vivz

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.