Learning AngularJS Part 2/4

Simple List using ngRepeat

Posted on August 18, 2015 in angularseries, webdev
Note this is part of the "Learning AngularJS Series".
See a list of these projects here

Using ngRepeat - A List of Angular Projects

Although this is only the second one I’ve learned about, I think ngRepeat will be my favorite directive. It reminded me of some of the features I have used in backbone. ngRepeat helps a developer remember to avoid code repetition — a key principle of programming. Instead of hard coding data into HTML, ngRepeat lets you use a template so that you don’t have to repeat yourself.

So, here is HTML without the use of a template and ngRepeat:

Here is what it becomes:

ngRepeat loops through the projects and asks for each one’s attributes. Every time it finds a new “project” in “projects” it creates a new replica of the html skeleton and populates it.

Of course the data needs to come from somewhere. The data is held in an object (which could be stored and automatically updated by a server. Here is the data that I used:

As I upload more projects, I will add all the info here and I won’t have to touch the HTML. Just this feature alone can simplify the development of many applications. Sites that deliver dynamic content–like news sites–take advantage of this to make their job much easier.

See it on Github


comments powered by Disqus