Bryan is an entrepreneur, software developer, photographer, investor and business adviser with a strong operations background coupled with 16 years of startup, new media, early-stage financing, marketing, technology development, sales and real estate investment experience.

a

Building an Angular App: PART 2

Building an Angular App: PART 2

Now that we have the angular basics in place lets add some functionality to the app.

 

So let’s start displaying some lists. ANgualr¬†makes that easy using the ng-repeat directive.

We’ll start by adding in some code to our controller in the app.js file. Here we’ll be adding in a new $scope:

 

The $scope variable serves as a bridge between Angular controllers and Angular templates. If you want something to be accessible in the template such as function or variable, you then bind it to $scope.

 

Now that we have a list of data, we’re going to want to repeat that data on the front end so we’ll have to add in ng-repeat to the index.html file:

 

And like magic, we can see a list of posts.

 

So let’s add a bit more to our posts and add in upvotes and a title; we’ll have to amend our posts object a bit:

 

Now we change the ng-repeat to show the changes we made:

 

Let’s go one step further and order our posts by the number of upvotes. Angular has built-in¬†filters we can use. In the ng-repeat on the index.html file, we’ll update it to:

 

We have a pretty solid start here so in the next post we’ll jump into inputting user data into our lists.


Also published on Medium.