AngularJS: ngRouter cannot work

Question

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>

<head>
  <title>Hello</title>
  <script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
  <script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
  <script>
    'use strict';
    angular.module('Hello', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/hello', {
        templateUrl: 'hello.html',
        controller: 'Ctrl1'
      }).otherwise({
        redirectTo: "/"
      });
    }])
    .controller('Ctrl1', ['$scope', function ($scope) {
      $scope.content = 'Hello World!';
    }]);
  </script>
</head>

<body>
  <div>
    <h1>Demo</h1>
    <a href="#/hello">click me</a>
  </div>
  <ng-view></ng-view>
  <script type="text/ng-template" id="hello.html">
    <p>{{content}}</p>
  </script>
</body>

</html>

Really appreciate if you may help me out.

@Avnesh I'm trying above with in the localhost. but in my real scenario I fetched the data to be shown from the server. — zipper, Oct 24 '17 at 09:11
@Sajeetharan There is no error at the console. If I put something like `console.log('test')` in the beginning of controller it does not show -- the route failed and the controller is not called. — zipper, Oct 24 '17 at 09:12
@Oops Try using click mefor your anchor tags since you are using angular 1.6 — Vivz, Oct 24 '17 at 09:12
Glad to be of help. I have provided an answer below, please accept it if you find it helpful :) @Oops — Vivz, Oct 24 '17 at 09:17

score 2 · Accepted Answer · answered Oct 24 '17 at 09:14

2

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 Oct 24 '17 at 09:14

Vivz

6,625
2
17
33

1

Thank you this finally saved me at the end of the day! – zipper Oct 24 '17 at 09:21

AngularJS: ngRouter cannot work

1 Answers1