Angular Ui-路由器内联模板未呈现

Question

我是 Angular 的新手，正在学习 Thinkster 上的教程。我在 Angular 路由 -> 添加新状态步骤。

我正在尝试使用 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#，我不确定为什么。

Answer 1

删除配置函数中的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');

}]);

Answer 2

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

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

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>

Angular Ui-路由器内联模板未呈现

Angular Ui-router inline template not rendering

javascript

url-routing

angularjs

angular-template