Giter VIP home page Giter VIP logo

mean-stack-with-angular-2-tutorial's Introduction

MEAN Stack with Angular 2 Tutorial

This is an application demonstrating the basic components needed for a Single Page Application using MongoDB, ExpressJS, Angular 2, and NodeJS.

A working example can be found here. Additionally, a YouTube tutorial series illustrating how to create this application from scratch can be found here.

Requirements

  • NodeJS
  • MongoDB
  • @angular/cli

Description

This applications demonstrates how to setup a RESTful API using NodeJS with Angular 2 Frontend. The application features a blog feed, where users can post comments, like posts, dislike posts, and create/edit/delete their own blog posts.

Installation

  • Install all dependencies in package.json file. This can be done by navigating to the root directory in the command line interface and running the following command:
$ npm install
  • Next, install all of the Angular 2 development dependencies in package.json file:
$ cd client/
$ npm install
  • Installation is complete. Navigate to the root directory and then:  

Production

-- In root directory:

$ npm run build
$ npm start

-- Access production server at: http://localhost:8080

Development

$ cd client/
$ ng serve

-- In another window, from root directory run:

$ npm start

-- Access development server at: http://localhost:4200

-- Access API at: http://localhost:8080

Contributors

David Acosta.

License

No license.

mean-stack-with-angular-2-tutorial's People

Contributors

gugui3z24 avatar ricoliu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mean-stack-with-angular-2-tutorial's Issues

Request Payload captures data while login.

I followed your complete tutorial, but Request Payload captures data while login.
I guess someone can steal this, how to restrict this, I have attached the screenshot which right now in live.

requestpayload

like and dislike issue

On clicking like and dislike button, the user id is returning on console but the incrementation isn't working.

getProfile Issue

I have got issue with the token in getProfile. I try to lo the decoded from the jwt.verify: but i got the error that the toke is invalid, although as you did in youtube, I copy the token from logged in user

Lorem Ipsum

What the use of Lorem Ipsum and how to implement it.

Mixed active content blocked error?

I followed your complete tutorial and when I pushed the code to Heroku it is showing **Blocked loading mixed active content “http://localhost:3000/articles” **. It is somehow still accessing localhost, even after domain all over is domain=" ".

and one more thing even though I am using build --prod it keeps showing enable production mode which by the way I also tried with writing enableProdMode in main.ts file.

Issue in auth.service.ts

registerUser(user) {
return this.http.post(this.domain + 'authentication/register', user).map(res => res.json());
}
// and others

i got some error in .map(res => res.json());

ERROR in src/app/services/auth.service.ts:22:74 - error TS2339: Property 'map' does not exist on type 'Observable'.

22 return this.http.post(this.domain +'/authentication/register',user ).map(res => res.json());

(https://user-images.githubusercontent.com/43374749/80504269-7bed9b80-89a5-11ea-8bd5-1e84d514b25b.png

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.