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

No alt text provided for this image
Ā 

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

No alt text provided for this image
Ā 

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

No alt text provided for this image
Ā 

Create Controller.js class for your CRUD operations

  1. Import Express, Mongoose, and Coin model
  2. Create router for Get/Update/Add/Delete
No alt text provided for this image
Ā 
  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
Ā 
No alt text provided for this image
Ā 
  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 middleware between component HTML and Service.
Ā 
No alt text provided for this image

Application code flow would be like below

HTML ā†’ Component.ts ā†’ Service.ts ā†’ Controller.js ā†’ Model.js ā†’ Mongoose ā†’ MongoDb

Code on GithubĀ https://github.com/adnanaman/MEAN-StarterCodeĀ 

Ā 

Muhammad Adnan

Author Since: July 3, 2019

Leave a Reply

Your email address will not be published. Required fields are marked *

Rating*