0
私はMEANスタックに100％新しく、現在はMichael Moserのvideoの助けを借りて自習しています（読んでいる方は、わかりやすいビデオ！:)）。私はCRUDの機能を備えた非常に基本的なプログラムを作ろうとしていますが、Angular JSファイルを読み込むときにこの特定のエラーメッセージが表示されません。誰かが私を正しい方向に向けることができますか？ここで平均スタック - AngularJSスクリプトの読み込み中にエラーが発生しました
私のコードは次のとおりです。
package.json
{
"name": "starter-node-angular",
"main": "server.js",
"dependencies": {
"body-parser": "~1.4.2",
"express": "^4.5.1",
"method-override": "~2.0.2",
"mongoose": "~3.8.0"
}
}
server.js
// modules needed
// express - middleware
var express = require('express');
var app = express();
// listens for request to server and throws main.html as response
app.get('/', function(req,res) {
res.sendfile(__dirname + '/client/views/main.html');
});
// listens for request to server with 'scripts' in it and returns the appropriate file declared
// in the script tag
app.use('/scripts', express.static(__dirname + '/client/scripts'));
app.listen(3000, function(){
console.log("Ready...");
});
HTML
<html ng-app="ProductApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js" type="text/javascript"></script>
<script type="text/javascript" src="/client/scripts/main.js"></script>
<!-- stylesheets -->
<link href="/styles/main.css" rel="stylesheet" type="text/css">
</head>
<body class="main-background" ng-controller="MainController">
<!-- Area for Logo and Search Bar -->
<div class="header">
<div class="main-logo">
STUFF - Product Inventory v1.0
</div>
<div class="main-search">
<input type="text" class="search-field" placeholder="What are you looking for?" />
<img src="images/search-icon.png" title="Search" class="search-ico" />
</div>
</div>
<!-- Area for Add Button -->
<div class="add-container">
<div class="add-button" ng-click="addProduct(test);">
<img src="images/add-icon.png" title="Add" class="add-ico" />
<span class="add-text">Add Product</span>
</div>
</div>
</body>
</html>
AngularJS
'use strict';
var app = angular.module('ProductApp', []);
// Main controller
app.controller('MainController', ['$scope', function ($scope) {
// Search Products
$scope.searchProduct = function (param) {
// Search fxn goes here...
}
// Add products
$scope.addProduct = function (param) {
alert('Add product');
}
// Edit Products
$scope.updateProduct = function (param) {
// Update fxn goes here...
}
// Delete Product
$scope.deleteProduct = function (param) {
// Delete fxn goes here
}
}]);
私は呼び出しJSファイルは、単にsrcで完全なパスを宣言した背景から来ました。 Tbh、私は "ミドルウェア"の概念とすべてで、MEANの設定全体がちょっと複雑になっているのを見つけました。 :(私はしかし、その中にMongoDBの役割を高く評価しています。
とにかく、任意のヘルプやアドバイスをいただければ幸いです。神は、私は今それの多くを必要と知っている。
ありがとう。
更新1： は、私は私の<script>タグがなしの成功と、そのように私の角を呼び出す方法を変更してみました：
<script type="text/javascript" src="C:/users/myusername/documents/practice/product db/client/scripts/main.js"></script>
はまた、私は右のlocalhost:3000が参照していることを考えるにしています〜製品DB以下のディレクトリ構造にありますか？私は3000がポート番号であることを認識しています。私のエラーログを見た後、私はlocalhostがアプリのソースフォルダのエイリアスにすぎないと考えていました。
の完全なパスはC：\ユーザー\ myusernameと指定の\ドキュメント\練習\製品のDB ...
はいつものように、ありがとう。 :)
すべてのファイルがページに正しく読み込まれているかどうか確認できますか？ – 31piy
エラーはすべてあなたのスクリプトを見つけていないので、アプリケーションは起動できません。あなたは、あらゆる種類のもの（あなたのcssファイルなど）の要求を見ることができます。インデックス内。html、baseref属性（ヘッダーセクションの先頭にあるはずです）を確認し、そうでなければアプリケーションがそれらのファイル（特にmain.js）をどこに見つけるかを確認してください。 './client/scripts/main.js 'などのようなものを試してみるとどうなるでしょう。 –
これを確認する方法はわかりませんが、' localhost：3000'を呼び出すたびにHTMLが読み込まれます。私は私のJSとCSSのために同じことを言うことができません。 –