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

Scenario : Cloud Computing

7 comments
Read more

ASP.NET Core - MVC Setup

Here we will set up the MVC framework in our FirstAppDemo application. We will proceed by building a web application on top of the ASP.NET Core, and more specifically, the ASP.NET Core MVC framework. We can technically build an entire application using only middleware, but ASP.NET Core MVC gives us the features that we can use to easily create HTML pages and HTTP-based APIs. To setup MVC framework in our empty project, follow these steps − Install the  Microsoft.AspNet.Mvc  package, which gives us access to the assemblies and classes provided by the framework. Once the package is installed, we need to register all of the services that ASP.NET MVC requires at runtime. We will do this inside the  ConfigureServices  method. Finally, we need to add middleware for ASP.NET MVC to receive requests. Essentially this piece of middleware takes an HTTP request and tries to direct that request to a C# class that we will write. Step 1  − Let us go to the NuGet package manager by ri
Post a Comment
Read more

SQL Server Tutorial - Date functions

1. Get month names with month numbers: In this query we will learn about  How to get all month names with month number in SQL Server . I have used this query to bind my dropdownlist with month name and month number. 1 2 3 4 5 6 7 8 9 10 11 12 ;WITH months(MonthNumber) AS (      SELECT 0      UNION ALL      SELECT MonthNumber+1      FROM months      WHERE MonthNumber < 12 ) SELECT DATENAME(MONTH,DATEADD(MONTH,-MonthNumber,GETDATE())) AS [MonthName],Datepart(MONTH,DATEADD(MONTH,-MonthNumber,GETDATE())) AS MonthNumber FROM months ORDER BY Datepart(MONTH,DATEADD(MONTH,-MonthNumber,GETDATE())) ; 2. Get name of current month: In this query we will learn about  How to get name of current month in SQL Server . 1 select DATENAME(MONTH, GETDATE()) AS CurrentMonth 3. Get name of day: In this query we will learn about  How to get name of day in SQL Server . 1 select DATENAME(WEEKDAY, GETDATE()) AS TodayI
Post a Comment
Read more