Test Our node Server and angularJS

Test Our Server

With all the backend (and a tiny frontend piece) in place, let’s start up our server. Go into your console and type:

$ node server.js

Now in our console we have:

Now we can go into our browser and see http://localhost:8080 in action.

So simple, and yet so beautiful. Now let’s get to the frontend single page AngularJS stuff.

The Frontend AngularJS

With all of our backend work in place, we can focus on the frontend. Our Node backend will send any user that visits our application to our index.html file since we’ve defined that in our catch-all route (app.get('*')).

The frontend work will require a few things:

• Files and libraries brought in by Bower
• Angular application structure (controllers, services)
• We will create 3 different pages (Home, Nerds, Geeks)
• Handle Angular routes using ngRoute so there are no page refreshes
• Make it pretty with Bootstrap

Bower and Pulling in Components

We will need certain files for our application like bootstrap and of course angular. We will tell bower to grab those components for us.

Bower is a great frontend tool to manager your frontend resources. You just specify the packages you need and it will go grab them for you. Here’s an article on getting started with bower.

First we will need Bower installed on our machine. Just type in npm install -g bower into your console.

After you have done that, you will now have access to bower globally on your system. We will need 2 files to get Bower working for us (.bowerrcand bower.json). We’ll place both of these in the root of our document.

.bowerrc will tell Bower where to place our files:

{
    "directory": "public/libs"
}

bower.json is similar to package.json and will tell Bower which packages are needed.

{
    "name": "starter-node-angular",
    "version": "1.0.0",
    "dependencies": {
        "bootstrap": "latest",
        "font-awesome": "latest",
        "animate.css": "latest",
        "angular": "latest",
        "angular-route": "latest"   
    }
}
 

Let’s run it! In your console, in the root of your application, type:

bower install You can see bower pull in all the files we needed and now we have them in public/libs!

Now we can get down to business and work on our Angular stuff.