Nodejs and the MEAN stack for the .NET developer part 4

This is part 4 of my exploration of the MEAN stack. You can find part 3 here.

This is the outline of the app we are going to create:


We need at least 5 pages to start with:

  • index.html (this will be our layout master
  • welcome.html
  • admin.html
  • signup.html
  • member.html


To be able to use routing in Angular, which we’ll need for a Single Page App (SPA), you need to install angular-route.

bower install angular-route

Step 0: create the layout master

Grab a Boostrap theme and copy the source to /public/index.html
Delete everything from line 68 until somewhere around 373.
Now you have an emtpy container div.
Add the ng-view directive into the empty container div. This is the same as @RenderBody in Razor.

<div class="container theme-showcase">
</div> <!-- /container -->

Now we’ll add some routing functionality in app.js.

Step 1: declare the Angular module and inject ngRoute:

var rap = angular.module('reMember-App', ['ngRoute']);

Step 2: add the routing configuration with $routeProvider in app.js

The code is self explanatory, I think.
When browsing to the root (‘/’), a page welcome.html is inserted to the layout master (index.html).
The controller that is used is the WelcomeController and so on:

var rap = angular.module('reMember-App', ['ngRoute']);

rap.config(function ($routeProvider) {

            templateUrl: 'partials/welcome.html',
            controller: 'WelcomeController'

            templateUrl: 'partials/admin.html',
            controller: 'AdminController'

            templateUrl: 'partials/member.html',
            controller: 'MemberController'

            templateUrl: 'partials/logon.html',
            controller: 'LogonController'

        otherwise( { redirecTo: '/'})


step 3: create a folder partials and create the 4 html pages

Here is the welcome.html:

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <h1>Hello, member of the {{clubname}} !</h1>
  <p>Glad to have you with us as a member of the awesome {{clubname}}.<br>
  Please sign in to edit your personal details, or sign up as a new member!</p>

  <form class="form-inline spacer" role="form">
    <div class="form-group">
      <label class="sr-only" for="exampleInputEmail2">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    <div class="checkbox">
        <input type="checkbox"> Remember me
    <button type="submit" class="btn btn-default">Sign in</button>

  <p class="spacer">Not a member yet?</p>
  <p><a href="#/logon" class="btn btn-success" role="button">Sign up! &raquo;</a></p>

step 4: add the controllers in app.js:

rap.controller('NavController', function ($scope,$http) {
     $scope.title = "MEAN Member Application";


rap.controller('WelcomeController', function ($scope,$http) {
        $scope.clubname = "Knitting Association";

rap.controller('AdminController', function ($scope,$http) {
    // $http.get('http://localhost:3000/members').success(function(data) { $scope.members = data; });

rap.controller('MemberController', function ($scope,$http) {

rap.controller('LogonController', function ($scope,$http) {

step 5: the app to the index.html

This is the complete index.html:

<!DOCTYPE html>
<html lang="en" ng-app="reMember-App">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
  <!--  <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> -->


    <!-- Bootstrap core CSS -->
    <link href="./javascripts/vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="./javascripts/vendor/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/theme.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src=""></script>
      <script src=""></script>


    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="NavController">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <a class="navbar-brand" href="#">{{title}}</a>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#admin">Admin</a></li>
            <li><a href="#member">Member</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
        </div><!--/.nav-collapse -->

    <div class="container theme-showcase">


    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../javascripts/holder.js"></script>
    <script src=""></script>
    <script src="./javascripts/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./javascripts/vendor/angular/angular.min.js"></script>      
    <script src="./javascripts/vendor/angular-route/angular-route.js"></script>                                    
    <script src="./javascripts/app.js"></script>      

The result is..


Again it seems I’m able to replace .NET for JavaScript.
This is good because now I can code on cheap and old laptops, since I do not need to install Visual Studio in it. 🙂

2 Replies to “Nodejs and the MEAN stack for the .NET developer part 4”

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

%d bloggers liken dit: