Angular Ui-router内联模板未呈现答案

【问题标题】：Angular Ui-router inline template not renderingAngular Ui-router内联模板未呈现
【发布时间】：2016-07-14 13:32:23
【问题描述】：

我是 Angular 新手，正在通过 Thinkster 上的教程进行学习。我在 Angular Routing -> 添加新状态步骤。

我正在尝试使用 ui-router 渲染内联模板，但模板没有出现。这是我的index.html（删节）：

<html>
  <head>
    <!-- My js files are loaded here -->
  </head>
  <body ng-app='flapperNews'>

    <div class ='row'>
        <div class="col-md-6 col-md-offset-3">
        <div ui-view></div>
        </div>
    </div>

    <script type="text/ng-template" id="home.html">
      <!-- My template written as plain html>
    </script>
  </body>
</html>

这就是我目前在app.js 中处理路由的方式：

angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
    return;

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home.html',
            controller: 'MainCtrl'
        });

    $urlRouterProvider.otherwise('home');

}]);

据我了解，ui-router 应该解析 url 并在 div ui-view 标签中呈现适当的模板。（Thinkster 说标签应该是 'ui-view' 但ui-router docs 似乎另有说明；我都试过了）。

我的页面呈现空白，并且没有错误记录到控制台。对于它的价值，我只用本地文件做教程，因为我已经添加了路由代码，所以我的 url 附加了一个#，即file://blah/blah/FlapperNews/index.html#，我不确定为什么。

【问题讨论】：

尝试使用 ng-include
为什么在function($stateProvider, $urlRouterProvider){ 后面有一个return;？你没有用这种方式做任何配置。

标签： javascript angularjs url-routing angular-template

【解决方案1】：

只需尝试以下代码，似乎可以工作。它基于您提供的链接。

我从你的代码中修复了什么：

id="home.html" 到 id="/home.html"
评论未关闭：<!-- My template written as plain html>
从配置函数中删除return;
删除了控制器，因为它没有任何代码

<html>
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>
    <body ng-app='flapperNews'>

      <div class ='row'>
        <div class="col-md-6 col-md-offset-3">
          <div ui-view></div>
        </div>
      </div>

      <script type="text/ng-template" id="/home.html">
        test content
      </script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script>
        angular.module('flapperNews', ['ui.router'])
        .config([
          '$stateProvider',
          '$urlRouterProvider',
          function($stateProvider, $urlRouterProvider) {

            $stateProvider
            .state('home', {
              url: '/home',
              templateUrl: '/home.html'
              // controller: 'MainCtrl'
            });

            $urlRouterProvider.otherwise('home');
          }])
        </script>

      </body>
</html>

【讨论】：

谢谢 - 不知道那个回报是怎么进来的，但我完全错过了 id 中的“/”！感谢第二双眼睛！

【解决方案2】：

删除配置函数中的return。

angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home.html',
            controller: 'MainCtrl'
        });

    $urlRouterProvider.otherwise('home');

}]);

【讨论】：