0
Ich habe auf firefox & entwickelt der Code funktioniert gut, aber wenn ich versuchte, auf Chrome zu testen, zeigt es nur {{err_msg}}, was bedeutet, eckig funktioniert nicht. Ich benutze Django 1.10 Server mit Rest Framework für die Verwaltung von Anfragen aus dem Angularjs 1.5.9 Code. Ich testete auf Firfox, Midori & Chrome. Es funktioniert nur mit Firefox!Angularjs funktioniert nicht in Chrome aber arbeitet in Firefox
Ich bearbeitet die Hosts-Datei, so dass givemecoupon.com:8000 Redirects zu 127.0.0.1:8000, die meine Django-Server ist.
Console Fehler:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=givemecouponApp&p1=…Ic%20(https%3A%2F%2Fcode.angularjs.org%2F1.5.9%2Fangular.min.js%3A21%3A332)
at angular.js:38
at angular.js:4683
at q (angular.js:325)
at g (angular.js:4644)
at eb (angular.js:4566)
at c (angular.js:1803)
at Ic (angular.js:1824)
at ue (angular.js:1709)
at angular.js:32379
at HTMLDocument.b (angular.js:3251)
meine App:
'use strict';
var givemecouponApp = angular.module('givemecouponApp', []);
givemecouponApp.controller('CouponsCtrl', ['$scope', '$http', 'givemecouponService', function CouponsCtrl($scope, $http, givemecouponService) {
$scope.finderloader=true;
$scope.err_msg = 'no error';
var myDataPromise = givemecouponService.getData();
myDataPromise.then(function(result) {
if(result.data == "Not a valid course!" || result.data == "No course passed!"){
$scope.err_msg = result.data;
}else{
$scope.coupons = result.data;
}
}, function (result) {
if(result.status == 429){
$scope.err_msg = "Too many requests!";
}
// TODO: handle the error somehow
}).finally(function() {
// called no matter success or failure
$scope.finderloader = false;
});
}]);
//service for getting coupon codes
givemecouponApp.factory('givemecouponService', function($http) {
var getData = function() {
// Angular $http() and then() both return promises themselves
return $http({method:"GET", url:slug_json_url}).then(function(result){ // What we return here is the data that will be accessible
// to us after the promise resolves
return result;
});
};
return { getData: getData };
});
Vorlage:
{% load static %}
<!DOCTYPE html>
<html ng-app="givemecouponApp">
<head>
<meta charset="utf-8">
<title>Course Page</title>
<script src="https://code.angularjs.org/1.5.9/angular.min.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.5.9/angular-resource.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="{% static 'css/spinkit.css' %}">
</head>
<body ng-controller="CouponsCtrl">
<div>
{% block content %}
<h1>Course Page</h1>
{{course_slug_url}}
{% endblock content %}
{% verbatim %}
<div>Coupons:
<div>{{err_msg}}</div>
<div ng-show="finderloader" class="sk-wave">
<h3>Looking for Coupons</h3>
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
<h2 ng-repeat="coupon in coupons" ng-show="coupon.id==1">
{{coupon.meta_title}}
</h2>
<h2 ng-repeat="coupon in coupons" ng-show="coupon.id==1">
Original Price: {{coupon.original_price}}
</h2>
<ul ng-repeat="coupon in coupons">Code: {{coupon.code}}
<li>Discount price: {{coupon.discounted_price}}</li>
<li>Discount rate: {{coupon.discount_rate}}</li>
<li>Valid untill: {{coupon.end_time}}</li>
<a href="{{coupon.deeplink}}" target="_blank">{{coupon.deeplink}}</a>
</ul>
</div>
</div>
{% endverbatim %}
{% block pass_slug %}
<script type="text/javascript">
slug_json_url = "http://givemecoupon.com:8000/api/?format=json&slug={{course_slug_url}}";
</script>
{% endblock pass_slug %}
<script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>
Was ist das Problem ???
Wird in der Konsole in Chrome ein Fehler angezeigt? –
Ich habe das Konsolenprotokoll von Chrome zum Post hinzugefügt –