Я на 100% новичок в стеке MEAN и в настоящее время пытаюсь самостоятельно изучить его с помощью этого video by Michael Moser (Если вы читаете это, спасибо за создание такого легко понять видео! :)). Я пытаюсь сделать очень базовую программу с функциями CRUD, но я не могу пройти это конкретное сообщение об ошибке при загрузке файла Angular JS. Может кто-нибудь указать мне в правильном направлении?MEAN stack - Ошибка при загрузке скрипта 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 в нем, хотя.
В любом случае, любая помощь и советы будут оценены. Бог знает, что нужно много его прямо сейчас.
Спасибо.
Update 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: \ Users \ Имя_пользователя \ Documents \ Practice \ Продукт DB ...
Спасибо, как всегда. :)
Выясните, правильно ли загружены все файлы на страницу? – 31piy
Ошибки указывают на то, что ваши сценарии просто не найдены, поэтому приложение не может загрузиться. Вы можете видеть запросы на всевозможные сбои (ваши файлы css и т. Д.). В индексе.html, проверьте атрибут baseref (должен быть первым в разделе заголовка), и в противном случае убедитесь, что приложение знает, где найти эти файлы (особенно main.js). Что произойдет, если вы попробуете что-то вроде «./client/scripts/main.js» и т. Д. –
Я не совсем уверен, как это подтвердить, но HTML загружается всякий раз, когда я вызываю 'localhost: 3000'. Я не могу сказать то же самое для своих JS и CSS. –