AngularJS按钮点击路由失效问题求助

我看了你的代码和示例，问题其实很明显——你的主页面里缺少了AngularJS路由必需的<ng-view>指令！

问题根源 #

AngularJS的路由系统需要一个指定容器来渲染你通过templateUrl配置的页面模板（比如details.html和main.html），这个容器就是<ng-view>。没有它的话，即使你通过$location.path()成功修改了路由，新的模板也没有地方显示，看起来就像跳转功能失效了一样。

修复步骤 #

1. 在主页面添加<ng-view>容器
   修改你的index.html，在合适位置添加<div ng-view></div>，路由匹配到的模板会自动插入到这个元素中：

   <!DOCTYPE html> 
   <html ng-app="app"> 
   <head> 
     <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
     <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="script.js"></script> 
   </head> 
   <body ng-controller="Controller"> 
     <h1>Plunkr Example</h1> 
     <button ng-click="changeview()">ClickMe</button>
     <!-- 路由模板的渲染容器 -->
     <div ng-view></div> 
   </body> 
   </html>
   

2. 将主页面内容移到对应模板文件
   你当前的index.html里直接写了<h1>MainPage</h1>，但路由配置里/Main指向的是main.html，所以需要把这段内容移到main.html中：

   <h1>MainPage</h1>
   

3. 确保details.html存在且内容正确
   确认你的details.html已经创建，比如可以简单写：

   <h1>Details Page</h1>
   

为什么这样修改后就能生效？ #

你的JS代码其实没有问题：$location.path('/Details')确实会修改路由，路由配置也正确指定了各个路径对应的模板，只是缺少了展示模板的容器。<ng-view>是路由系统的核心载体，所有路由对应的模板都会被动态插入到这个元素中，替换掉之前的内容。

现在再测试点击按钮，就能看到页面成功跳转到Details页面啦！

内容的提问来源于stack exchange，提问作者usersam