11

我正在尝试创建我的第一个 Angular 应用程序。但它根本不起作用。我不知道有什么问题。我检查了控制台，但没有错误。

<head>
 <meta charset="utf-8">
 <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
  <h1>Test angular</h1>
  <a href="#/">Main</a>
  <a href="#sec">Second</a>
  <a href="#th">Third</a>
  <div ng-view></div>
</body>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
});
</script>

谁能帮我？

4

5 回答 5

30

Angular 1.6 中的路由从 更改#/myUrl为#!/myUrl

您应该将您的 ref 更改为：

<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>

如果要删除此前缀，请参阅此答案。

于 2017-01-25T13:02:45.260 回答
5

尝试将 $locationProvider 添加到您的脚本中

app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.hashPrefix('');
        }]);
于 2017-02-13T14:01:41.903 回答
1

我发现您没有$routeProvider正确包含，这是有效的路由代码：

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
}]);
于 2016-12-16T13:28:16.647 回答
1

试试这个代码它正在工作

app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/about', {
        templateUrl: 'about.html'
    })
    .when('/service', {
        templateUrl: 'service.html'
    });}]);
于 2017-04-22T10:52:42.950 回答
-3

您需要修复您的 href 属性：

正确的方法是：

<a href="#/">Main</a>
<a href="#/sec">Second</a>
<a href="#/th">Third</a>
于 2016-12-16T13:40:32.023 回答