Getting Started with MEAN Stack

1
(No Transcript)
2
Getting Started with MEAN Stack

• Node.js has one of the biggest tech communities
  behind it and as a result it also has a colossal
  amount of toolset to choose from for whatever
  project you are working on.
• Small tools are great but what happens when you
  are building a large scale web application and
  you plan to maintain it for a long time?

3
Getting Started with MEAN Stack

• MEAN stack comes to the rescue. 
• MEAN stands for MongoDB, Express.js, Angular.js, N
  ode.js.
• You see, all these are small tools that people
  have already built and if you put them together
  you get an amazingly productive and
  scalable fullstack framework to build your
  node.js application.

4
Getting Started with MEAN Stack

• Choosing The Right Tool
• Now that you know what the MEAN really is, you
  can just go ahead and build your own stack using
  the underlying tools.
• But do not forget that having a community as big
  as the Node.js community, there is always a small
  chance that whatever you are building, there is
  probably the same or at least a similar tool
  already built by someone else.
• So, a rule of thumb, when working on a Node.js
  based project, is to look it up on npm (the
  Node.js dependency/project manager) first.
• If you search for mean on npm you will find a lot
  of boilerplates that you can choose from.
• I personally prefer meanjs since it has some
  really awesome maintainers and comes packaged
  with a lot of cool features out of the box. You
  can read more about it on their official website.

5
Getting Started with MEAN Stack

• Getting Started
• You need to have some tools installed prior to
  diving into writing code. You need to have
• Node.js and npm installed.
• MongoDB installed.
• Bower installed for managing our frontend
  libraries.
• Grunt installed as our build tool.
• Once you have everything, fire up a terminal
  window and run the following command to clone the
  repository using git. Then cd into the directory.
• git clone https//github.com/meanjs/mean.git
  meanjs cd meanjs
• Now we have to install all the dependencies using
  npm.
• npm install
• That is it, youre ready to go. Now simply run 
  grunt before you open up a browser and navigate
  to http//localhost3000. On that webpage, you
  can play around the sample articles feature.

6
Getting Started with MEAN Stack

• A Closer Look
• Now that we have our stack ready and our
  application running, we are ready to dive into
  the code.
• The folder structure is pretty intuitive. We
  have app/ directory where all our backend code
  reside and public/ for all our frontend code. 
• config/ is where all our applications
  configuration and environment based settings go
  and tests/ is for the test files.
• Mean.js follows a very modular architecture.
• It treats each feature as a module and each
  module has its backend and frontend components.
• Take a look at the codes inside, it has a built
  in module for user management and articles that
  you can follow if you need a sample. In the
  backend, you get controller, model, view and
  routes for the article module. In the frontend
  you have controller, service and view. Of course,
  all the components come with built-in tests.

7
Getting Started with MEAN Stack

• Scaffolding
• One of the most handy features of mean.js is its
  command line generator tool.
• It is built on yeoman and packed with very useful
  commands that will help you quickly scaffold a
  base for your modules/features.
• To use it, we need yeoman and the
  meanjs-generator installed.
• If you are on your development machine, I suggest
  installing it globally so that you can take
  advantage of it for every project. Run the
  following commands
• npm install -g yo npm install -g
  generator-meanjs
• Note You might need sudo to install packages
  globally

8
Getting Started with MEAN Stack

• Run the following command to create a new module
  for posting small statuses.
• yo meanjscrud-module status
• You will be asked a few questions.
• First, if you want css, directives etc. with the
  frontend component. For this quick demo, we do
  not need any of those so just press enter.
• Second, if you want this module to be added in
  the top menu bar, write Y and press enter.
• Third, what should the name on the menu be?
  Simply name it Status and press enter.
• Now you should see an output similar to the
  following

9
Getting Started with MEAN Stack

• create app/controllers/statuses.server.controller
  .js create app/models/status.server.model.js
  create app/routes/statuses.server.routes.js
  create app/tests/status.server.model.test.js
  create public/modules/statuses/config/statuses.c
  lient.routes.js create public/modules/statuses/c
  ontrollers/statuses.client.controller.js create
  public/modules/statuses/services/statuses.client.s
  ervice.js create public/modules/statuses/tests/s
  tatuses.client.controller.test.js create
  public/modules/statuses/views/create-status.client
  .view.html create public/modules/statuses/views/
  edit-status.client.view.html create
  public/modules/statuses/views/list-statuses.client
  .view.html create public/modules/statuses/views/
  view-status.client.view.html create
  public/modules/statuses/statuses.client.module.js
• That is it, you can now visit http//localhost300
  0/!/statuses and create, update and delete
  statuses. It is that simple.

10
Getting Started with MEAN Stack

• You may not always need to create a full fledged
  crud module for every feature and MEAN.js has
  that covered too.
• You can just scaffold a standalone backend
  controller or a frontend angular service using
  the generator.
• //create a backend controller yo
  meanjsexpress-controller ltcontroller-namegt
  //create an angular.js service yo
  meanjsangular-service ltservice-namegt

11
Getting Started with MEAN Stack

• Whats Next?
• I bet you are already impressed with the
  productivity of MEAN.js and I encourage you to
  take a look at their official documentation to
  find out more about it is strengths.
• Make something small at first, an issue tracker
  or a bookmark manager.
• You will learn many things on your way.
• We will also be covering more ground on this
  topic so check back soon.