AngularJS Injector error upon execution

Question

I'm using the original AngularJS(v 1.6.6), with jQuery v3.2.1 and trying to get a basic stock query SPA happening... This is the first time I've really tinkered with AngularJS...

For some reason though, my console is reporting an "injector" issue even before I get the chance to type in a search term like "GOOG" or "AAPL". I've currently got the search term pre-populated with "AAPL" as a default.

Uncaught Error: [$injector:modulerr] 
http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A26%3A408%0A%20%20%20%20at%20b%20(file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A25%3A439)%0A%20%20%20%20at%20file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A26%3A182%0A%20%20%20%20at%20file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A42%3A290%0A%20%20%20%20at%20p%20(file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20hb%20(file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20Uc.c%20(file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(file%3A%2F%2F%2FE%3A%2FSandbox%2Flibraries%2Fangular.min.js%3A22%3A332

This error makes no sense to me... Can anyone tell me what I may be doing wrong with my code (shown below)

HTML:

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="StockController">

    <head>
        <title>Qwilr Test Demonstration for Stock Tracker</title>
        <script src="./libraries/jquery-3.2.1.min.js"></script>
        <!-- DOM manipulation and AJAX calls -->
        <script src="./libraries/angular.min.js"></script>
        <!-- realtime interactivity -->
        <script src="./libraries/lockr.js"></script>
        <!-- local storage library -->
        <script src="./script/main.js" ng-module="myApp"></script>
    <head>

    <body>
        <div class="portfolio">
            <div class="wallet"></div>
            <div class="stocks"></div>
            <div class="search">
                Stock: <input type="text" ng-model="search" ng-model-options="{debounce: 800}" placeholder="Enter stock code" />
            </div>
            <div id="main-info" ng-include="'stock-info.html'"></div>
        </div>
    </body>
</html>

stock-info.html

<div ng-if="!details.dataset">
    Loading results...
</div>

<div ng-if="details.dataset.refreshed_at!==''">
    <span class="span-outer">
            <a href="https://www.google.com.au/search?q={{details.dataset.details.dataset_code}}" target="_blank">{{(details.dataset.name).replace(" Prices, Dividends, Splits and Trading Volume","")}}</a>
        </span>

    <p><strong>Latest Information:</strong> {{ details.dataset.newest_available_date }}</p>
    <p><strong>Latest Price: {{curr(details.dataset.data[0][4]}}</strong></p>
</div>

<div ng-if="details.dataset.Response===''">
    No results found.
</div>

main.js

$(document).ready(function() {

    // Default Currency display function
    function curr(n) {
        return "$" + n.toLocaleString("en-AU", {
            style: "decimal",
            minimumFractionDigits: 2
        });
    }

    /*  If wallet value already available in local storage, use that value to populate wallet local variable
        else use default value. */
    Lockr.flush();
    if (Lockr.get('wallet')) {
        //alert("Getting wallet");
    } else {
        Lockr.set("wallet", 1000000); // Default wallet, 1 million dollars!!
        //alert("Setting default wallet");
    }
    var wallet = Lockr.get("wallet");

    // If stocks array exists then pull it from local storage, else define it as a blank and we'll work it out from there.

    if (Lockr.get('stocks')) {
        //alert("Getting stocks");
    } else {
        Lockr.set("stocks", []); // Empty set
        //alert("Setting default stocks array");
    }
    var stocks = Lockr.get("stocks");

    function displayPortfolio() {
        $(".wallet").html(`Current Wallet: ${curr(wallet)}`);
        if (stocks.length) {
            $.each(stocks, function(index, element) {
                $(".stocks").append(`<div class="stock">${element.stockname}</div>`);
            });
        } else {
            $(".stocks").html("No stocks in portfolio");
        }
    }

    /* Angular Code */

    angular.module('myApp', []).controller('StockController', function($scope, $http) {
        $scope.$watch('search', function() {
            fetch();
        });

        $scope.search = "AAPL";

        function fetch() {
            $http.get("https://www.quandl.com/api/v3/datasets/WIKI/" + $scope.search + ".json").then(function(response) {
                $scope.details = response.data;
            });
        }
    });
    /* END Angular Code */

    displayPortfolio();

});

Is there any way to determine what is wrong with this code and how to fix it?

Thanks in advance...

AngularJS (v 3.2.1)? I believe 1.6.7 is the lates for now... — dhilt
– dhilt, Commented Dec 11, 2017 at 2:00

Estus Flask · Accepted Answer · 2017-12-11 02:12:31Z

2

The error is a link to the page that explains the problem in readable form.

myApp module isn't defined at the moment when the application is being bootstrapped. Race condition is caused by the fact that it is put inside $(document).ready(function() { ... }) block.

It's also not advisable to put ng-app="myApp" on <html> or other element that contains <script> tags when AngularJS is used in conjunction with jQuery due to potential problems.

answered Dec 11, 2017 at 2:12

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phix Over a year ago

In other words, don't wrap your AngularJS in jQuery, but the other way around.

Collectives™ on Stack Overflow

AngularJS Injector error upon execution

HTML:

stock-info.html

main.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

stock-info.html

main.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related