$location修改路径但未加载对应.html页面的问题

我来帮你梳理下可能导致这个问题的几个常见原因，你可以逐一排查：

• 确认ngRoute模块已正确注入
  AngularJS的路由功能依赖ngRoute模块，首先要确保你的应用模块已经注入了它：

  var app = angular.module('yourAppName', ['ngRoute']);
  

  同时，路由配置必须放在config块中，并且正确注入$routeProvider，像这样：

  app.config(function($routeProvider) {
    $routeProvider
      .when('/unauthorized', {
        templateUrl:'partials/unauthorized.html',
        controller:'unauthorizedController'
      })
      // 建议加上otherwise路由，避免无匹配路由的情况
      .otherwise({ redirectTo: '/' });
  });
  

• 检查页面中是否存在<ng-view>容器
  AngularJS路由是通过<ng-view>标签来渲染对应模板的，如果你的主页面（比如index.html）里没有这个标签，就算路由跳转成功，新页面的内容也没有地方展示。一定要确保主页面里有：

  <ng-view></ng-view>
  

• 验证模板路径和文件存在性
  打开浏览器的开发者工具，切换到Network标签，触发跳转后看看partials/unauthorized.html的请求状态：

  • 如果是404错误，说明文件路径不对，你需要确认文件是否在正确的位置（比如index.html在根目录的话，partials文件夹要和它同级）
  • 如果请求成功，再检查模板内容是否正常，有没有语法错误

• 确认控制器已正确定义
  要保证unauthorizedController已经被正确注册到你的应用模块中，没有拼写错误：

  app.controller('unauthorizedController', function($scope) {
    // 这里可以写控制器的逻辑，哪怕是空的也要确保存在
  });
  

  如果控制器未定义，路由加载会失败，页面不会更新。

• 检查$location跳转是否在Angular的Digest Cycle中
  如果你是在异步回调（比如原生AJAX、第三方库的回调）中调用$location.path()，Angular可能不会自动触发视图更新。这时候需要手动触发Digest Cycle：

  if(result.data.authenticated === false) {
    $scope.$apply(function() {
      $location.path('/unauthorized');
    });
  }
  

  这样能确保Angular感知到路由变化并更新视图。

• 查看控制台错误信息
  浏览器开发者工具的Console标签会给出最直接的线索，比如路由初始化失败、控制器找不到、模板加载错误等，一定要先看看这里有没有报错。

另外，URL显示/#/unauthorized是Angular默认的hash模式路由，这是正常的，不用修改模式（除非你特意配置了HTML5模式）。

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