Edvinas Urbasius


Front-end developer. Interested in IT, history and economics. The life-long learner.


Notes from PhoneCat App Tutorial (AngularJS) - AngularJS Templates

Notes from AngularJS tutorial.

Reset the workspace to step 2.

git checkout -f step-2

View and Template

In AngularJS, the view is a project of the model through the HTML template


  • The ng-repeat tells AngularJS to create a <li> element for each phone in the list. 
  • {{phone.name}} and {{phone.snippet}} will be replaced by te values of the expressions.

ngController, attaches a PhoneListController to the <body> tag. 

ng-app="phonecatApp" is the name of our module. It will container PhoneListController.

Model and Controller

The data model is now instantiated within the PhoneListController.

  • The controller is simply a constructor function that takes a $scope parameter.
  • The controller allows us to establish data-binding between the model and the view.


A scope can be seen as the glue which allows the template, model, and controller to work together. 


The "AngularJS way" of separating the controller from the view makes it easy to test code as it is being developed. 


Extra points: Try and make an 8x8 table using an additional ng-repeat.

No extra ng-repeat, but still works!

<tr><th>Row number</th></tr>
<tr ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]"><td>{{i}}</td><td>{{i * 8}}</td></tr>

You'll only receive email when Edvinas Urbasius publishes a new post

More from Edvinas Urbasius: