Tips I wish I knew when first started to learn AngularJS

Font End Development is my passion, but lately is getting a little hard to keep up with a huge flood of new things that come every day, so, I decided to do a little filter and learn some of the technologies that is already there such as AngularJS and MeteorJs.

Angular it's being in my to learn list for a while already, but I never had the time to do it... Actually... Time is something that I a really don't have, so, the only way for me to learn new things, is to get involved in a project that allows me to use this new technology I want to learn... I know this is a risky move, because I can do some damage, but so far, I've being successful in delivering good quality of work, even being pretty new on some of the frameworks or platforms.

Finally, I got the right project where Angular would be a perfect fit... and indeed, it was a perfect fit. I had this pharmaceutical iPad app, with a huge database, where the sales people would use as sales tool for drugs and have presentations for doctors and pharmacists.

In the very beginning I had some help from my friend Ronildo and watched some videos available on the internet, but nobody told me those things that I will share here and I wish I could understand better at first.

$scope Hierarchy

If you are reading this article, you probably know $scope, but took me a while to understand the hierarchy, specially when I tried to make two distinct controller to communicate between each other.

Never flood the $rootScope

Another nice thing we have in Angular is the $scope $id 001 or, well known as $rootScope. When I first started to understand how $scope works and tried to make things works across different controllers, I clogged my $rootScope and only later, I discovered that I did not need to do that. The best way to pass values around is to make use of Factories/Services, but this is more advanced and I'm still learning how to deal with this. This answer on StackOverflow helped how to start with factory

Avoid using $scope.$watch

$scope.$watch is a very nice thing in angular, but if you add all sort of watches, you will get in trouble, because you will have a big chance to overkill the memory on your app. Ben Lesh wrote a nice article explaining how to avoid watches... It made sense for me and since I read this article, I refactored my entire app to remove all watches.

Don't Abuse of Directives

When I first learned how to work with directives, I dove crazy by creating all sort of directives, thinking that I was creating separation and making things more organized, but later, I realized that I was hurting the overall project, so I decided to remove a whole bunch of directives that really did not make sense of it existence. Only create a directive if you sure the real need for.

You will hardly need jQuery

When I started to bootstrap my app, one of the first thing that I did, was to make sure that the old fellow jQuery was there but later, I discovered that I did not need it at all and probably you too. One thing that I did that might help is to question your self and google how to do something you normally do with jQuery in Angular way and you will be surprised that almost everything.

Don't be lazy and afraid of refactoring

Refactoring is something you need to know up front that will happen. Unlike my previous projects, this one I had to refactor my application many times, because you will always find a better way to accomplish what you want in Angular. At first, my JS file was huge, but with many bouncing around, I was able to reduce it to almost 30% of the initial code.

Conclusion

Angular is a great framework and I'm definitely in love to it, but be careful, it can be a bitch to you if you don't treat it well and with love. Take your time to read a lot and watch videos, try to understand the $scope hierarchy, try to learn to write Factory and Services and you will see that the life will be more bright.