Some of the time-saving tips every AngularJS user should know !! - Part 1

Tips



Having worked on and with AngularJS for short period thou , here are some of the time-saving tips at the top of my mind , Just go ahead and comment out if you find it wrong or if you have any :


At a high / architecture level:


1) Write your tests ! - Stop, right now.I mean it !!!. ;) 

Don't Ever go by this Saying !!! You can never be 100% right

Always write your unit tests. In Javascript, you don't have the compiler to hand hold you and tell  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 larger 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)The 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 (say a date picker, an autocomplete), think of 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="StartDate"> and then in JS you initiate date picker  like $('#StartDate').datepicker().

Here my Date Directive is psice-date


5)Don't do DOM manipulation in your controllers as well as your services -



Always try to restrict that work to Directives. If you are doing DOM manipulation in your controllers, STOP! You are doing something wrong

6) Communication between controllers - 



There are basically two options. Either create a service (which is a singleton) 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) Directives !!! (try and isolate the scopes (AngularJS Directives Guide) ) -



This is coz 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 data binding to ensure you get the updated value instead of the value at that instant.

Learn More on - Low-level thoughts / Gotchas / Tips about Angular Js.

Comments

Popular posts from this blog

The Top 15 Google Products for People Who Build Websites

Google Translator using Windows forms

5 Useful Tricks for Ubuntu Power Users