Node.js "angular is not defined" - server.js issue?

Question

I am trying to use AngularJS with Node, as I will need to use Express for a prerender down the line. I had my Angular site working via the Angluar scripts, etc. and am new to Node. I have included Angular as a dependency in Node. I ported over my routing code into server.js from my app.js file, but am getting an error stating "angular is not defined". In simple terms, how do I setup Angular to work with Node. I am guessing that it is not loading the index.html file that has the scripts and these need to be included in another manner, such as dependencies.

Here is my server.js after I ported over the app.js code:

var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'angularUtils.directives.dirPagination',
'pfcServices',
'pfcAddArticle',
'pfcArticleID',
'pfcArticlesCategory',
'pfcArticlesCount',
'pfcArticleVoting',
'pfcHomeArticles',
'pfcLoginManagement',
'pfcModalDependency',
'pfcDirectives']);

pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
'paginationTemplateProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
    $routeProvider.
        when('/home', { templateUrl: '/views/home.html', controller: 'pfcHomeArticlesCtrl' }).
        when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: '/views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
        when('/article/:articleTitle/:articleID', { templateUrl: '/views/article.html', controller: 'pfcArticleIDCtrl' }).
        when('/add-article', { templateUrl: '/views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
        when('/login', { templateUrl: '/views/login.html', controller: 'loginPageCtrl' }).
        otherwise({ redirectTo: '/home' });
    $httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111';
    $httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
    authProvider.init({
        domain: 'passthru.auth0.com',
        clientID: '1111111111111',
        callbackURL: location.href,
        loginUrl: '/login'
    });
    $locationProvider
  .html5Mode(true);

    jwtInterceptorProvider.tokenGetter = function (store) {
        return store.get('token');
    }

    $httpProvider.interceptors.push('jwtInterceptor');

    // Pagination provider
    paginationTemplateProvider.setPath('js/libs/dirPagination.tpl.html');


}])

.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
    if (!auth.isAuthenticated) {
        var token = store.get('token');
        if (token) {
            if (!jwtHelper.isTokenExpired(token)) {
                auth.authenticate(store.get('profile'), token);
            } else {
                $location.path('/login');
            }
        }
    }

});
});

Here are the scripts in my index.html file:

<!-- Using Async and Defer for script execution -->
<script src="js/libs/angular.min.js" defer></script>
<script src="js/libs/ui-bootstrap-tpls-0.12.0.min.js" defer></script>
<script src="js/libs/angular-route.min.js" defer></script>
<script src="js/libs/angular-resource.min.js" defer></script>
<script src="js/libs/dirPagination.js" defer></script>

<!-- Auth0 Scripts -->
<!-- We use client cookies to save the user credentials -->
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js" defer></script>
<!-- Auth0 Lock script and AngularJS module -->
<script src="//cdn.auth0.com/js/lock-6.js" defer></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//rawgit.com/auth0/angular-storage/master/dist/angular-storage.js" defer></script>
<script type="text/javascript" src="//rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js" defer></script>
<!-- Auth0 Scripts -->
<script src="//cdn.auth0.com/w2/auth0-angular-4.0.1.js" defer> </script>

<!-- Application Scripts -->
<script src="js/services/services.js" defer></script>
<script src="js/controllers/addArticle.js" defer></script>
<script src="js/controllers/articleID.js" defer></script>
<script src="js/controllers/articlesCategory.js" defer></script>
<script src="js/controllers/articlesCount.js" defer></script>
<script src="js/controllers/articleVoting.js" defer></script>
<script src="js/controllers/homeArticles.js" defer></script>
<script src="js/controllers/loginManagement.js" defer></script>
<script src="js/controllers/modalDependency.js" defer></script>
<script src="js/directives/directives.js" defer></script>
<script src="server.js" defer></script>

I'm confused by this. Angular is a client technology, Node is a server technology. Why would Node need a dependency to Angular, and why would you try to load Angular on the server? — Claies
– Claies, Commented May 2, 2015 at 0:24
I need to use Express for the prerender, and Express.js requires Node.JS so that is why I looked at Angular on top of Node. It is usually referenced as part of the MEAN stack, so I thought it would layer on. You can also use Node in Azure for running a Website. — Kode
– Kode, Commented May 2, 2015 at 0:29
It is part of the MEAN stack, but it's the Client component. It's not meant to be run inside node, it's meant to be run inside the browser. — Claies
– Claies, Commented May 2, 2015 at 0:31
so I guess we come back around to, what is it that you expect Angular to be doing? — Claies
– Claies, Commented May 2, 2015 at 0:33
Angular doesn't run on node. node is a server, angular is a client script, that can be deployed to the browser from node the same way you would deploy any other javascript or html file. Express is a plugin that allows you to more easily perform this deployment task. angular doesn't care if the server is node, and node doesn't care that the webpage is using angular. — Claies
– Claies, Commented May 2, 2015 at 0:40

Claies · Accepted Answer · 2015-05-02 01:13:00Z

1

You have a misunderstanding of the interaction between Angular and Node here. Angular is simply a JavaScript file that gets deployed to the browser, it does not directly interact with Node or Express.

Using Node, you will most likely have something like the following in your server.js:

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

This will configure the express engine to serve the files in the various directories as static resources, and allow it to serve the index.html for any routes which are not the static files or not defined by express using app.get, app.post, etc.

answered May 2, 2015 at 1:13

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

2 Comments

Kode Over a year ago

This is extremely helpful. Thank you for clearing up my misunderstanding of how to leverage Node. I knew it was more server-side javascript/VM type behavior with the Chrome V8 engine, but now I see the different abstraction layers. Off to learn more!

Claies Over a year ago

The main confusion can come in the fact that there are actually 2 different routing engines in place. The angular routing engine uses HTML5 Push State to avoid a server call. The express routing engine handles calls that manage to hit the server, and just returns the index.html to "re-bootstrap" angular.

Collectives™ on Stack Overflow

Node.js "angular is not defined" - server.js issue?

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