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:

sketch

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

Routing

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">
    <ng-view></ng-view> 
</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) {

    $routeProvider.when('/',
        {
            templateUrl: 'partials/welcome.html',
            controller: 'WelcomeController'
        }).

		when('/admin',
        {
            templateUrl: 'partials/admin.html',
            controller: 'AdminController'
        }).

		when('/member',
        {
            templateUrl: 'partials/member.html',
            controller: 'MemberController'
        }).

		when('/logon',
        {
            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>
    <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
  </form>

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

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">
  <head>
    <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"> -->

    <title>Members</title>

    <!-- 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- 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>
          </button>
          <a class="navbar-brand" href="#">{{title}}</a>
        </div>
        <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>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container theme-showcase">

    <ng-view></ng-view> 


    </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="https://code.jquery.com/jquery-1.10.2.min.js"></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>      
  </body>
</html>

The result is..

hello-member

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. 🙂