Angularjs 不在 Chrome 中工作，但在 Firefox 中工作答案

【问题标题】：Angularjs not working in Chrome but working in FirefoxAngularjs 不在 Chrome 中工作，但在 Firefox 中工作
【发布时间】：2017-05-10 01:08:06
【问题描述】：

我一直在 firefox 上开发，代码运行良好，但是当我尝试在 Chrome 上测试时，它只显示 {{err_msg}}，这意味着 angular 不起作用。我正在使用带有 Rest Framework 的 Django 1.10 服务器来管理来自 Angularjs 1.5.9 代码的获取请求。我在 Firfox、Midori 和 Chrome 上进行了测试。它仅适用于 Firefox！

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

控制台错误：

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>

什么问题？？？

【问题讨论】：

chrome的控制台是否显示错误？
我将 Chrome 中的控制台日志添加到帖子中

标签： javascript angularjs django google-chrome firefox

【解决方案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 sn-p 创建了导致问题的第一个代码。看起来 async 是导致 AngularJs 无法在 Chrome 中工作并破坏整个脚本的原因！

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.

然后在修复异步问题后，我得到了 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

【讨论】：