角UI路由器v 0.4.2與1.6.1角

我基本上是試圖使一個簡單的路由：在那裏我已經定義在app.js角UI路由器v 0.4.2與1.6.1角

(function() { 
    "use strict"; 
    var app = angular.module("productManagment", ["common.services", "ui.router", "productResourceMock"]); 
    app.config(["$stateProvider","$urlRouterProvider","$locationProvider", 
     function ($stateProvider,$urlRouterProvider ,$locationProvider) { 
      $locationProvider.hashPrefix(''); 
      $urlRouterProvider.otherwise('/products'); 
      $stateProvider 
       .state('/products', 
       { 
        url: '/products', 
        templateUrl: 'app/products/productsView.html', 
        controller: "ProductListCtrl as vm" 
       }); 
     } 
    ]); 
}());

下面我使用的角度JS 1.6.1和angular-ui-router v 0.4.2。我的索引HTML如下：

<!DOCTYPE html> 
<html> 
<head> 

    <link href="css/bootstrap.css" rel="stylesheet"/> 
    <link href="css/app.css" rel="stylesheet" /> 

    <!--Library scripts here--> 
    <script src="js/angular.js"></script> 
    <script src="js/angular-resource.js"></script> 
    <script src="js/angular-mocks.js"></script> 
    <script src="js/angular-ui-router.js"></script> 

    <script src="app/app.js"></script> 
    <script src="common/services/common.services.js"></script> 
    <script src="common/services/productResource.js"></script> 
    <script src="common/services/productResourceMock.js"></script> 
    <script src="app/products/productListCtrl.js"></script> 
    <meta charset="utf-8" /> 
    </head> 
    <body ng-app="productManagment"> 

      <div ui-view></div> 

    </body> 
    </html>

而產品列表視圖是：

<div class="panel panel-primary"> 
    <div class="panel-heading" style="font-size: large"> Product List</div> 
    <div class="panel-body"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <td> 
         <button class="btn btn-primary" type="button" 
           ng-click="vm.toggleImage()"> 
          {{vm.showImage ? "Hide" : "Show"}} Image 
         </button> 
        </td> 
        <td>Product</td> 
        <td>Code</td> 
        <td>Availability</td> 
        <td>Price</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="product in vm.products"> 
        <td> 
         <img ng-if="vm.showImage" ng-src="{{product.imageUrl}}" 
          style="width: 50px; margin: 2px" 
          title="{{product.productName}}" /> 
        </td> 
        <td>{{product.productName}}</td> 
        <td>{{product.productCode}}</td> 
        <td>{{product.releaseDate}}</td> 
        <td>{{product.price | currency}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>

當我嘗試運行應用程序，應該沿着路由到「/產品」其模板，但我得到了鍍鉻的開發工具下面的錯誤：

Error: [$compile:tpload] Failed to load template: app/products/productsView.html (HTTP status: undefined undefined) 
http://errors.angularjs.org/1.6.1/$compile/tpload?p0=app%2Fproducts%2FproductsView.html&p1=undefined&p2=undefined 
    at angular.js:68 
    at handleError (angular.js:19730) 
    at processQueue (angular.js:16648) 
    at angular.js:16692 
    at Scope.$eval (angular.js:17972) 
    at Scope.$digest (angular.js:17786) 
    at Scope.$apply (angular.js:18080) 
    at bootstrapApply (angular.js:1841) 
    at Object.invoke (angular.js:4842) 
    at doBootstrap (angular.js:1839)

網絡選項卡顯示：

來源

2017-02-11 user1874288

嗯，愚蠢的問題，但確實'應用程序/產品/ productsView.html'存在？你是否在Webhost上運行你的應用程序？（例如，在瀏覽器中不是'file：///'協議..）。請添加'productsView.html'的視圖文件代碼。 – lin

是的，它存在。我正在使用visual studio的IIS Express。在我嘗試路由之前，應用程序正常工作，其中我已經添加了productListView的div而不是ui-view – user1874288

只是爲了確保您的路線是正確的：您可以在調用'http：//yourhost/app/products/productsView.html'在您的瀏覽器中？請將視圖模板添加到您的問題。 – lin

經過長時間的繁殖，我們能夠重現問題所在。 ngMock配置幾乎阻止客戶端發起的任何請求。我們可以解決了讓AngularJS $httpBackend的問題得到以下directoy app/views/*這將導致以下模式來源：

$httpBackend.whenGET(/^\/app/*/views\//).passThrough();

來源

2017-02-11 14:34:31 lin

事實證明，這個問題是因爲MockE2E的使用造成的。所以如果我做了一些像$ httpBackend.whenGET（「/ app/products/productsView.html」）。passThrough（）;它不被模擬攔截。

來源

2017-02-11 14:22:35 user1874288

角UI路由器v 0.4.2與1.6.1角

回答

相關問題