Question

我一直在开发firefox＆amp;代码工作正常，但当我尝试在Chrome上测试它只显示{{err_msg}}，这意味着角度不起作用。我正在使用带有Rest Framework的Django 1.10服务器来管理来自Angularjs 1.5.9代码的get请求。我测试了Firfox，Midori＆amp;铬。它只适用于Firefox！

我编辑了hosts文件，以便givemecoupon.com:8000重定向到我的Django服务器127.0.0.1:8000。

控制台错误：

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)

我的应用：

'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 };
});

模板：

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

问题是什么???

Answer 1

经过几个小时的搜索，我设法解决了这个问题。我刚刚改变了

<script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript" charset="utf-8" async defer></script>

为：

<script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript"></script>

是SublimeText片段，它创建了导致问题的第一个代码。看起来async导致AngularJs无法在Chrome＆amp;打破整个剧本！

Asynchronous execution <script async>
Don’t care when the script will be available? Asynchronous is the best of both worlds: HTML parsing may continue and the script will be executed as soon as it’s ready. I’d recommend this for scripts such as Google Analytics.

然后在修复Async问题后，我收到了CORS错误

XMLHttpRequest cannot load http://givemecoupon.com:8000/api/?format=json&slug=arduino-sbs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.givemecoupon.com:8000' is therefore not allowed access.

我在https://github.com/ottoyiu/django-cors-headers/的帮助下解决了这个问题通过将这些行添加到settings.py文件：

INSTALLED_APPS = [
    #django generated
    #3rd party
    'rest_framework',
    'corsheaders', #manage Cross-side API requests
    #my apps
]

MIDDLEWARE = [
    #cors headers
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #django generated
]

# CORS allow anyone to get API calls
CORS_ORIGIN_ALLOW_ALL = True

Angularjs不在Chrome中工作但在Firefox中工作

1 个答案: