Question

angularjs路线无法正常工作。第一页显示其他页面不切换视图。这是代码

的script.js

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

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
    templateUrl: "home.html",
  })
    .when("/About", {
    templateUrl: "About.html",
  })
    .when("/contact", {
    templateUrl: "contact.html",
  });
});

的index.html

<!DOCTYPE HTML>
<html>

<head>
  <title>Welcome Home</title>
</head>

<body ng-app="myApp">
  <p><a href="#">Main</a></p>
  <a href="#About">About</a>
  <a href="#contact">contact</a>

  <h3> welcome to the page</h3>

  <div ng-view></div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  <script src="script.js"></script>
</body>

</html>

home.html的

<h1>Welcome Home </h1>

About.html

<h1>Welcome About </h1>

contact.html

<h1>Welcome Contact </h1>

Answer 1

还要注意依赖注入。

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when("/", {
    templateUrl: "home.html",
  })
    .when("/About", {
    templateUrl: "About.html",
  })
    .when("/contact", {
    templateUrl: "contact.html",
  });
  $locationProvider.html5Mode(true);
}]);

角度路线不能正常工作。第一页显示其他页面不切换视图

1 个答案: