Angular MEAN Stack – Starter Code

This is not Tutorial of any kind for MEAN, If you are MEAN newbie or familiar with advanced JavaScript has already started to learn MEAN stack, you can you use following article and its code helpful to kick start your MEAN project or you never know might end up learning something 🙂

Following are some steps by steps instructions regarding how I created this MEAN starter code with CRUD as usual.

Download Nodejs

node -v (to check version)

Download MongoDb

Create Db and at least one standard Collection to start with

Run following commands (to initialize nodejs project)

npm init (follow instructions on VS Code terminal)

npm i express mongoose body-parser (to download to install express fx, mongoose package to access mongodb and easily parse through body-parser)

Create db.js in root like below to create connection between mongodb and your application

Create index.js (to setup external packages and open port and setup controllers)

Create your collection model in code, I created Crypto Coin model (its trendy, isn’t it)

Create Controller.js class for your CRUD operations

1. Import Express, Mongoose, and Coin model
2. Create router for Get/Update/Add/Delete

1. Create Angular project using following command
2. npm install -g @angular/cli
3. App Module is place where you can add angular packages modules, components
4. In this app, i added Forms module, HttpClient, CoinComponent

1. Angular App consists on Components, Services, Model, Forms
2. Coin Service will be responsible to access your API (REST) methods
3. Angular app is consist on Components, i created Coin Component which is going to be middle ware between component HTML and Service.

Application code flow would be like below

HTML → Component.ts → Service.ts → Controller.js → Model.js → Mongoose → MongoDb