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

Question

I'm 100% new to MEAN stack and currently trying to self-study it with the help of this video by Michael Moser (If you're reading this, thank you for making such an easy-to-understand video! :) ). 我是MEAN Stack的100％陌生人，目前正尝试在Michael Moser的这段视频的帮助下自学（如果您正在阅读本文，感谢您制作了这样一个易于理解的视频！:)）。 I'm trying to make a very basic program with CRUD functionalities, but I can't get past this particular error message when loading the Angular JS file. 我正在尝试制作一个具有CRUD功能的非常基本的程序，但在加载Angular JS文件时却无法克服此特定错误消息。 Can somebody point me in the right direction? 有人可以指出我正确的方向吗？

Here are my codes: 这是我的代码：

package.json 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 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

<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 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
    }
}]);

I came from a background where calling JS files was simply declaring the full path in the src . 我来自一个背景，其中调用JS文件只是在src声明了完整路径。 Tbh, I find the entire MEAN setup a bit complex, with the "middleware" concept and all. TBH，我发现整个MEAN设置有点复杂，包含“中间件”概念和所有其他内容。 :( I appreciate MongoDB's role in it, though. :(不过，我感谢MongoDB在其中的作用。

Anyways, any help and advice would be greatly appreciated. 无论如何，我们将不胜感激任何帮助和建议。 God knows I need a lot of it right now. 上帝知道我现在需要很多。

Thank you. 谢谢。

Update 1: I tried changing how my <script> tag calls my angular like so, with no success: 更新1：我尝试更改<script>标记这样调用我的角度的方式，但没有成功：

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

Also, am I right in thinking that localhost:3000 refers to Product DB in the following directory structure? 另外，我是否认为localhost:3000在以下目录结构中引用Product DB是正确的吗？ I'm aware that 3000 is the port number; 我知道端口号是3000 ； after looking at my error logs, I was thinking that localhost is just an alias for the source folder of the app. 查看我的错误日志后，我以为localhost只是应用程序源文件夹的别名。

Complete path is C:\\users\\myusername\\documents\\Practice\\Product DB... 完整路径为C：\\ users \\ myusername \\ documents \\ Practice \\ Product DB ...

Thank you, as always. 一如既往的谢谢。 :) :)

Answer 1

You have included ng-app in the HTML tag, try adding that in the body of the page. 您已将ng-app包含在HTML标记中，请尝试将其添加到页面body中。

Do this: 做这个：

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

Update: 更新：

you have done few mistakes while fetching stylesheets and scripts both. 在同时获取样式表和脚本时，您犯了一些错误。 You need to define a proper static route which will work for all the static files(stylesheets and scripts) . 您需要定义一条适用于所有static files(stylesheets and scripts)的适当静态路由 。

you had defined yous static routed like this: 您已经定义了静态路由，如下所示：

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

This will tell the node app to look into client/scripts folder, if any static route starts with /scripts . 如果任何static路由以/scripts开头，这将告诉节点应用程序查看client/scripts文件夹。 But you are trying to fetch your script using src="/client/scripts/main.js" which will not get anything, as /client is not defined , nor default '/' route is defined. 但是您正尝试使用src="/client/scripts/main.js"来获取script ，因为未定义/client ，也未定义默认的'/'路由，因此无法获取任何内容。 It should be src="/scripts/main.js" instead. 应该改为src="/scripts/main.js" 。

One more mistake is while fetching stylesheets . 还有一个错误是在获取stylesheets 。 you are using href="/styles/main.css" , where again neither /styles nor / is defined, thus it will not be able to get the css file. 您正在使用href="/styles/main.css" ，在该位置上也没有定义/styles或/ ，因此将无法获取css文件。

Try this instead: 尝试以下方法：

Server.js 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: HTML：

Fetch all your files like below: 如下获取所有文件：

To get stylesheets : 要获取样式表：

use /styles/filename 使用/styles/filename

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

This will look into styles folder inside client folder. 这将调查client文件夹内的styles文件夹。

To get scripts : 要获取脚本：

use /scripts/filename 使用/scripts/filename

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

This will look into scripts folder inside client folder. 这将调查client文件夹内的scripts文件夹。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-12-28 13:09:55

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-12-28 13:09:55

解决方案1
1 已采纳 2016-12-28 13:09:55