filinamaria/mean-todo-tutorial

Tutorial pembuatan todo web app menggunakan MEAN (Mongo DB, ExpressJS, AngularJS, NodeJS) Stack.

MEAN Todo Tutorial

Tutorial pembuatan todo web app menggunakan MEAN (Mongo DB, ExpressJS, AngularJS, NodeJS) Stack.

Instalasi

MEAN.IO

Prerequisites

• Node.js - Download and Install Node.js. You can also follow this gist for a quick and easy way to install Node.js and npm
• MongoDB - Download and Install MongoDB - Make sure mongod is running on the default port (27017).

Tools Prerequisites

• NPM - Node.js package manage; should be installed when you install node.js.
• Bower - Web package manager. Installing Bower is simple when you have npm:

$ npm install -g bower

Optional

• Grunt - Download and Install Grunt.

$ npm install -g grunt-cli

Additional Packages

• Express - Defined as npm module in the package.json file.
• Mongoose - Defined as npm module in the package.json file.
• Passport - Defined as npm module in the package.json file.
• AngularJS - Defined as bower module in the bower.json file.
• Twitter Bootstrap - Defined as bower module in the bower.json file.
• UI Bootstrap - Defined as bower module in the bower.json file.

Step 01 - Quick Install

The quickest way to get started with MEAN is to install the meanio package from NPM.

Install MEAN CLI:

$ [sudo] npm install -g meanio@latest
$ mean init todoApp
$ cd todoApp && npm install

We recommend using Grunt to start the server:

$ grunt

If grunt aborts because of JSHINT errors, these can be overridden with the force flag:

$ grunt -f

Alternatively, when not using grunt you can run:

$ node server

Then, open a browser and go to:

http://localhost:3000

Step 02 - Generate Package Todo

Do following command in your terminal

mean package todos

You will get the following custom packages

    |_ packages
      |_ custom
        |_ todos
          |_ public
            |_ assets
            |_ controllers
            |_ directives
            |_ routes
            |_ services
            |_ views
            |__ todos.js
          |_ server
            |_ config
            |_ controllers
            |_ models
            |_ routes
            |_ views
          |__ app.js

Step 03 - Server Routing & Remove Authentication

In file packages > custom > todos > app.js, remove the roles authenticated so that we can access the todo routes without login

roles: ['authenticated'],

Then in add a controller and model in the server. You may test the server using POSTMAN, to get all todos, or add new todo

http://localhost:3000/todos

Step 04 - Angular Client Routing & Service

Male a controller, services, and fix the roues of the public folder. Don't forget to change the app.js to the same route of client.