aguyawry/angular-espn repository overview

⁠angular-espn

Experiments using AngularJS and the ESPN API (http://developer.espn.com/⁠).

⁠Setup

⁠Clone Repository

Clone the angular-espn repository using git⁠:

git clone https://github.com/aguyawry/angular-espn
cd angular-espn

⁠Install Dependencies

Install NodeJs⁠ which will also install npm⁠. It may also be helpful to use a tool like Node Version Manager nvm⁠ to change the currently active version of NodeJs as needed.

Development dependencies are managed with npm⁠. Configuration details can be found in the package.json⁠ file in the project root.

Client-side libraries are managed with bower⁠. Configuration details can be found in the bower.json⁠ file in the project root.

package.json has been configured to automatically run bower. To bootstrap the entire project, run:

npm install

After this bootstrap completes, there will be two new folders in the project root:

• node_modules - contains the npm packages for development tools
• bower_components - contains client-side libraries

⁠Run the Application

One of the development dependencies includes a simple http server⁠ for development. To start it, type:

npm start

then browse to http://localhost:8000/dev/.

⁠Development Notes

Development leverages the build system gulp⁠ to watch for changes in LESS files and compile them to CSS when modified. This watch also does a JS linting function. Details can be found in the gulpfile.js in the project root. To start this task, run gulp which will immediately run a task to compile LESS files and will then start the watch task to compile LESS files are changed while also linting JS files. These tasks can be run individually if needed by running: gulp dev-styles to compile, gulp js-lint to test the JS and gulp watch to start the watch task.

Another gulp task is set up to create a build folder meant for production release. This task will:

• compile LESS files and minify the resulting CSS
• minify HTML files
• strip debug and log statements form JS, concatenate and minify

This task can be run by typing gulp build-release. JS loaded at the end of the document (which is most of it) is not being minified due to errors generated by the way angular controllers are currently defined. See "A Note on Minification" in this article⁠. Once these are tweaked, uncommenting a line in this task will do this.

⁠Other Helpful Information

• AngularJS⁠
• ESPN API⁠
• Semantic Versioning⁠

The ESPN API seems to be sort of finicky and a bit unpredictable at times. This app does not yet handle timeouts or empty responses.