Ayuda en la programación, respuestas a preguntas / Angularjs / angular-ui-router v 0.4.2 con Angular 1.6.1 - angularjs, angular-ui-router

angular-ui-router v 0.4.2 con Angular 1.6.1 - angularjs, angular-ui-router

Básicamente estoy tratando de hacer una ruta simple: donde he definido lo siguiente en 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"
});
}
]);
}());

Estoy usando angular js 1.6.1 y angular-ui-router v 0.4.2. mi índice html es el siguiente:

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

mientras que la vista de la lista de productos es:

<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="/images/{{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>

cuando intento ejecutar la aplicación, debería enrutarse a "/ productos" junto con su plantilla, pero recibí el siguiente error de las herramientas de desarrollador de 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)

la pestaña de red muestra:

Respuestas

0 para la respuesta № 1

Después de un largo tiempo de reproducción, pudimos reproducir de dónde venía el problema. los ngMock la configuración bloqueaba casi cualquier solicitud lanzada por el cliente. Podríamos resolver el problema al permitir AngularJS $ httpBackend obtener fuentes en el siguiente directorio app/views/* que da como resultado el siguiente patrón:

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

0 para la respuesta № 2

Resulta que el problema fue causado porquedel uso de MockE2E. así que si hago algo como $ httpBackend.whenGET ("/ app / products / productsView.html"). passThrough (); no es interceptado por el simulacro.