AngularJS 1.6.x中ui-router的$stateProvider文本无法在ui-view显示

嘿，我帮你找出几个关键问题啦，你这是踩了AngularJS和ui-router的几个常见小坑，导致点击链接后没内容显示：

问题1：重复的ng-app指令 #

你的HTML里<html>标签写了空的ng-app，后面的<div class="container">又写了ng-app="myTestApp"。AngularJS只会初始化它遇到的第一个ng-app指令，所以你的自定义模块根本没被加载起来。

问题2：错误的ui-router依赖名称 #

在定义myTestApp模块时，你写的依赖是['ui-router']，但ui-router的官方模块名称是'ui.router'（用点分隔，不是横杠）。这个错误会让Angular找不到ui-router模块，路由功能直接失效。

问题3：AngularJS 1.6+的哈希前缀变化 #

从AngularJS 1.6版本开始，默认的URL哈希前缀从#/改成了#!/。所以你的链接href="#/usCalculator"会无法匹配路由，要么把链接改成href="#!/usCalculator"，要么在配置里去掉这个前缀。

修正后的完整代码 #

JavaScript代码（myTestApp.js）

angular
  .module('myTestApp', ['ui.router']) // 修正依赖名称
  .config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider){
    // 可选：去掉哈希前缀，这样链接可以继续用#/usCalculator
    $locationProvider.hashPrefix('');
    
    $stateProvider
      .state('usCalculator', {
        url: '/usCalculator',
        template: 'GOOD TEST'
      });
  }]);

HTML代码

<!doctype html>
<html ng-app="myTestApp"> <!-- 只保留一个ng-app，绑定到自定义模块 -->
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.18/angular-ui-router.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script type="text/javascript" src="myTestApp.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body> <!-- 补充完整的body标签，规范HTML结构 -->
  <div class="container">
    <!-- 如果加了hashPrefix('')，这里可以用#/usCalculator；否则用#!/usCalculator -->
    <a href="#/usCalculator">US Calculator</a>
    <div ui-view>
    </div>
  </div>
</body>
</html>

现在再运行代码，点击链接就能看到"GOOD TEST"啦！

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