Question

我有三页。我想在ng-view中加载它们。当用户点击页面时，应加载相关页面。我设置了routerProvider，但它没有用。

// HTML

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="learningApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    ul li{ float: left; list-style: none; margin: 0 10px}
</style>
</head>

<body>
<nav>   
    <ul><li><a href="#home">home</a></li><li><a href="#about">about</a></li><li><a href="#service">service</a></li></ul>
</nav>  



    <div ng-view></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</body>
</html>

// App.js代码

(function(){
  var app= angular.module('learningApp',['ngRoute'])

  app.config(['$routeProvider',function($routeProvider){
  $routeProvider.
               when('/home', {
                  templateUrl: 'home.html'
               }).
               when('/aboutus', {
                  templateUrl: 'aboutus.html'

               }).
               when('/service',{
                templateUrl:'service.html'
               }).
               otherwise({
                  redirectTo: '/home'
               });

  }])

})

Answer 1

如果没有控制台错误，我认为您需要使用a标记，例如

请注意/

之后的其他#

<a href="#/home">home</a>
<a href="#/about">about</a>

Answer 2

一切看起来都不错，但你的主播有问题。

修改：

<nav>   
    <ul><li><a href="#home">home</a></li><li><a href="#about">about</a></li><li><a href="#service">service</a></li></ul>
</nav>

要：

<nav>   
    <ul><li><a href="#/home">home</a></li><li><a href="#/about">about</a></li><li><a href="#/service">service</a></li></ul>
</nav>

使用index.html中的ng-view加载视图

2 个答案: