Time Saving Tips for AngularJS Developer

Here are some of the tips while learning and coding on angularjs.

At a high / architecture level:

1. Do not forget to write your tests. In Javascript, you don't have the compiler to hand hold you and tell you that you did something wrong. And you will want to pull your hair out the next time your app is broken because of a missing letter. And the large your application gets, having the comfort of making large scale changes and refactorings without worrying about broken functionality is amazing. And writing your unit tests is the only way to get there.
2. Don't put too many things on the scope. The scope is expensive, as it is the one that undergoes dirty checks. Just put exactly what will be displayed on the UI on the scope, and leave the rest as variables in the controller, but not on the scope.
3. Data is the truth. Let the data drive the app, and not any other way. You should purely focus on getting the data in the right places. The route controlling logic, the watches and the data binding should drive what is visible in the UI.
4. If you need a UI widget like datepicker, autocomplete then think directive. Wrap all your third party components in directives for easy reuse, as well as to make your app modular. Being able to write <input datepicker> is way better than writing <input id="myinput"> and then in JS, $('#something').datepicker().
5. Don't do DOM manipulation in your controllers, as well as your services. Try to restrict that work to directives.
6. If you need to communicate between controllers, there are basically two options. Either create a service which is sigleton and use it to communicate or fire events on the scope, and have the other controller watch. Don't create your own new way outside of these two.
7. Dependency Injection: Understand it, love it, breathe and live it. That should be the one and only way you ask for and work with services or any dependencies from any of your code.
8. For directives, try and isolate the scopes so that you can reuse them without worries. Isolating the scope ensures that your directive does not depend on some particular method / variable on a parent scope, and thus can be reused. Pass in whatever you need as arguments to the directive. Use the databinding to ensure you get the updated value instead of the value at that instant.
9. Use a task runner to automate tasks: Use Gulp or Grunt to automate your workflow. Have them watch files for changes and automatically reload your browser window when the tasks have finished compiling the changes. This is a massive time saver and I dedicate an hour at least when I start a project to set up a decent and working gulpfile.

Low-level Tips:

1. Learn and love your console logs. Sometimes, especially with the digest cycles and angular lifecycle, its sometimes easier to print your debugs to console.logs instead of adding breakpoints.
2. Get Batarang, the chrome extension. That is by far the best way to get into the bowels of AngularJS, and some of the details it provides (performance, dependencies) will make your life super simple and easy.
3. Start running your unit tests on every save. It will do the work of the compiler, and next time you break any functionality, you can fix it with a simple Undo in your IDE.
4. Use the [] notation for listing your dependencies. That is "angularApp.controller(['$scope', function($scope) ..." instead of "angularApp.controller(function($scope)...". Both work identical, except the former works even when you minify/uglify your code.
5. angular.module('myApp') uses an existing module called 'myApp', and throws an error if it doesn't find it.
6. angular.module('myApp', []) creates a new module called 'myApp'.
7. Do not architect your app and its operations according to the DOM. If you are thinking in terms of jQuery, forget everything you know. Think in terms of data and it's natural structure and "wire" this data to the $scope.
8. Break your application up into widgets and modules. Don't create monolithic pages controlled by one controller.
9. Keep your controllers as clean as possible. Try to have as little business logic in them as possible.
10. Off-load the heavy lifting to services and take full advantage of Angular's dependency injection.
11. When apps are large, have a light-weight global controller that is responsible for functions that are used frequently and globally. Modules and widgets should be specific and small. They will inherit the global functions.