Last week I posted about my Angular Best Practices Guide (as noted, it was heavily inspired by Todd Motto’s guide). As useful as a guide can be, nothing beats looking at real code. So I decided to create a simple seed project to show many of the best practices in action. The result of that work can be found here: angularBPSeed.
More details, including instructions on how to run and build the seed project, can be found on the project’s Github page above. I will also list some of the features of this seed below:
- An example app following many of the best practices from my Angular Best Practices Guide
- Built-in Express server for serving the app during development.
- An optional proxy server for CORS functionality. This allows you to serve the app from your local machine, and also make requests to a 3rd party server if needed.
- Includes 2 services, 2 directives, 2 top-level views, an Angular UI Bootstrap modal, “fake” server call using promises, a loading bar displays during calls to the server.
- Uses AngularJS, Angular UI Router, Angular UI Bootstrap, Angular Loading Bar, Bootstrap, Grunt, Browserify, ngAnnotate, html2js (for compiling templates and adding them to the template cache
- 2 builds: grunt build is used during development, and grunt (the default task) will run the build and prod tasks to build a production-ready version of the app.
In addition to highlighting the Best Practices, I wanted to show how you can integrate Browserify (and thus CommonJS) into your project. Browserify is really easy to use, and using CommonJS adds minimal overhead to your project. I’m far from an expert on Browserify, but I can’t imagine not using it on a project.
To use this project as a template for your own project, just clone it remove (or rename and customize) the existing services, directives, etc. It should be fairly easy to use this seed as a skeleton to start your own project.
If you would like further clarification on the ideas behind the code in the seed, or further explanation of how something works, feel free to ask me in the comments of this post.