th (1)

AngularJS in Node.js and ExpressJS Framework


By: Ujwala Patil | June 12, 2015

Introduction

ExpressJS is a light-weight web application framework to help organize your web application into an MVC architecture on the server side. You can use a variety of choices for your templating language (like EJS, Jade, and Dust.js,Html).You can then use a database like MongoDB with Mongoose (for modeling) to provide a backend for your Node.js application.

Express.js basically helps you manage everything, from routes, to handling requests and views.

How to configure AngularJS?

Solution:

angular.module(‘myapp’,[‘ngRoute’,’myapp.sampleController’])
.config(function ($routeProvider, $locationProvider) {
  $routeProvider.
    when('/', {
      templateUrl: '/Home',
      controller: 'HomeController'
    }).
    when('/Sample, {
      templateUrl: '/Sample',
    controller: 'SampleController''
    });
  $locationProvider.html5Mode(true);
});

$routeProvider: which is the provider of the $route service.This service makes it easy to wire together controllers,view templates ,and the current URL location in the browser.

$locationProvider: allows access to .html5mode(), a piece of Angular magic that ensures URLs look like regular URLs in modern browsers.

Standard configuration from the Angular perspective thus far.Angular controller is also super basic just stubbed out for later use:

  angular.module('myApp.controllers', []).
  controller('HomeController', function ($scope) {
   });

How to configure Node.js in ExpressJS?

Solution:

var express = require('express');
var routes  = require('./routes');
var http    = require('http');
var path    = require('path');

var app = module.exports = express();

app.engine('html', require('ejs').renderFile);
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.use(express.logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
 
if (app.get('env') === 'development') {
  app.use(express.errorHandler());
}

Note: app.use(express.static(path.join(__dirname, ‘public’)));

comes before this line  app.use(app.router);

Since order matters, we need Node.js to serve the static page request before passing the request to a route handler.

Connectivity between AngularJs and Node.js.

angular.get('/',routes.index);
angular.get('*',routes.index);

From above snippets, note the references to routes.index. They point to index.js, the JS file containing the specific routing information,will route all traffic to the index page.

index.js

exports.index = function(req, res){
  res.sendfile('.views/index.html');
};

And,finally Node.js Server

http.createServer(app).listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
});

Entire Node.js Configuration file.

/*********************
 * Module dependencies
 *********************/
 
var express = require('express'),
    routes  = require('./routes'),
    http    = require('http'),
    path    = require('path');
 
var app = module.exports = express();
 
app.engine('html', require('ejs').renderFile);
 
/***************
 * Configuration
 ***************/
 
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.use(express.logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
 
// development only
if (app.get('env') === 'development') {
  app.use(express.errorHandler());
}
 
/********
 * Routes
 ********/
 
// serve index and view partials
app.get('/', routes.index);
// redirect all others to the index (HTML5 history)
app.get('*', routes.index);
 
/**************
 * Start Server
 **************/
 
http.createServer(app).listen(app.get('port'), function () {
  console.log('Server listening on port ' + app.get('port'));
});

 

 

 

 

 

 

 

This post has been viewed 15,065 times

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>