AngularJS路由异常：URL变化但ng-view不加载页面内容求助

Hey，我看你在搭AngularJS的SPA Demo时遇到了ng-view不加载内容的问题——URL能变但页面出不来，这在刚上手AngularJS路由时是很常见的坑！结合你描述的情况，我整理了几个最可能的原因和解决办法：

• 务必引入路由模块并注入依赖
  AngularJS的路由功能不是核心自带的，得额外引入angular-route脚本，还要在你的应用模块里注入ngRoute依赖才行。比如：

  <!-- 先引入核心AngularJS脚本 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <!-- 再引入路由模块脚本 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-route.min.js"></script>
  

  然后在JS里定义应用时注入依赖：

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

• 检查路由配置是否准确
  你得给应用配置好URL和对应模板的映射关系，比如：

  myApp.config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'Login.html' // 同一文件夹下直接写文件名就行
      })
      .when('/about', {
        templateUrl: 'About.html'
      })
      .otherwise({
        redirectTo: '/' // 匹配不到路由时跳转到登录页
      });
  });
  

  另外，AngularJS 1.6+默认用#!作为URL前缀，如果你用的是#/格式的URL，得额外配置去掉这个前缀：

  myApp.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix(''); // 去掉#!，改用#/
    // 上面的路由配置...
  });
  

• 确认ng-view和导航链接的用法
  主页面里的ng-view容器要放在正确的位置，而且导航链接记得用ng-href而不是普通的href，避免页面刷新：

  <body ng-app="myApp">
    <!-- 导航链接 -->
    <a ng-href="#/">登录</a>
    <a ng-href="#/about">关于</a>
    <!-- 模板内容会渲染到这里 -->
    <div ng-view></div>
  </body>
  

• 检查模板文件的格式
  Login.html和About.html不要写完整的html/head/body标签，只需要写页面片段就行，比如Login.html应该是这样的：

  <div class="login-container">
    <h3>登录</h3>
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <button>提交</button>
  </div>
  

  完整的HTML结构会导致渲染异常。

• 解决本地访问的跨域问题
  如果你用Brackets直接打开本地文件（file://协议），浏览器可能会阻止加载本地模板文件。试试用Brackets的Live Preview功能，它会启动一个本地HTTP服务器，用http://localhost开头的地址访问，这样就能正常加载模板了。

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