Skip to content

Latest commit

 

History

History
91 lines (73 loc) · 2.52 KB

README.md

File metadata and controls

91 lines (73 loc) · 2.52 KB
Raw

Introduction

Full stack application development with front-end technologies

Tech stacks

Backend setup and configuration

Installation

  • Switch to api-server root and install all dependencies mentioned in package.json
$ npm install

Run DB server

  • We will use mongoDB for persistence back-end data storage.
  • Install mongoDB
  • Run mongoDB, start two terminal, one for mongoDB server and other for mongoDB shell
  • First terminal (run mongoDB server)
$ mongond
  • Second terminal (run mongoDB shell)
$ mongo
  • Create new db mydb and new collection todos. In mongoDB we have collections in place of tables - documentation

Run api server

  • Switch fullstack-development/api-server folder open terminal and type
$ nodemon

Front-end setup and configuration

Installation

  • Switch to angular-app root and install all devDependencies mentioned in package.json.
  • It will install gulp and required gulp packages for serving angular app
$ npm install

Server structure

fullstack-development/
--- api-server/
------ api.js
------ Todo.model.js
------ package.json

Setup angular-app

  • Basically we will be creating a simple todo application in angular and will consume REST api end-points offered by api-server running at http://localhost:8080/.

App structure

fullstack-development/
--- angular-app/
------ app/
--------- scripts/
------------ controllers/
--------------- todo-list.controller.js
--------------- todo-details.controller.js
------------ services/
--------------- todo.service.js
------------ app.js
--------- views/
------------ todo-list.html
------------ todo-details.html
--------- styles/
------------ styles.css
--------- index.html
--------- bower.json
--------- gulpfile.js
--------- package.json

Run application

  • Lets run our app using gulp, open new terminal and type (Note our api server should be running)
$ gulp

You should be seeing an angular-app running, Create new todo and those will be start listing under Todo lists.