Angular Ui路由器内嵌模板无法渲染

我是Angular的新手，并通过Thinkster上的教程进行学习。我在Angular Routing - >添加新状态步骤。Angular Ui路由器内嵌模板无法渲染

我想使用ui路由器来呈现一个内联模板，但模板没有出现。这里是我的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的路由器应该解析URL和渲染相应的div ui-view标签中的模板。（Thinkster说这个标签应该是'ui-view'，但ui-router docs似乎表明了其他情况;我已经尝试了这两种）。

我的页面呈现空白，并且没有错误记录到控制台。对于它的价值，我正在使用本地文件进行教程，并且由于我添加了路由代码，因此我的网址附加了一个＃，即file://blah/blah/FlapperNews/index.html#，我不确定原因。

来源

2016-07-14 user2888805

尝试使用ng -include –

为什么在函数后面有一个'return;'（$ stateProvider，$ urlRouterProvider）{'？你没有以这种方式做任何配置。 – MMhunter

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

我从您的代码固定的内容：

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>

来源

2016-07-14 13:50:18 user1121883

谢谢 - 不知道该怎么回到那里，但我完全错过了ID中的“/”！谢谢你的第二套眼睛！ – user2888805

在您的配置功能中删除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'); 

}]);

来源

2016-07-14 13:50:11 MMhunter

Angular Ui路由器内嵌模板无法渲染

回答

相关问题