Skip to main content

MEAN Stack SPA - What We’ll Be Building


What We’ll Be Building

A lot of the applications we’ve dealt with so far had a specific function, like our Node and Angular To-Do Single Page Application. We are going to step away from that and just a good old getting started application.
This will be very barebones but hopefully it will help you set up your applications. Let’s just call it a starter kit.

APPLICATION REQUIREMENTS

  • Single Page Application
  • Node.js backend with Express and MongoDB
  • AngularJS frontend
  • Modular Angular components (controllers, services)
  • Good application structure so our app can grow


The Backend Node, MongoDB, Express

Three letters out of the MEAN stack will be handled on the backend, our server. We will create our server, configure our application, and handle application routing.

TOOLS REQUIRED

We will need Node and to make our lives easier, we’ll use bower to pull in all our dependencies.


Application Structure

By the end of this tutorial, we will have a basic application structure that will help us develop our Node backend along with our Angular frontend. Here’s what it will look like.


    - app
        ----- models/
        ---------- nerd.js <!-- the nerd model to handle CRUD -->
    ----- routes.js
    - config
        ----- db.js 
    - node_modules <!-- created by npm install -->
    - public <!-- all frontend and angular stuff -->
    ----- css
    ----- js
    ---------- controllers <!-- angular controllers -->
    ---------- services <!-- angular services -->
    ---------- app.js <!-- angular application -->
    ---------- appRoutes.js <!-- angular routes -->
    ----- img
    ----- libs <!-- created by bower install -->
    ----- views 
    ---------- home.html
    ---------- nerd.html
    ---------- geek.html
    ----- index.html
    - .bowerrc <!-- tells bower where to put files (public/libs) -->
    - bower.json <!-- tells bower which files we need -->
    - package.json <!-- tells npm which packages we need -->
    - server.js <!-- set up our node application -->
We’ll be filling in our files into folder structure. All backend work is done in server.js, app, and config while all the frontend is handled in the publicfolder.

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