Angular Best Practices Seed/Template

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:

Features

  • 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.

3 thoughts on “Angular Best Practices Seed/Template

  1. What is an ideal situation to use Angular for a web app? I have read about Angular, and other similar frameworks, but don’t know what the perfect scenario is to use them! I’m just trying to understand when they are the perfect tool for a project!

    Thanks, Clayton

    Like

    • I would say the “ideal” situation is for an interactive webapp (or even a hybrid mobile app). Or in situations where you have a set of web services, and you need to add a client (front-end). You can use Angular for just about anything, but the benefits of Angular are more apparent when you need a web app that requires interaction from end users.

      Note also that you don’t have to let Angular control your entire app. If you have a small section of your site that is highly interactive, you can let Angular control just that one piece.

      Like

      • So one example would be maybe when users are entering in data or any type of text to search for something etc… Could you use angular with instagrams api if you have an app and you want to populate users based on the first characters typed that match users you follow?

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s