MEAN 堆栈 - 加载 AngularJS 脚本时出错

Question

我 100% 是 MEAN 堆栈的新手，目前正在尝试借助 Michael Moser video 的帮助自学它（如果您正在阅读这篇文章，感谢您提供了如此简单的方法-理解视频！:)）。我正在尝试制作一个具有 CRUD 功能的非常基本的程序，但是在加载 Angular JS 文件时我无法通过这个特定的错误消息。有人能给我指出正确的方向吗？

这是我的代码：

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 中声明完整路径。老实说，我发现整个 MEAN 设置有点复杂，有 "middleware" 概念等等。 :( 不过，我很欣赏 MongoDB 在其中扮演的角色。

无论如何，我们将不胜感激任何帮助和建议。天知道我现在需要很多。

谢谢。

更新 1： 我试着改变我的 <script> 标签调用我的 angular 的方式，但没有成功：

<script type="text/javascript" src="C:/users/myusername/documents/practice/product db/client/scripts/main.js"></script>

此外，我认为 localhost:3000 是指以下目录结构中的 Product DB 是否正确？我知道 3000 是端口号；查看我的错误日志后，我认为 localhost 只是应用程序源文件夹的别名。

完整路径是 C:\users\myusername\documents\Practice\Product DB...

谢谢你，一如既往。 :)

Answer 1

您已将 ng-app 包含在 HTML 标记中，请尝试将其添加到页面的 body 中。

这样做：

<body class="main-background" ng-app="ProductApp" ng-controller="MainController">

更新：

你在同时获取 stylesheets 和 scripts 时犯了一些错误。您需要定义一个适用于所有 static files(stylesheets and scripts).

的适当 静态路由

你已经这样定义了你的静态路由：

app.use('/scripts', express.static(__dirname + '/client/scripts'));

如果任何 static 路由以 /scripts 开头，这将告诉节点应用程序查看 client/scripts 文件夹。但是您正在尝试使用 src="/client/scripts/main.js" 获取您的 script ，这不会得到任何东西，因为 /client 未定义，也未定义默认的 '/' 路由。它应该是 src="/scripts/main.js" 而不是。

另一个错误是在获取 stylesheets 时。您正在使用 href="/styles/main.css"，其中既没有定义 /styles 也没有定义 /，因此它将无法获取 css 文件。

试试这个：

Server.js

//define static routes like this
app.use(express.static(__dirname + '/client'));
// this will tell node app to look into the client folder, for any static file

HTML:

如下所示获取所有文件：

获取样式表：

使用/styles/filename

<link href="/styles/main.css" rel="stylesheet" type="text/css">

这将查看 client 文件夹内的 styles 文件夹。

获取脚本：

使用/scripts/filename

<script type="text/javascript" src="/scripts/main.js"></script>

这将查看 client 文件夹内的 scripts 文件夹。

MEAN 堆栈 - 加载 AngularJS 脚本时出错

MEAN stack - Error while loading AngularJS script

javascript

mean-stack