Install Angular.JS, Node.JS, Express and MongoDB with Bootstrap using NPM in under 10 minutes

angularapp7

To setup a base installation of Angular.JS and Node.js with NPM you will first want to install Node.JS and NPM

Next we will launch Command Prompt and initialize a new project. Create a new folder in your project library and navigate to the folder using Command Prompt. Once in the folder, type npm init. This will initialize your project by creating a package.json file and you will be asked to answer a number of configuration related questions. Package.json is also how we will inject our angular, express, mongo, boostrap, etc dependencies shortly.

commandpromptNext we will want to open package.json and include the express, mongodb, angular and boostrap dependencies:

{
  "name": "angular",
  "version": "1.0.0",
  "private": true,
  "description": "Angular Demo",
  "main": "index.js",
  "keywords": [
    "angular",
    "demo"
  ],
  "author": "Trevor Niemi",
  "license": "UNLICENSED",
  "dependencies" : {
    "express"    : "~4.7.2",
    "mongoose"   : "~3.6.2",
    "morgan"     : "~1.2.2",
    "body-parser": "~1.5.2",
    "method-override": "~2.1.2"
  },
  "devDependencies": {
    "angular": "^1.4.8",
    "angular-animate": "^1.4.8",
    "angular-mocks": "^1.4.8",
    "angular-scroll": "^1.0.0",
    "angular-ui-bootstrap": "^0.14.3",
    "angular-ui-router": "^0.2.15",
    "bootstrap": "https://github.com/twbs/bootstrap.git#v4.0.0-alpha"
  }
}

Next we will install our dependencies by running npm install through Command Prompt.

npminstallNext we will create server.js in the same directory as package.json. Server.js tells node what port to run our web application on and is the basis for setting up handlers for http requests and responses.

var express  = require('express');
var app      = express();
var mongoose = require('mongoose');                     // mongodb
var morgan = require('morgan');             // log requests to the console
var bodyParser = require('body-parser');    // pull HTML POST
var methodOverride = require('method-override'); // simulate DELETE and PUT

// configuration =================

app.use(express.static(__dirname + '/public'));                 
app.use(morgan('dev'));                                        
app.use(bodyParser.urlencoded({'extended':'true'}));           
app.use(bodyParser.json());                                     
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); 
app.use(methodOverride());

// listen (start app with node server.js) ======================================
app.listen(8080);
console.log("App listening on port 8080");

app.get('*', function(req, res) {
res.sendfile('./public/index.html'); // load core index.html view, angular will handle the partials
});

Next we will create public/core.js, which is how angular handles routing, loading partial views without refreshing the page and more.

var myAngularApp = angular.module('myAngularApp', ['ngRoute']);

// configure our routes
    myAngularApp.config(function($routeProvider) {
        $routeProvider
            // route for the home page
            .when('/', {
                templateUrl : 'home.html'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'about.html'
            })
    });

Lastly, we will create public/index.html (the HTML wrapper) and the two partials public/home.html and public/about.html

index.html – It’s important to note where ng-view is being assigned. ng-view is the variable that tells angular where to load the partial views.

<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="myAngularApp">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

    <title>Angular Example</title>

    <!-- CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
	
    <!-- SCRIPTS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script><!-- load angular -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
    <script src="core.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body>
 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">My Angular Website</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container" ng-view>

      </div>
    </div>

    <div class="container">

      <hr>

      <footer>
        <p>&copy; 2015 Company, Inc.</p>
      </footer>
    </div> <!-- /container -->

</body>
</html>

home.html

<h1><span style="color: #cc0000;">Homepage</span> Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#about" role="button">About &raquo;</a></p>

about.html

<h1><span style="color: #cc0000;">About</span> Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#/" role="button">Back To Home &raquo;</a></p>

Finally, we will test our application by running npm start in Command Prompt and loading localhost:8080 in your web browser:

npmstartThe final result:

angularapp7

Categories AngularJS, Bootstrap, ExpressJS, MongoDB, Node.js, NPM

Leave a Reply