Question

我是Angular的新手，并通过Thinkster上的教程学习。我在Angular Routing - ＆gt;添加新状态步骤。

我正在尝试使用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说标签应该是＆＃39; ui-view＆＃39;但是ui-router docs似乎表明不是这样;我已经尝试了两种方式。

我的页面呈现为空白，并且没有错误记录到控制台。为了它的价值，我正在使用本地文件进行教程，因为我已经添加了路由代码，我的网址附加了一个＃，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

只需尝试以下代码即可正常工作。它基于您提供的链接。

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

id =“home.html”to 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-router内联模板无法呈现

2 个答案: