A Web Application built using MEAN (MongoDB, Expressjs, Angularjs, Nodejs) for the sake of learning new technology.
Resources for learning Express, Mongo and Node
The links below should provide a good understanding of how to build applications with Express, MongoDB and NodeJS.
Resources for learning AngularJS
The link below also teaches you how to retrieve data from a RESTful API (such as Express). Very helpful.
A set of videos for understanding how to use AngularJS. The exercises and videos only cover front-end with Angular, there is no back-end. I found these videos to be quite helpful.
Tutorial on consuming RESTful APIs / requesting JSON data with AJAX
In order to start building this application, we must find a way to obtain data for teams, rosters, and more through an API which returns JSON. Some possible resources for this are shown below:
The link below contains some JSON data I am interested in rendering with AngularJS through an Express/Node API:
If you put the JSON into a beautifier, you will notice it contains data for all the players in the Pittsburgh Penguins team, denoted in the URL by
PIT. Here is a subset of what the data looks like:
"position": "Center", "id": 8471675, "weight": 200, "height": "5' 11\"", "imageUrl": "http://3.cdn.nhle.com/photos/mugs/8471675.jpg", "birthplace": "Cole Harbour, NS, CAN", "age": 26, "name": "Sidney Crosby", "birthdate": "August 07, 1987", "number": 87`
The above is a dataset pertaining to one player on the team. In fact, we can grab data for any team by editing the URL and placing the team name inside. For example:
In the future, we can easily construct the URLs for getting all of the JSON for all teams by substituting the team name with one of the following:
['ANA', 'BOS', 'BUF', 'CAR', 'CBJ', 'CGY', 'CHI', 'COL', 'DAL', 'DET', 'EDM', 'FLA', 'LAK', 'MIN', 'MTL', 'NJD', 'NYR', 'OTT', 'PHI', 'PHX', 'PIT', 'SJS', 'STL', 'TBL', 'TOR', 'VAN', 'WPG', 'WSH']
With this data, the goal for this project is to:
Build the RESTful API with NodeJS + Express to retrieve data for a team, store it in mongoDB. Data will not necessarily have to be parsed, since the format is nice and we will actually render all of the data.
Use AngularJS to retrieve the data from our RESTful API and render it.
The rendered view would look something like this: , where you can see the JSON pasted above is rendered (The image mugshot, the birthplace, age, number, etc). Ideally we would render each player's stats on a page for each team. For now, we just need to render a single player's stats and then we have a good working example of the MEAN stack.