MEAN stack - Error while loading AngularJS script

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! :) ). 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. Can somebody point me in the right direction?

Here are my codes:

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

I came from a background where calling JS files was simply declaring the full path in the src. Tbh, I find the entire MEAN setup a bit complex, with the "middleware" concept and all. :( I appreciate MongoDB's role in it, though.

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:

<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? I'm aware that 3000 is the port number; after looking at my error logs, I was thinking that localhost is just an alias for the source folder of the app.

Complete path is C:\users\myusername\documents\Practice\Product DB...

Thank you, as always. :)

Can you confirm if all files are loaded on the page properly? — 31piy
– 31piy, Commented Dec 28, 2016 at 12:19
The errors all point to your scripts just not being found, so the app can't boot up. You can see the requests for all kinds of things failing (your css files, etc). In index.html, check your baseref attribute (should be first one in the header section), and otherwise make sure the app knows where to find those files (especially main.js). What happens if you try something like './client/scripts/main.js', etc. — Tim Consolazio
– Tim Consolazio, Commented Dec 28, 2016 at 12:35
I'm not exactly sure how to confirm that but, the HTML loads whenever I call localhost:3000. I can't say the same for my JS and CSS, though. — Dee J.
– Dee J., Commented Dec 28, 2016 at 12:36
Sure, index.html is found at that address. After that though, index.html pulls in other files. The paths you have set up for those files aren't being found by index.html. They're just not loading. You need to work on how those paths are set up so that index.html can pull them in. — Tim Consolazio
– Tim Consolazio, Commented Dec 28, 2016 at 12:37
Does that mean I don't need to call app.use('/scripts', express.static(__dirname + '/client/scripts'));? @TimConsolazio — Dee J.
– Dee J., Commented Dec 28, 2016 at 12:43

Ravi Shankar Bharti · Accepted Answer · 2016-12-30 15:11:12Z

1

You have included ng-app in the HTML tag, try adding that in the body of the page.

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).

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. 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. It should be src="/scripts/main.js" instead.

One more mistake is while fetching 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.

Try this instead:

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:

Fetch all your files like below:

To get stylesheets :

use /styles/filename

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

This will look into styles folder inside client folder.

To get scripts :

use /scripts/filename

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

This will look into scripts folder inside client folder.

edited Dec 30, 2016 at 15:11

answered Dec 28, 2016 at 13:09

Ravi Shankar Bharti

9,2786 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dee J. Over a year ago

Thank you for your response. I tried it but it didn't work. :(

Dee J. Over a year ago

Thank you for the detailed explanation! Finally managed to make it work. :)

Collectives™ on Stack Overflow

MEAN stack - Error while loading AngularJS script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related