Kode Kode - 6 months ago 35
Node.js Question

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

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>

Answer

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.