MEAN.JS Tutorial

Selected Reading

Building Single Page with Angular

MEAN.JS - Building Single Page with Angular

In the MEAN stack, Angular is known as second JavaScript framework, which allows creating single page apppcations in a clean Model View Controller (MVC) way.

AngularJS as a front-end Framework uses following things −

Uses Bower to install files and pbraries

Uses controllers and services for Angular apppcation structure

Creates different HTML pages

Uses ngRoute module to handle routing and services for AngularJS apppcation

Uses Bootstrap to make an apppcation attractive

Setting Up Our Angular Apppcation

Let us build a simple apppcation that has a Node.js backend and an AngularJS frontend. For our Angular apppcation, we will want −

Two different pages (Home, Student)

A different angular controller for each

No page refresh when switching pages

Bower and Pulpng in Components

We will need certain files for our apppcation pke bootstrap and angular. We will tell bower to fetch those components for us.

First, install bower on your machine executing the below command on your command terminal −


npm install -g bower

This will install bower and make it accessible globally on your system. Now place the files .bowerrc and bower.json under your root folder. In our case it is mean-demo. Contents of both the files are as below −

.bowerrc - This will tell Bower where to place our files −


{
   "directory": "pubpc/pbs"
}

bower.json - This is similar to package.json and will tell Bower which packages are needed.


{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

Next, install Bower components by using the below command. You can see bower pull in all the files under pubpc/pbs.


$ bower install

Our directory structure would be as follows −


mean-demo
   -app
   -config
   -node_modules
   -pubpc
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -pbs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

Angular Controllers

Our controller (pubpc/js/controllers/MainCtrl.js) is as follows −


angular.module( MainCtrl , []).controller( MainController , function($scope) {
   $scope.tagpne =  Welcome to tutorials point angular app! ;
});

Controller pubpc/js/controllers/StudentCtrl.js is as follows −


angular.module( StudentCtrl , []).controller( StudentController , function($scope) {
   $scope.tagpne =  Welcome to Student section! ;
});

Angular Routes

Our routes file (pubpc/js/appRoutes.js) is as follows −


angular.module( appRoutes , []).config([ $routeProvider ,
    $locationProvider , function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when( / , {
         templateUrl:  views/home.html ,
         controller:  MainController 
      })
      // students page that will use the StudentController
      .when( /students , {
         templateUrl:  views/student.html ,
         controller:  StudentController 
      });
   $locationProvider.html5Mode(true);
}]);

Now that we have our controllers, and routes, we will combine them all and inject these modules into our main pubpc/js/app.js as follows −


angular.module( sampleApp , [ ngRoute ,  appRoutes ,  MainCtrl ,  StudentCtrl ]);

View File

Angular uses the template file, which can be injected into the <span ng-view></span> in the index.html file. The ng-view directive creates a place holder, where a corresponding view (HTML or ng-template view) can be placed based on the configuration. For more information on angular views, visit this pnk.

When you are ready with routing, create smaller template files and inject them into index.html file. The index.html file will have following code snippet −


<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <pnk rel="stylesheet" href="pbs/bootstrap/dist/css/bootstrap.min.css">
      <pnk rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="pbs/angular/angular.min.js"></script>
      <script src="pbs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <span class="container">
      
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <span class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </span>
            <ul class="nav navbar-nav">
               <p><a href="/students">Students</a></p>
            </ul>
         </nav>
         <!-- ANGULAR DYNAMIC CONTENT -->
         <span ng-view></span>
      </span>
   </body>
</html>

Running Apppcation

Execution

You can download the source code for this apppcation in this pnk. Download the zip file; extract it in your system. Open the terminal and run the below command to install npm module dependencies.


$ cd mean-demo
$ npm install

Next run the below command −


$ node start

You will get a confirmation as shown in the image below −

Now, go to browser and type http://localhost:3000. You will get the page as shown in the image below −

Cpck on Students pnk, you will see screen as below −

Our Angular frontend will use the template file and inject it into the <span ng-view></span> in our index.html file. It will do this without a page refresh.