Question

我基本上试图做一个简单的路由：我在app.js中定义了以下内容

(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>

当我尝试运行应用程序时，它应该与其模板一起路由到“/ products”，但我从chrome的开发人员工具中得到以下错误：

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)

网络标签显示：

Answer 1

事实证明问题是由于使用MockE2E引起的。所以如果我制作类似$ httpBackend.whenGET（“/ app / products / productsView.html”）的东西.passThrough（）; 它不会被模拟人员拦截。

Answer 2

经过长时间的复制，我们能够重现问题来自于。 ngMock配置几乎阻止了客户端发出的任何请求。我们可以通过允许AngularJS $httpBackend在以下directoy app/views/*中获取源来解决问题，这会产生以下模式：

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

angular-ui-router v 0.4.2 with Angular 1.6.1

2 个答案: