Question

我正在使用原始的AngularJS（v 1.6.6），使用jQuery v3.2.1并试图获得基本的库存查询SPA ...这是我第一次真正使用AngularJS进行修改...

出于某种原因，我的控制台甚至在我有机会输入像“GOOG”或“AAPL”这样的搜索词之前就报告了“注入”问题。我目前的搜索字词预先填充了“AAPL”作为默认值。

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

这个错误对我没有意义......任何人都可以告诉我我的代码可能出错（如下所示）

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>

股票在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();

});

有没有办法确定此代码有什么问题以及如何修复它？

提前致谢...

Answer 1

错误是a link to the page，以可读的形式解释了问题。

在引导应用程序时，

myApp模块尚未定义。竞争条件是由于它被置于$(document).ready(function() { ... })块内而引起的。

由于潜在问题，当AngularJS与jQuery结合使用时，也不建议将ng-app="myApp"放在<html>或其他包含<script>标记的元素上。

执行时出现AngularJS Injector错误

HTML：

股票在info.html

main.js

1 个答案: