Question

  TFC.config(function($routeProvider){
  $routeProvider
  .when('/bookings', {
    templateUrl: '/mybookings.html',
    controller: 'accountCtrl'
  })
  .when('/credits', {
    templateUrl: '/mycredits.html',
    controller: 'myCreditsCtrl'
  })
  .when('/membership', {
    templateUrl: 'membership.html',
    controller: 'membershipCtrl'
  })
  .when('/profile', {
    templateUrl: 'profile.html',
    controller: 'profileCtrl'
  })
  .when('/invoices', {
    templateUrl: 'invoice.html',
    controller: 'invoiceCtrl'
  })
  .when('/team', {
    templateUrl: 'team.html',
    controller: 'teamCtrl'
  })
  .when('/benefits', {
    templateUrl: 'benefits.html',
    controller: 'benefitsCtrl'
  })
  .when('/refer', {
    templateUrl: 'refer.html',
    controller: 'referCtrl'
  })
  .when('/support', {
    templateUrl: 'support.html',
    controller: 'supportCtrl'
  })
  .when('/about', {
    templateUrl: 'accountabout.html',
    controller: 'accountAboutCtrl'
  })
})

这是我正在注入视图的html

<!DOCTYPE html>
<html ng-app="TFC">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Founder's Cafe</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <section style="background: black;">
        <div class="navbar navbar-default" style="position: static;">
            <div class="navigation-wrapper">
                <a href="/" class="custom-logo"><img src="assets/img/webLogo.png" alt="TFC Logo"></a>
                <ul class="custom-navbar nav navbar-nav">
                    <li class="about-link active"><a href="/about.html" class="nav-links">About Us</a></li>
                    <li><a href="/facility.html" class="nav-links">Facilities</a></li>
                    <li><a href="/pricing.html" class="nav-links">Pricing</a></li>
                    <li><a href="/event.html" class="nav-links">Events</a></li>
                    <li><a href="/gallery.html" class="nav-links">Gallery</a></li>
                    <li><button type="button" class="btn btn-default btn-lg navbar-btn" name="button">LOGIN</button></li>
                </ul>
                <div class="ham-wrapper">
                    <div class="hambar-1"></div>
                    <div class="hambar-2"></div>
                    <div class="hambar-3"></div>
                </div>
            </div>
        </div>
        <div style="position: relative; height: 35em; overflow: hidden; background: url('http://www.planwallpaper.com/static/images/cool-wallpapers-hd-8087-8418-hd-wallpapers.jpg'); background-attachment: fixed;">
            <div class="overlay">&nbsp;</div>
        </div>
    </section>
    <section>
        <div class="account-wrapper">
            <div class="account-items">
                <div class="header">
                    <div class="user-image"><img src="" alt=""></div>
                    <div class="user-header">
                        <h3>{{user.name}}</h3>
                        <h4>heading</h4>
                    </div>
                </div>
                <div class="user-items">
                    <div class="item">
                        <div class="item-main">
                            <img src="assets/img/account/icn-booking.png" alt="">
                            <h5 class="item-name"><a href="#/bookings">My Booking</a></h5>
                        </div>
                        <div class="item-arrow"><img src="" alt=""></div>
                    </div>
                    <hr>
                    <div class="item">
                    <div class="item-main">
                        <img src="assets/img/account/icn-logout.png" alt="">
                        <h5 class="item-name"><a href="">Logout</a></h5>
                    </div>
                </div>
            </div>
         </div>
         <div class="account-display">
             <div ng-view=""></div>
         </div>
         </div>
    </section>
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="node_modules/angular/angular.min.js" charset="utf-8"></script>
    <script src="node_modules/ng-dialog/js/ngDialog.min.js" charset="utf-8"></script>
    <script src="node_modules/angular-route/angular-route.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="node_modules/jwt-decode/build/jwt-decode.min.js" charset="utf-8"></script>
    <script src="assets/js/style.js" charset="utf-8"></script>
    <script src="assets/js/app.js" charset="utf-8"></script>
</body>

</html>

mybookings.html位于根文件夹中。

<div class="bookings-header">
  <img src="assets/img/account/icn-booking.png" alt=""><h4>My Bookings</h4>
</div>
<div class="bookings-info-wrapper"></div>
  <div class="bookings-info">
    <h5>Coworking:</h5>

    <div class="coworking-info">
      <div></div>
      <div>
        <p>Dedicated Desk(Dec 1-Dec 30)</p>
      </div>
    </div>
</div>

ng-view指令位于div.account-display内，作为测试，当用户点击第一个my bookings列表项时，我试图仅显示mybookings.html 1}}在div.item

内

ng-view没有显示任何内容，也没有出现任何错误。有趣的是，当我查看我的开发控制台的网络选项卡时，其中没有提到mybookings.html。

我的角度js和角度路线版本是1.6.2。 jquery版本是3.1.1

需要帮助

Answer 1

使用<ng-view></ng-view>标记而不是<div ng-view=""></div>

以及路由提供程序中的默认网址

.otherwise({
   redirectTo: '/bookings'
})

Answer 2

我创建了demo，似乎工作正常。如果您确定html文件路径存在，那么其他可能的崩溃可能是版本冲突。检查角度路径和角度版本是否相互兼容。

  <script data-require="angular.js@1.6.1" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
  <script data-require="angular-route@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>

被修改

Angular 1.6中的路由在重定向到状态时需要添加!。

<h5 class="item-name"><a href="#!/bookings">My Booking</a></h5>

Answer 3

要加载默认的mybookings.html文件，您必须在default url中指定route provider参数。这就是方法。我希望这能解决你的问题。

TFC.config(function($routeProvider){
  $routeProvider
  .when('/bookings', {
    templateUrl: '/mybookings.html',
    controller: 'accountCtrl'
  })
  ....
  .otherwise({
       redirectTo: '/bookings'
  })
})

现在默认mybookings.html将加载

ng-view没有获取我的模板Angular 1.6.2

3 个答案: