我正在使用原始的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
这个错误对我没有意义......任何人都可以告诉我我的代码可能出错(如下所示)
<!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>
<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>
$(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();
});
有没有办法确定此代码有什么问题以及如何修复它?
提前致谢...
答案 0 :(得分:2)
错误是a link to the page,以可读的形式解释了问题。
在引导应用程序时, myApp
模块尚未定义。竞争条件是由于它被置于$(document).ready(function() { ... })
块内而引起的。
由于潜在问题,当AngularJS与jQuery结合使用时,也不建议将ng-app="myApp"
放在<html>
或其他包含<script>
标记的元素上。