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.

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.

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:

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.

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:

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.

Angular JS App

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