Recently, I had the privilege of attending GothamJS, a JavaScript conference held here in NYC at the NYIT Auditorium on Broadway. One topic that really peaked my interest was Angular.js by Google. Today’s web is dynamic with rich content and real-time updates to the view. (Thank goodness for MVC!)
[series_block]
This post is part of a series on topics covered at GothamJS:
- Recapping the 2013 GothamJS conference
- Filters in AngularJS (current)
- Scoping out Directives in AngularJS
- Fast caching in Backbone.js using localStorage
[/series_block]
One of the biggest problems with web apps or dynamic websites is that HTML was created to display pre-compiled code, code that wasn’t supposed to change… This leads to intensive JavaScript manipulation to give that dynamic feel to a page. For a large scale site/web app the JavaScript can get very messy really quickly and it can also be a bit difficult to sift through and find what you are looking for.
What if you could make your HTML smarter, so you could cut down on the amount of JavaScript you need to write to accomplish things like live updating of text when a user enters data into an input? Or if you could build complex objects in a controller and set up a template and let the JavaScript do the building of the area of the page? And one step further, what if you could filter that information by writing about 15 characters?
Angular.js makes all of this possible with a very small learning curve (for less complicated functionality). Today, I am going to show you how to add data to your page with a simple controller, use angular’s ng-repeat to quickly build the section, and the filter method to sort through the data. We will check out a few other neat tricks along the way. This tutorial assumes a decent understanding of HTML and JavaScript. Okay, let’s get crackin’!!
The first thing we have to do is include angular and declare our page as an app. To do this, I am just going to use the cdn script tag instead of downloading the file.
The first thing you should see is that we included the ‘ng-app’ attribute on the html tag. This allows angular to know that this is in fact an angular page. The second thing is the include of the angular script from googleapis.
Our app is now ready for some fun stuff!! We will add a small controller to the page so we can create the data we will need.
- {{name}}
If you look at the JS in the previous snippet you will see a tiny bit of code. That variable ‘List’ stores our controller and ‘$scope’ refers to the the content within the container we set the controller on. Now look at HTML and you will see a div with ng-controller=”List” that is the containing element of scope, meaning, we have access to the functions and variables from the List controller only inside of that div. Pretty darn cool, right?
The next thing to notice is the ul with one li in it. This is an angular template. The ng-repeat attribute lets angular know that for each name in names ($scope.names is set in the controller) I want to to display a list item with that name. If you look at the following snippet you can see what it will generate:
- Kurt
- Jason
- Manny
- Tariq
- Laurie
Now its time to filter some data. In the following snippet, you will see I added a search input with the ng-model attribute of search.
Then on the ul, we added a filter:search. This tells angular that we want to filter the content inside this container based off the data from our search model, in this case, the data in the search field.
If you look over the JS, you will see that I converted our array into an array of objects and made the corresponding changes in the HTML to reflect those changes. I did this so you can see how powerful default filtering is. If we added more properties to each object we could filter by those as well. Head over to the results here and try it out. I encourage you to continue to experiment with Angular.js — this could be very useful in a ton of situations.
Example here: CodePen Snippet
- {{person.name}}: {{person.age}}
That’s it for now, but check back later for more angular fun!
Did you attend GothamJS? Share your comments and questions below, or tweet us @Pixafy!
