AngularJS:ngRouter无法正常工作

时间:2017-10-24 08:59:58

标签: angularjs ngroute

因为UI-Route无法使用指令(它具有不可破坏的隔离范围)并且不能适合my scenario,所以我正在测试删除UI-Route并转到ngRoute。我花了一天时间在ngRoute上,它仍然没有用。我认为我的代码中肯定存在一些微妙的错误,但我无法弄明白。简化的测试代码如下:

<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>

真的很感激,如果你可以帮助我。

1 个答案:

答案 0 :(得分:2)

由于您使用的是角度1.6.x,因此必须使用<a href="#!/hello">click me</a>。你必须附上感叹号!到你的href。

有关详情,请参阅: Angular All slashes in URL changed to %2F