Javascript Angular about.html视图不工作_Javascript_Html_Angularjs

Javascript Angular about.html视图不工作

javascript html angularjs

Javascript Angular about.html视图不工作,javascript,html,angularjs,Javascript,Html,Angularjs,我创建了home.html、about.html、app.js和index.js。我想在index.html页面中显示about.html和home.html视图。但当我点击about时，它会显示主页。url会更改，但浏览器窗口中没有任何更改。下面是app.js的代码 app.config(function($routeProvider) { $routeProvider.when("/home", { templateUrl: "home.html", co

我创建了home.html、about.html、app.js和index.js。我想在index.html页面中显示about.html和home.html视图。但当我点击about时，它会显示主页。url会更改，但浏览器窗口中没有任何更改。下面是app.js的代码

app.config(function($routeProvider) {


    $routeProvider.when("/home", {
      templateUrl: "home.html",
      controller: "HomeController"
    })
      .when("/about", {
      templateUrl: "about.html",
      controller: "AboutController"
    })
      .otherwise({
      redirectTo: "/home"
    });
  });
  app.controller("HomeController", function($scope) {
    $scope.title = "I'm in home"
  });
  app.controller("AboutController", function($scope) {
    $scope.title = "I'm in about"
  });

}

这是index.html的代码

<!DOCTYPE html>
<html ng-app="app">

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#/home">Home</a></li>
            <li><a href="#/about">About</a></li>
        </ul>
    </nav>
    <div>
        <ng-view>
        </ng-view>
    </div>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

这是home.html的代码

<div>
{{title}}
</div>


{{title}}

这是about.html的代码

<div>
{{title}}
</div>


{{title}}

我记得链接格式已从angular 1.6.0更改

您可以尝试以下链接

<li><a href="#!/about">About</a></li>

而不是

<li><a href="#/about">About</a></li>

把它放进js Fiddle你试过ui路由器吗？