MEAN Stack Training in Chennai

MEAN Stack Training in chennai.

The MEAN Stack

The term MEAN stack refers to a collection of JavaScript based technologies used to develop web applications. MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Node.js. From client to server to database, MEAN is full stack JavaScript. This article explores the basics of the MEAN stack and shows how to create a simple bucket list application. we provide MEAN Stack Training in chennai.

Introduction

Node.js is a server side JavaScript execution environment. It’s a platform built on Google Chrome’s V8 JavaScript runtime. It helps in building highly scalable and concurrent applications rapidly.

Express is lightweight framework used to build web applications in Node. It provides a number of robust features for building single and multi page web application. Express is inspired by the popular Ruby framework, Sinatra.

MongoDB is a schemaless NoSQL database system. MongoDB saves data in binary JSON format which makes it easier to pass data between client and server. MEAN Stack Training in chennai

AngularJS is a JavaScript framework developed by Google. It provides some awesome features like the two-way data binding. It’s a complete solution for rapid and awesome front end development.

In this article, we’ll be creating a simple CRUD application using the MEAN stack. So, let’s dive in.

Prerequisites

Before getting started, we need to install the various MEAN software packages. Begin by installing Node.js from the download page. Next, install download and install MongoDB. The install MongoDB page contains guides for setting up Mongo on a variety of operating systems. To make things easier, we’ll be starting from a MEAN boilerplate project. Simply clone the boilerplate repo and install the dependencies using npm as shown in the following listing.

git clone http://github.com/linnovate/mean.git
cd mean
npm install

This installs the required packages. Next, we need to set the default port on which MongoDB runs to 27017 as specified in the README file of the boilerplate. Open up the file /etc/mongodb.conf and uncomment the line port = 27017. Now, restart the mongod server as shown below.

mongod --config /etc/mongodb.conf

Next, from the project directory simply type grunt. If all goes well, you will see a message like this:

Express app started on port 3000

Now that the server is running, navigate to http://localhost:3000/ in a browser to see the boilerplate app running.

Boilerplate Overview

We now have a fully functional boilerplate application. It has authentication implemented, including using social media login. We won’t be going much into that, but will be creating our own little app. (MEAN Stack Training Institue Chennai.) If you have a look at the application structure, the public folder contains our AngularJS front end and the server folder contains our NodeJS backend. MEAN Stack Training in chennai

Creating a Listing View

First, let’s start by creating our front end using AngularJS. Navigate to the public folder. Create a new folder called bucketList, where we’ll keep our front end files. Inside the bucketList directory, create subdirectories named controllers, routes, services, and views. Inside the bucketList folder also create a file named bucketList.js containing the following code.

'use strict';

angular.module('mean.bucketList', []);

Next, open mean/public/init.js and add the module mean.bucketList. The modified portion should look like this:

angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.router', 'mean.system', 'mean.articles', 'mean.auth', 'mean.bucketList']);

Now, navigate to public/bucketList/routes and add the bucketList.js route file to handle routing in our app. The code to accomplish this is shown below.

'use strict';

//Setting up route
angular.module('mean.bucketList').config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    // states for my app
    $stateProvider
      .state('all bucket list', {
        url: '/bucketList',
        templateUrl: 'public/bucketList/views/list.html'
      });
  }
]);

Inside public/bucketList/views/ create a file named list.html. This is our view, which will display our bucket list. The contents of this file are shown below.

<section data-ng-controller="BucketListController">
  Welcome to the bucket list collection
</section>

Also create a file named bucketList.js inside public/bucketList/controllers containing the following code.

'use strict';

angular.module('mean.bucketList').controller('BucketListController', ['$scope', '$stateParams', '$location', 'Global',
  function($scope, $stateParams, $location, Global) {
    $scope.global = Global;
  }
]);

Next, start the app using grunt. Make sure that MongoDB is running too if it’s not already. Navigate your browser to http://localhost:3000/#!/bucketList, and you should see the list view that we created. If you are wondering about the #! in the url, it’s just done to separate the AngularJS and NodeJS routing. MEAN Stack Training Institute Chennai

Dataz A unit Of Geoinsyssoft

Article_Source : SitePoint

Leave a Reply


Working Hours

  • Monday9am - 6pm
  • Tuesday9am - 6pm
  • Wednesday9am - 6pm
  • Thursday9am - 6pm
  • Friday9am - 6pm
  • SaturdayClosed
  • SundayClosed
Latest Posts

Big Data training Academy in chennai
data science course in chennai
Wanna attend a demo class?

We are glad that you preferred to schedule a demo class. Please fill our short form and one of our friendly team members will contact you back.


[recaptcha]

X
Demo Class