Mean stack

30
Facebook: https://www.facebook.com/MrOnyancha Twitter: @MrOnyancha LinkedIn: https://ug.linkedin.com/in/MrOnyancha LinkedIn: https://plus.google.com/u/0 /+ChrispinusOnyancha Onyancha is a Software Engineer by profession, he is also Co-Founder creativeDNA and currently the Managing Director and lead tech at creativeDNA.

Transcript of Mean stack

Page 1: Mean stack

Facebook: https://www.facebook.com/MrOnyancha

Twitter: @MrOnyancha

LinkedIn: https://ug.linkedin.com/in/MrOnyancha

LinkedIn: https://plus.google.com/u/0/+ChrispinusOnyancha

OnyanchaisaSoftwareEngineerbyprofession,heisalsoCo-FoundercreativeDNAand

currentlytheManagingDirectorandlead techatcreativeDNA.

Page 2: Mean stack

Agenda•GitHub linkup

•Introduction to Mean Stack

•Why Mean Stack?

•Installing Mean Stack

•New application in Mean Stack

•Introduction to Google Cloud Platform.

•Moving it to Google Cloud Platform.

Page 3: Mean stack

Introduction to Mean Stack

• Build a faster JavaScript app right from the Front end to the Back end.

Page 4: Mean stack

Installation

Node-JS

Ø Go to: https://nodejs.org

Ø Follow the installation instructions for your platform version.

Page 5: Mean stack

Installation

MongoDB

Ø Go to: https://mongodb.org/download-centre

Ø Follow the installation instructions for your platform version.

Ø $: mongod –dbpath DIRECTORY_TO_DATABASE_DATA to run

Page 6: Mean stack

Installation

MEAN Stack

Ø Go to: http://mean.io

Ø Follow the installation instructions for your platform version.

Page 7: Mean stack

Ø Ourmeanstackisgoingtolooklikethis

Page 8: Mean stack

Ø WearegoingtousemongooseaJavaScriptdrivertoconnect tothemongodatabase

Page 9: Mean stack
Page 10: Mean stack
Page 11: Mean stack

Ø FocusingonAngularJs

Page 12: Mean stack
Page 13: Mean stack
Page 14: Mean stack

Application Test

– Path:/app/account/index.controller.js– Theaccountindexcontroller isthedefaultcontroller fortheaccount

sectionoftheangularapp,itmakestheuserobjectavailabletotheviewandexposesmethodsforupdatingordeleting thecurrentuser'saccount.

Page 15: Mean stack
Page 16: Mean stack

Application Test

– Path:/app/account/index.html– Theaccountindexviewisthedefaultviewfortheaccountsectionof

theangularapp,itcontainsaformforupdatingordeleting thecurrentuser'saccount.

Page 17: Mean stack
Page 18: Mean stack
Page 19: Mean stack
Page 20: Mean stack
Page 21: Mean stack
Page 22: Mean stack
Page 23: Mean stack
Page 24: Mean stack
Page 25: Mean stack
Page 26: Mean stack
Page 27: Mean stack
Page 28: Mean stack
Page 29: Mean stack
Page 30: Mean stack