Hello. This article has been written for quite a long time, it has been rewritten a couple of times, and, as a result, it did not suit me. Too mentor turned out tone. And then, suddenly, Friday is coming, the end of the sprint, which means you can relax. And so, do not take it too seriously, just a few tips on how to prepare filters in Angular.JS
Whoever is interested or wants to relax a bit - go ahead under the cut and all a good Friday!
1. Use filters anytime, anywhere. For page titles, column names, product list. Filters are executed every digest, which means that the user will miss anything for sure. The more filters on the page - the better. In addition, then, in each filter, you can add logic.
')
2. Make filters universal. The filter should be able to filter everything. From products to embedded base-64. Just one filter, some twenty parameters and your team is happy. After all, everything works out of the box, and write nothing. And if this filter is also able to translate text into lower case, then recognition will find you. Inevitably.
3. Always add logging to your filter. So debugging is much easier. And, believe in the word, the one who will disassemble your logs, just will not remain without work.
4. Let's filter only common names. And what if someone makes it universal then! Do not rename the same later! In addition, it will be much more interesting for your colleagues to read the markup. You can say, give them a quest. Free.
5. Infinitie Scroll should be implemented only on filters and no data loading. We went to the server, unloaded the entire table, and then let our filters work. No wonder you wrote them. The load on the server is less, the hosting can be taken cheaper, and you need to thank.
6. Business logic should be only in filters. Because - "And" - Encapsulation.
7. Generally hide all logic in the filters. So safer. And if not, then at least the most "heavy." And the harder the better. It is possible to make any complicated calculations there or to change the DOM. Better yet, pull the server. Straight from the filter. The user does not train, wait! But you will have the most subtle services and controllers. Just brag on the next interview.
8. Speaking of DOM. Who said that you need to use directives to manipulate it? Filters, this is the best place for $ ('# user_icon'). Trigger ('click');
9. Communicate filters. Let one filter, something changes in the second filter. Best through $ broadcast. And best of all incoming data. So debag turn into a fun and entertaining game that develops attention, concentration and knowledge of the foundations of the core of Angular. And in general, always use $ broadcast. It is stylish.
10. Collect filters in chains! If the chain is less than three filters, it is not kosher! You can even write sentences with filters. For colleagues or just curious users.
11. Combine filters with ng-mouse-over. It's fun! You can even write nothing to the mouse-over handler. The main thing is to hang it on the body and check in on Friday night. Take special pleasure if you have Continues Integration.
12. Do not optimize. First, early optimization kills. Secondly, it is the work of the framework. You will not do someone else's work, right?
@By StGeass
13. Use filters as handlers when changing the digest!
14. Change the context of the entire $ scope right inside the filter through this. Your version of the angular does not allow this? Pass the context right through the arguments and change it again!
And most importantly, know. No filters inhibit your application. And misunderstanding and underestimation of you, as a developer!
For the curious.Filters in Angular are such a function that each digest is called. Those. often, very often, and several times in a row. There is no control over the start of filtering, no control over the end. Raising events is useless and fraught. When carelessly handling easily turns the application into a pumpkin. And, yes, "out of the box" tools for optimizing filters either.
For the more curious.Winning is not easy and everyone finds their solution for a particular case. For example, filtering on the side, using ng-change, isDirty, INotifyOnPropertyChange, caching, $ scope. $ Watch (function getData () {}, true) and so on. Although the latter I do not advise you because it can be even worse. They also say CodeReview helps, but this is generally shamanism.
For the most curious..directive('onRepeatFinish', [function () { return { restrict: 'A', link: function (scope, elem, attr) { if (scope.$last === true) { console.log('ngRepeatFinished'); }; } } }]);
If anything, this “for” parameterized filters does not work.
Good Friday everyone.