Angularで実行するWebアプリケーションをセットアップしてから少しです。私は古いプロジェクト(私がやっているページにコントローラを実装しようとしている、コントローラーファイルが正しく設定されていることなどを確認しようとしている)を使って歩みを進めていました。セットアップ。
私が使用しようとしているページを読み込むと、2つのエラーが表示され、ボタンを押したときにエクスプレスサーバへのGETコールが起動しません。これらのエラーは、次のとおりです。
angular.js:38 Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.6/$injector/nomod?p0=eagledreamApp
at angular.js:38
at angular.js:2101
at b (angular.js:2025)
at Object.module (angular.js:2099)
at mainpageController.js:1
(anonymous) @ angular.js:38
(anonymous) @ angular.js:2101
b @ angular.js:2025
(anonymous) @ angular.js:2099
(anonymous) @ mainpageController.js:1
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=eagledreamApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.6%2F%24injector%2Fnomod%3Fp0%3DeagledreamApp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A6%3A412%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A25%3A235%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A24%3A282)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A25%3A20%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A39%3A374%0A%20%20%20%20at%20q%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20db%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A19)%0A%20%20%20%20at%20Ac%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332)
at angular.js:38
at angular.js:4630
at q (angular.js:322)
at g (angular.js:4591)
at db (angular.js:4513)
at c (angular.js:1777)
at Ac (angular.js:1798)
at fe (angular.js:1683)
at angular.js:31018
at HTMLDocument.b (angular.js:3197)
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainpageStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="mainpageController.js"></script>
</head>
<body ng-app="xyzApp" ng-controller="mainpageController">
<div id="search">
<button type="button" class="searchButton" ng-click="buttonpress()">Search</button>
</div>
</body>
</html>
はコントローラー:
angular.module('xyzApp').controller('mainpageController', ['$scope', '$http', function($scope, $http){
$scope.buttonpress = function() {
$http.get('/buttonpress')
.then(function(response) {
alert(response);
});
};
}]);
server.js(実行私は、コマンドラインでNPM server.jsを使用)
var express = require('express');
var app = express();
var fs = require('fs');
app.use(express.static(__dirname + '/Source'));
app.listen(3000, function() {
console.log("Launch successful. To access app, open your browser and insert the following URL into your address bar: http://localhost:3000/");
});
app.get('/', function (req, res) {
console.log("Loading Home Page...");
res.sendFile('/Source/mainpage.html', {root: __dirname });
});
app.get('/buttonpress', function (req, res) {
res.send("Hello World");
})
およびapp.js
angular.module('xyzApp');
(私は、この別のファイルを持っている必要があり、なぜ私は正確にわからないんだけど、それは私が私の他のプロジェクトが動作するようになった方法ですと「そのプロジェクトは、それ自身のアプリのファイルがあったが、ラインがangular.module('abcApp', ['ngSanitize']);
だったと私はドンそのapp.jsファイルがなくてもプロジェクトが正しく動作するようになると思います。
インデックスファイルにapp.jsを参照してください、私が実際に持っていますすべてが私のファイルで 'eagledreamApp'に設定されていますが、ポストするときにそれをxyzに振りかざすが、ポストでそのインスタンスを変更するのを忘れてしまった。 ありがとう!私はその頭を参照していないとそのエラーを実現しました。今私は同じフォルダにいなければならない奇妙な問題を抱えています。 app.jsをHTMLファイルの上のフォルダに入れようとすると、 '../ app.js'を実行するときに、同じコンソールエラーと2つの方法でファイルを見つけることができなくなります。 – Ryan