Tuesday, July 16, 2013

Starting a New Project with ng-boilerplate

If you haven't checked out Josh Miller's ng-boilerplate, you're missing out. When it comes to best practices, this is the best place to start.

If you're not familiar with Bower, Grunt, Node, Karma, etc., don't worry, because neither am I. But that doesn't matter to me, since after setting up ng-boilerplate, all I need to do is:


  • Run "grunt watch" from the command line
  • Open up my favorite editor (currently, this is PyCharm)
  • Make changes in my html, javascript, css files
  • Save the changes and watch as the browser automatically refreshes itself with all of the updated content


It really doesn't get any easier than that! Additionally, I can simply run "grunt" to compile, run unit tests, combine html templates, and combine js and css files (as well as minify them). This has taken a ton of work off my back so that I can focus a lot more of my time coding.

The setup is fairly straightforward. I develop mostly on my Mac Mini with my test webserver and dev environment running Ubuntu x64 under VirtualBox. Ubuntu's package manager makes everything installation-related a breeze. For those running Ubuntu, if you don't already have NPM (Node.js's package manager), just run the following before going through the ng-boilerplate install:

# add the custom repo
sudo add-apt-repository ppa:chris-lea/node.js

# update repos
sudo apt-get update

# install node.js, which will also install npm
sudo apt-get install nodejs

For existing AngularJS projects, it's going to be tough to try to refactor everything into this structure. If the project is small, it's highly recommended. Otherwise, perhaps you're better off just moving the frequently-changing portions of the site to this format, if possible.

12 comments:

  1. I'm new at Git and trying to learn some best practices. If I'm starting a new AngularJS project, is the best thing to do is to clone Josh's ng-boilerplate Git repo and commit my work into the repo clone?

    ReplyDelete
  2. For new projects, I prefer to just sync up with whatever is the latest version of ng-boilerplate, and use that as a starting point, rather than create a clone and work off of the clone. Although it would work either way, I'd rather start the repo for my own project and add pieces into it, rather than clone ng-boilerplate and commit into that. All in all, that part doesn't really matter too much.

    One problem that I've had is that I've broken sites trying to upgrade ng-boilerplate in-place due to incompatibilities between components, source, etc. So my approach now just uses ng-boilerplate solely as a starting point, and if I need to upgrade any part of it (such as angular-ui), I make the appropriate changes and commit it to my own repo, and thus I never upgrade the base ng-boilerplate used as a starting point. Instead, I'll upgrade each piece one-by-one when needed for new features or security fixes, and this helps reduce any site downtime and/or source conflicts.

    ReplyDelete
  3. Hello Willie, I have been providing AngularJS courses in Chennai for the past 6 months, and at times, I have used your blog as reference for my students in the class. It has been so much useful. Thank you, keep writing more :)

    ReplyDelete
  4. Angularjs training is essential for developing any single page web application. You have to learn Angularjs indepth to creating enterpirse SPA application.

    Angularjs Training
    Angular.js Course
    Angularjs Training in Chennai
    AngularJS Interview Questions

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. I think you did an awesome mgsu ba 1st year result job explaining it. Sure beats having to research allahabad university BA 3rd year result it on my own. Thanks

    ReplyDelete
  9. Click :-https://cattlepetsdog.blogspot.com/2022/01/australian-cattle-dog-wesen.html

    Read australian cattle dog :-https://cattlepetsdog.blogspot.com/

    ReplyDelete