A Web Application built using MEAN (MongoDB, Expressjs, Angularjs, Nodejs) for the sake of learning new technology.
The links below should provide a good understanding of how to build applications with Express, MongoDB and NodeJS.
- http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/
- http://webapplog.com/express-js-4-node-js-and-mongodb-rest-api-tutorial/
- http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/
- http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
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:
- http://hfboards.hockeysfuture.com/showthread.php?p=79594853
- http://riccomini.name/posts/game-time-baby/2012-09-29-streaming-live-sports-schedule-scores-stats-api/
- http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/
The link below contains some JSON data I am interested in rendering with AngularJS through an Express/Node API:
http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/PIT/iphone/clubroster.json
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:
http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/LAK/iphone/clubroster.json
Or:
http://nhlwc.cdnak.neulion.com/fs1/nhl/league/teamroster/ANA/iphone/clubroster.json
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.