Archive | angularjs RSS for this section

Filtered arrays outside ng-repeat loops

Ng-repeats are great, it’s very easy to filter through a collection:

But, as you type a query in the filter, notice that the number of the collection ‘friends’ remains 4 no matter how many friends are currently shown in the ng-repeat after $filter has done its job: Screen Shot 2015-07-23 at 2.16.26 PM So, how can you access friends  after it has been filtered? There might be cases when you need to know the amount of filtered elements, or you need to access the filtered collection outside the ng-repeat loop. Well, the solution is really easy and shows how AngularJS can do amazing thing with declarative syntax:

With only doing that we’re creating a new variable in our scope called  friendsAfterFilter. You can access $scope.friendsAfterFilter  in any other part of your application controllers, watchers, etc. Just remember the $scope  will be the same as your original collection:

 

Having a new collection in the scope and the variable assignment  friend in friendsAfterFilter = (friends | filter:search) means  friendsAfterFilter  will be re-evaluated in every $digest cycle. Please consider this impact when building your application.

Proper use of D3.js with Angular directives

D3.js is not only an eye-candy way to create data graphics, as a library proposes a very powerful concept: manipulate documents (read DOM) based on data. So instead of feeding a library with input data to draw a graph, D3.js creates a binding between your data source and the DOM, with all the dynamic benefits that this implies.

Although it’s something completely different, AngularJS also implements the same underlying philosophy with it’s all famous two-way data binding: have your models as plain JavaScript objects, and represent it directly modifying the DOM. continuously changing the view whenever the DOM changes, having only “one source of truth”.

Read More…

5 AngularJS Power Features that are awesome in non-trivial webapps

I’ve been developing AngularJS webapps in production environments since June last year. My experience have been awesome, redefining my understanding of front-end development and in the process, turning myself into an adept of JavaScript. There are many JavaScript frameworks out there, and choosing the right one might be tricky, but the Internet has no lack of tutorials, reviews, comparison charts and even a handy To-Do app written in several frameworks. So I don’t think we need yet another blog posts listing AngularJS features. Rather, in this article I want to share a bit of my experience with AngularJS, and letting you know 5 very “angularish” features that have changed the way I program webapps in non-trivial, commercial, high-performance environments.

Read More…

Understanding AngularJS transclude in directives

One of my favorite features of AngularJS are directives. They’re extremely modular and reusable components to “enhance” HTML, a different approach to regular JavaScript or JQuery widgets. I’ll write later about directives, but for now I’ll talk only about the concept of transclusion. I believe the explanation given in the official documentation is kinda obscure, and since I think transclusion is actually very useful when writing your own AngularJS directives, I’ll share an answer I gave in StackOverflow about how to understand AngularJS transclude.

Read More…