NodeJS express js with angular js Sample code
Creating our project
We're good to go so, we run, again from console:
mkdir our_project
cd our_projectNow we're in the place where our code will live. To create the main archive of our project you can run
Ok, but how we create the express skeleton project?
It's simple:
npm install -g express express-generatorLinux distros and Mac should use sudo to install this because they're installed in the nodejs directory which is only accessible by the root user. If everything went fine we can, finally, create the express-app skeleton, just run
expressThis command will create inside our folder an express example app. The structure is as follow:
bin/
public/
routes/
views/
app.js
package.jsonNow if we run npm start an go to http://localhost:3000 we'll see the express app up and running, fair enough we've generated an express app without too much trouble, but how can we mix this with AngularJS?.
How express works, briefly?
Express is a framework built on top of Nodejs, you can see the official documentation at the Express Site. But for our purpose we need to know that Express is the responsible when we type, for example, http://localhost:3000/home of rendering the home page of our application. From the recently created app created we can check:
FILE: routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;What this code is telling us is that when the user goes to http://localhost:3000 it must render the index view and pass a JSON with a title property and value Express. But when we check the views directory and open index.jade we can see this:
extends layout
block content
h1= title
p Welcome to #{title}This is another powerful Express feature, template engines, they allow you to render content in the page by passing variables to it or inherit another template so your pages are more compact and better understandable by others. The file extension is .jade as far as I know Jade changed the name for Pug, basically is the same template engine but with some updates and core modifications.