Angular JS & Single Page Application Part 1

In this tutorial we going to start an Angular JS Application from scratch. This tutorial is aimed for beginners so we going to start from the very beginning.

If you don’t know what is Angular JS please read my previous tutorial here to learn the basic concept of Angular JS and who should learn it.

We start with the first setup for our project. To do this open a terminal and create a new directory and call it Contacts Project.

>> cd Documents
>> mkdir Contacts Project

Now I’m going to assume that you already have installed Node.js and Bower. These are standard tools in web development now days so I assume you are familiar with these. If not please visit the following website and install both.

https://nodejs.org
www.bower.io

Node allows us to run standard JavaScript on server-side and the node itself is partially written in JavaScript, which makes it really easy to integrate with angular JS.

Installing Node.js will install the npm package manager that is used for backend and server-side packages and libraries.
Bower is a package manager for front-end libraries and utility applications like Angular or Bootstrap that we will use for our application today.

So now cd to contacts folder and lets install necessary packages and libraries for our project. First we are going to install Express JS. Express is a great server-side framework that takes care of most common web application processes such as routing and files handling as well as handling data management.

If you want to learn more about Express JS please check my previous tutorial on Express js here:
how to develop a responsive node JS express website using bootstrap

To install Express enter following into your console window:
>> npm install express
Once that done we can install our front-end packages. We can easily install Angular using bower package manger,
but first lets create a config file for bower in order to tell bower where to install Angular JS files.
Create a file in the main project directory (contacts project folder) and name it .bowerrc
the name is very important and make sure there is no file type at the end of the name.
open the file and add the following into it:

 
{ "directory": "Public/lib/" } 

then we can install our JS libraries as following:
>> bower install Angular
And then install bootstrap:
>> bower install bootstrap

Finally lets create js folder and inside that a js file named app.js :
>> mkdir public/js

Have a look at your project folder. As you can see we have our new node_modules folder which inside that the express js application is installed then for the front end we have public folder then lib folder inside that we have angular and bootstrap which we installed and also the bootstrap required jQuery which gets installed automatically by bower.
Finally we have our js folder that we will use to write our JavaScript files and html files respectively.

Now we are ready to begin writing our code ☺
We are going to start we our server.
In the Main contacts directory create a JS file and name it Server.js.

var express = require("express"),
    app = express()
path = require('path')
router = express.Router();
app.use(express.static(path.join(__dirname, 'public')));
router
    .get('/', function (req, res) {
        var options = {
            root: __dirname + '/public/',
            dotfiles: 'deny',
            headers: {
                'x-timestamp': Date.now(),
                'x-sent': true
            }
        };
        var fileName = "main.html";
        res.sendFile(fileName, options, function (err) {
            if (err) {
                console.log(err);
                res.status(err.status).end();
            } else {
                console.log('Sent:', fileName);
            }
        });
    });
app.use(router)
    .listen(9000);

First a few lines are simply is used to setup out server variables.
Then we use the express.static function to serve any http request with a simple http file “main.html” when is listening to port 9000.

Now create a main.html file inside the public directory then we write the following code in it:

</pre>
<pre><!DOCTYPE html>
<html lang="en" ng-app="contactsApp">
<head>
    <title>Contacts</title>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>Contacts: {{message}}</h1>
        </div>
    </div>
</body>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
</html></pre>
<pre>

Now that we have all js files and Angular js scripts on the page we can write some javascript that uses Angular to send a simple message to the main.html file and render it.

Under the src directory create a file and name it app.js then add the following in it:

</pre>
<pre>angular.module('contactsApp',[])
.run(function($rootScope){
   $rootScope.message = "Hello From Angular"; 
});</pre>
<pre>

That is all we need to run our server for now but soon in part 2 we will be changing the code to serve more dynamic contents.

Now we can go ahead and run the server to test everything works.
First we going to install nodemon package which is used to run a node server but at the same time if we make any changes to the code the server will be automatically reflect the changes without need of restarting the Node server manually.
To install nodemon simply type following into your console window:
>> npm install –g nodemon

Now go ahead and run the server:
>> nodemon server.js

Open your web browser and go to localhost:9000

You should see the main.html file loaded nicely if something goes wrong double check your code.

For the Second part of the tutorial we will create a more complex Angular js app. ☺

You can download the source code for this project from github:

https://github.com/molasaheb/ContactsProject/tree/Part1