Aide à la programmation, réponses aux questions / Angularjs / angular-ui-router v 0.4.2 avec Angular 1.6.1 - angularjs, angular-ui-router

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

j'essaye essentiellement de faire un routage simple: où j'ai défini ce qui suit dans 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"
});
}
]);
}());

J'utilise angular js 1.6.1 et angular-ui-router v 0.4.2. mon index html est le suivant:

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

tandis que la vue de la liste de produits est:

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

lorsque j'essaie d'exécuter l'application, elle doit être acheminée vers le "/ products" avec son modèle, mais j'ai reçu l'erreur ci-dessous des outils de développement 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)

l'onglet réseau affiche:

Réponses:

0 pour la réponse № 1

Après une longue période de reproduction, nous avons pu reproduire d'où venait le problème. Le ngMock la configuration bloquait presque toutes les requêtes lancées par le client. Nous pourrions résoudre le problème en autorisant AngularJS $ httpBackend pour obtenir des sources dans le directoy suivant app/views/* ce qui donne le modèle suivant:

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

0 pour la réponse № 2

il s'avère que le problème a été causé parce quede l'utilisation de MockE2E. donc si je fais quelque chose comme $ httpBackend.whenGET ("/ app / products / productsView.html"). passThrough (); il n'est pas intercepté par le simulacre.