\

Part 4 : MEAN APP – Build FrontEnd With AngularJS

Front-end With AngularJS

In this tutorial, we will see how to build Front-end With AngularJS. While this is the last part of building the MEAN application We will be integrating our API’s which we have build earlier. We will setup view and build a form to interact with our API’s.


Check out the Demo on MEAN Stack Application-BookStore .





Download Bookstore MEAN Application.






Starting With Front-end

Front-end Directory View

// Front-End Directure Structure
|---client(folder)
|       |
|       |---index.html // main file
|       |---app.js // angular app
|       |
|       |---views(folder)
|       |          |---add_book.html
|       |          |---book_details.html
|       |          |---books.html    // will be home page
|       |          |---edit_book.html
|       |
|       |---controller(folder)
|       |          |---books.js
|       |
|       |---styles(folder)
|       |          |---style.css
|       |
|       |---bower_components(folder)
|       |                   |---*files /* Files of Angular, UI-Router 
                                              Bootstrap, Jquery  */

 

Implementation

Let’s start with main file i.e index.html As you are smart enough that you can download the required files and to implement in an application. But what we really gonna do is, that we will be using UI-router to view dynamically you can see in one of our tutorial of Routing In AngularJS.

index.html

<html ng-app="myApp"> <!-- MAIN APP -->
<head>
  <title>BookStore</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <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="#/books">Bookstore</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#/books/add">Add Book</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div ng-view>
        </div> <!-- Routing Views -->
      </div>
    </div>
  </div>
  <script src="/bower_components/jquery/dist/jquery.js"></script>
  <script src="/bower_components/angular/angular.js"></script>
  <script src="/bower_components/angular-route/angular-route.js"></script>
  <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="/app.js"></script>
  <script src="/controllers/books.js"></script>
</body>
</html>

After that We wil define routes i.e. building the angular for UI-Routing now create the app.js file and build the routs.

app.js

var myApp = angular.module('myApp',['ngRoute']);
// ROUTES
myApp.config(function($routeProvider){
	$routeProvider.when('/', {
		controller:'BooksController',
		templateUrl: 'views/books.html'
	})
	.when('/books', {
		controller:'BooksController',
		templateUrl: 'views/books.html'
	})
	.when('/books/details/:id',{
		controller:'BooksController',
		templateUrl: 'views/book_details.html'
	})
	.when('/books/add',{
		controller:'BooksController',
		templateUrl: 'views/add_book.html'
	})
	.when('/books/edit/:id',{
		controller:'BooksController',
		templateUrl: 'views/edit_book.html'
	})
	.otherwise({
		redirectTo: '/'
	});
});

Controller

The next thing will be doing is making the controller file to make interaction with the Forms. So

controller/books.js

var myApp = angular.module('myApp');

myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
	console.log('Looking Under The Hood, That's Great! :)');

	$scope.getBooks = function(){ // View All Books
		$http.get('/api/books').success(function(response){
			$scope.books = response;
		});
	}
	$scope.getBook = function(){
		var id = $routeParams.id; // Gets book with perticular :id
		$http.get('/api/books/'+id).success(function(response){
			$scope.book = response; 
		});
	}
	$scope.addBook = function(){ 
		console.log($scope.book); // Add Book API
		$http.post('/api/books/', $scope.book).success(function(response){
			window.location.href='#/books'; // jumps to default page
		});
	}
	$scope.updateBook = function(){
		var id = $routeParams.id;  // Update Book with perticular :id
		$http.put('/api/books/'+id, $scope.book).success(function(response){
			window.location.href='#/books'; // jumps to default page
		});
	}
	$scope.removeBook = function(id){  // Remove the book with perticular :id
		$http.delete('/api/books/'+id).success(function(response){
			window.location.href='#/books'; // jumps to default page
		});
	}
}]);

As you can in the above code we have creted the http request that will bind in the UI-view. for every step i.e insert, update, get, delete created a fincion and each function contain’s the API’s.

Data Binding

After creating the controller, the next thing will be doing is binding our Bookstore API into forms using AngularJS. Data binding led’s to the connection between server and clint side.

views/books.html

<div class="panel panel-default" ng-init="getBooks()"><!-- Get Book function -->
  <div class="panel-heading">
    <h3 class="panel-title">Latest Books</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div ng-repeat="book in books">
        <div class="col-md-6">
          <div class="col-md-6">
            <h4>{{book.title}}</h4> <!-- gets title from database -->
            <p>{{book.description}}</p> <!-- gets description from database -->
            <!-- view single book by perticular :id -->
            <a class="btn btn-primary" href="#/books/details/{{book._id}}">View Details</a>
          </div>
          <div class="col-md-6"><!-- get image_url from database -->
            <img class="thumbnail" src="{{book.image_url}}">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The next page will be making a form for uploading the book details i.e. adding book details into the database.

views/books.html


<form ng-submit="addBook()">
  <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" ng-model="book.title" placeholder="Title">
  </div>
  <div class="form-group">
    <label>Genre</label>
    <select ng-model="book.genre" class="form-control">
      <option value="Web Development">Web Development</option>
      <option value="Eductional">Eductional</option>
      <option value="Other">Other</option>
    </select>
  </div>
  <div class="form-group">
    <label>Author</label>
    <input type="text" class="form-control" ng-model="book.author" placeholder="Author">
  </div>
  <div class="form-group">
    <label>Publisher</label>
    <input type="text" class="form-control" ng-model="book.publisher" placeholder="Publisher">
  </div>
  <div class="form-group">
    <label>Pages</label>
    <input type="text" class="form-control" ng-model="book.pages" placeholder="Pages">
  </div>
  <div class="form-group">
    <label>Description</label>
    <textarea class="form-control" ng-model="book.description" placeholder="Description"></textarea>
  </div>
  <div class="form-group">
    <label>Image URL</label>
    <input type="text" class="form-control" ng-model="book.image_url" placeholder="Image URL">
  </div>
  <div class="form-group">
    <label>Buy URL</label>
    <input type="text" class="form-control" ng-model="book.buy_url" placeholder="Buy URL">
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

Now similarly you can create the additional pages for the application as we have controlled decided for more two thing is delete and update. You can download the code Here !

Run The App

After completing the design all you need to run is Node app And the MongoDB server. so just one command in terminal


 $ node app

After that start the MongoDB Server from the command pad. If you dont know just see the Demo Here

MEAN Stack Series – Links

About This Author

Hi This Is Rehmaanali. Blogging Is Just A Hobby. Graduate In Bsc Computer Science

Post A Reply