Skip to main content

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:
node-server-startNow we can go into our browser and see http://localhost:8080 in action.
node-server-helloSo 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.

Comments

Post a Comment

Popular posts from this blog

ASP.NET Core - Create New Project

You can start building a new ASP.NET Core Application from the  File → New Project  menu option. On the New Project dialog box, you will see the following three different templates for Web projects − ASP.NET Web Application  − The simple ASP.NET application templates . ASP.NET Core Web Application (.NET Core)  − This will start you with a crossplatform compatible project that runs on the .NET Core framework. ASP.NET Core Web Application (.NET Framework)  − This starts a new project that runs on the standard .NET Framework on Windows. In the left pane, select  Templates → Visual C# → Web  and in the middle pane select the ASP.NET Core Web Application (.NET Core) template. Let us call this application  FirstAppDemo  and also specify the Location for your ASP.NET Core project and then Click OK. In the above dialog box, you can select a specific template for the ASP.NET application from the available ASP.NET Core Templates. ...
Post a Comment
Read more

ASP.NET Core - Attribute Routes

Learn another approach to routing and that is attribute-based routing. With attribute-based routing, we can use C# attributes on our controller classes and on the methods internally in these classes. These attributes have metadata that tell ASP.NET Core when to call a specific controller. It is an alternative to convention-based routing. Routes are evaluated in the order that they appear, the order that you register them in, but it's quite common to map multiple routes particularly if you want to have different parameters in the URL or if you want to have different literals in the URL. Example Let us take a simple example. Open the  FirstAppDemo  project and run the application in the browser. When you specify  /about , it will produce the following output − What we want here is that when we specify  /about , the application should invoke the Phone action of the AboutController. Here, we can enforce some explicit routes for this controller using a Ro...
Post a Comment
Read more

Features of Node.js

Following are some of the important features that make Node.js the first choice of software architects. Asynchronous and Event Driven  − All APIs of Node.js library are asynchronous, that is, non-blocking. It essentially means a Node.js based server never waits for an API to return data. The server moves to the next API after calling it and a notification mechanism of Events of Node.js helps the server to get a response from the previous API call. Very Fast  − Being built on Google Chrome's V8 JavaScript Engine, Node.js library is very fast in code execution. Single Threaded but Highly Scalable  − Node.js uses a single threaded model with event looping. Event mechanism helps the server to respond in a non-blocking way and makes the server highly scalable as opposed to traditional servers which create limited threads to handle requests. Node.js uses a single threaded program and the same program can provide service to a much larger number of requests than t...
Post a Comment
Read more