Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

pradeep1991singh/fullstack-development

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

3 Commits

Repository files navigation

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.

About

Full-stack application development with front-end technologies

Resources

Readme

Stars

Watchers

Forks

Releases

No releases published

Packages

Contributors