Question

我正在使用此样板：https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate

我在Gulp方面添加了对Jade的支持，并将Jade文件构建为HTML文件。

当它启动浏览器时，会显示index.html，其中加载了页眉/页脚部分。这就是说，它不会加载到Angular应该加载UI的home.html部分中 - 路由器。

我对Angular很新，所以我确信我错过了很简单的事情。

索引HTML文件（由Jade构建）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--title('{{title}}')-->
    <meta name="description" content="{{description}}">
    <meta name="keywords" content="{{keywords}}">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/handheld.css" media="screen and (min-width:0px) and (max-width:1024px)">
    <link rel="stylesheet" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:1024px)">
    <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:767px)">
  </head>
  <body>
    <div id="wrapper">
      <header id="header">
        <div class="page clearfix">
          <div class="top">
            <ul>
              <li><a href="">khaccsupport</a></li>
              <li><a href="">khaccsupport</a></li>
              <li><a href="">shane@khaccounts.net</a></li>
            </ul>
          </div><a href="/" class="logo"><img src="../images/logo.png"></a>
          <section class="secondary-header">
            <nav class="navigation">
              <ul>
                <li class="top-link"><a href="buy-world-of-warcraft-wow-accounts/" class="top-link">Buy WoW Accounts</a></li>
                <li class="top-link"><a href="sell-wow-accounts/" class="top-link">Sell WoW Accounts</a></li>
                <li class="top-link"><a href="customer-reviews-feedback" class="top-link">Reviews / Feedback</a></li>
                <li class="top-link"><a href="buy-sell-wow-accounts-faq" class="top-link">FAQ</a></li>
              </ul>
            </nav>
          </section>
        </div>
      </header>
      <div class="fb-frame">
        <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkhaccounts&amp;amp;width=450&amp;amp;height=35&amp;amp;colorscheme=light&amp;amp;layout=standard&amp;amp;action=like&amp;amp;show_faces=false&amp;amp;send=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowtransparency="true"></iframe>
      </div>
      <div class="content">
        <div class="page">
          <div ui-view></div>
        </div>
      </div>
      <div class="footer-wrapper index-page">
        <footer id="footer">
          <div class="page">
            <div class="footer-content clearfix">
              <div class="links-wrapper clearfix">
                <section class="footer-links nav">
                  <h4>Navigation</h4>
                  <ul>
                    <li><a href="/buy-world-of-warcraft-wow-accounts">Buy High End Elite Premium WoW Accounts</a><br><a href="/sell-wow-accounts">Sell High End Elite Premium WoW Accounts</a><br><a href="/">High End Elite Premium WoW Accounts For Sale</a><br><a href="/customer-reviews-feedback">KHAccounts.net Customer Reviews & Feedback</a><br><a href="/buy-sell-wow-accounts-faq">KHAccounts.net Buy & Sell WoW Accounts FAQ</a></li>
                  </ul>
                  <ul>
                    <li></li>
                    <div class="secondary-footer"><a href="" class="footer-logo"><img src="../images/footer-logo.png"></a><span class="copyright">©2015 Knucklehead Accounts -- All Rights Reserved.</span></div>
                  </ul>
                </section>
                <section class="footer-links reference">
                  <h4>Referral Links</h4>
                  <ul>
                    <li><a href="http://www.maskedarmory.com">Anonymous WoW Armory Profiles</a><br><a href="http://www.maskedcrusader.com">Trade WoW Accounts</a><br><a href="http://www.maskedcrusader.com/buy-sell-trade-mmorpg/">MMO Game Account Trading</a><br><a href="http://www.maskedcrusader.com/buy-sell-trade-world-warcraft-wow/">WoW Trading Forum</a></li>
                  </ul>
                  <ul>
                    <li><a href="https://www.arenarating.com/category/rbg-rating-boost/world-of-warcraft/">RBG Rating Boost</a><br><a href="https://www.arenarating.com/category/arena-boost-3v3/world-of-warcraft/">Arena Rating Boost</a><br><a href="http://www.twinkinfo.com">TwinkInfo.com</a><br><a href="http://www.twinkinfo.com/forums">TwinkInfo.com Forums</a><br><a href="http://www.twinkinfo.com/forums/f200/">Twinking Guides</a></li>
                  </ul>
                </section>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

Routes.js文件：

'use strict';

/**
 * @ngInject
 */
function Routes($stateProvider, $locationProvider, $urlRouterProvider) {

  $locationProvider.html5Mode(true);

  $stateProvider
  .state('Home', {
    url: '/',
    controller: 'HomeCtrl',
    template: '../views/home.html',
    title: 'Home'
  });

  $urlRouterProvider.otherwise('/');

}

module.exports = Routes;

Answer 1

想出来。事实证明我需要在route.js中使用TemplateURL，而不是模板。

无法获得部分视图显示 - 玉/角

1 个答案: