CODEWITHSUNDEEP
javascriptangularjsdjangogoogle-chromefirefox
Mohamed El-Saka
Mohamed El-Saka

Reputation: 772

Angularjs not working in Chrome but working in Firefox

I have been developing on firefox & the code works fine but when I tried to test on Chrome it just displays the {{err_msg}} which means angular is not working. I am using Django 1.10 server with Rest Framework for managing get requests from the Angularjs 1.5.9 code. I tested on Firfox, Midori & Chrome. It only works on Firefox!

I edited the hosts file so that givemecoupon.com:8000 redirects to 127.0.0.1:8000 which is my Django server.

Console error:

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)

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

Template:

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

What is the problem???

Upvotes: 0

Views: 2765

Answers (1)

Mohamed El-Saka
Mohamed El-Saka

Reputation: 772

After hours of search I managed to solve the problem. I just changed 

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

to:

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

it was SublimeText snippet that created the first code which caused the problem. It looks the async is what causes the AngularJs to not work in Chrome & break the whole script!

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.

Then after fixing the Async problem I got CORS error

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.

Which I solved by the help of https://github.com/ottoyiu/django-cors-headers/ by adding these lines to the settings.py file:

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

Upvotes: 1

Related Questions