MEAN stack: angular is not defined

Question

I have been searching for answer to my problem for two full days now without results. I know there are a lot of threads about "angular is not defined", but their answers have been of no avail. The starting point is that I have deployed MEAN stack for a SPA on DigitalOcean. There is also grunt in use. The app has been running successfully right until grunt tries to run the server.js file which has angular.module(... call.

The folder structure is following:

node_modules

bunch of modules like there should be

public

lib

angular, angular-resource, jquery etc folders

routes

index.js

src

views

index.html, index.jade, layout.jade

bower.json

gruntfile.js

karma.conf.js

package.json

server.js

bower.json

{
  "name": "meanjs",
  "version": "0.3.2",
  "description": "Fullstack JavaScript with MongoDB, Express, AngularJS, and Node.js.",
  "dependencies": {
    "bootstrap": "~3",
    "angular": "~1.3.0",
    "angular-resource": "1.3.0",
    "angular-animate": "~1.3.0",
    "angular-mocks": "~1.3.0",
    "angular-bootstrap": "~0.11.0",
    "angular-ui-utils": "~0.1.1",
    "angular-ui-router": "~0.2.10"
  }
}

server.js

'use strict';
var cheerio = require('cheerio'),
http = require('http'),
iconv = require('iconv-lite'),
request = require('request'),
mongoose = require('mongoose'),
iconv = require('iconv-lite');

angular.module('myapp', []);
var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public'));
app.set('view engine', 'jade');
app.get('/', function (req, res) {
        res.sendfile('./views/index.html');

});
app.listen(80);

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="/opt/mean/server.js"></script>
         <meta charset="UTF-8">
         <title>Myapptitle</title>
</head>
<body>
        <div id="app">
            <p>Hallelujah, server is running!</p>
        </div>
</body>
</html>

I have been moving all parts related to the .js files around the index.html file and so on. The main point of the app is just to have the server.js running and having several different .js file based angular modules that handle JSON files for server.js. I just don't have any clues left what to try, please give me some advice. I will gladly supply you with more code files if necessary.

score 2 · Accepted Answer · answered Oct 31 '14 at 23:46

server.js is a Node/Express application and should not contain Angular code. Generally, you'll have a public/ folder for Angular applications and angular.module would generally be called first in public/app.js

For a really good example of the setup, see http://meanjs.org - Use MEAN.JS to scaffold an example structure real quick and look at both /server.js and public/app.js for usage examples.

Lastly, in your HTML file, you would not include the server.js file but instead would include your app.js. Try to remember that server.js is for server-side Node/Express and is independent of your front-side code.

Thank you kind sir, I had understood this concept partly wrong and not caught attention on the front-end aspect. Now my solution works as intended. — bmes, Nov 01 '14 at 23:35

MEAN stack: angular is not defined

1 Answers1