Let's see how to bind data when we have a collection (or a list) of values. For clarity, we'll only show the important part of the code.
<body ng-app="collectionBindingApp"> <div ng-controller="EmployeeCtrl"> <h1>Employee data:</h1> In a list - <ul> <li ng-repeat="employee in employeeData.employees"> Employee number {{$index}} is - {{employee.name}} </li> </ul> <br />In a table - <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr ng-repeat="employee in employeeData.employees"> <td>{{employee.name}}</td> <td>{{employee.age}}</td> </tr> </table> </div> <script src="app.js"></script> </body>
(collection-binding-ex\index.html)
You're now familiar with the ng-app directive. AngularJS starts its magic from this point onwards. We then attach EmployeeCtrl to the div element using the ng-controller directive. The ng-repeat directive instantiates a template once per item in the collection, which is employeeData.employees here. So, in the first instance in the preceding code, it repeats the <li> elements, whereas in the second case, it repeats the <tr> elements. Each template instance gets its own scope, and $index is set to the item index or key.
Let's look at the controller now (again, for clarity, we are showing a part of the code):
var app = angular.module('collectionBindingApp', []); app.controller('EmployeeCtrl', ['$scope', function ($scope) { var Employee = function (name, age) { this.name = name; this.age = age; }; var getEmployees = function () { return [ new Employee("First employee", 56), new Employee("Second employee", 44), new Employee("Last employee", 32) ]; }; $scope.employeeData = { employees: getEmployees() }; } ]);
(collection-binding-ex\app.js)
Tip
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We first create a new module called collectionBindingApp using the below API :
angular.module(name, [requires], [configFn]);
Here name is the name of the module to create or retrieve. The second argument is optional—if it is specified then a new module is being created, else an existing module is being retrieved for further configuration. The third parameter is an optional configuration function for the module.
We store the module in the app variable. This app variable is available globally and is used to associate controllers, directives, filters, and so on with this module. Then we create a controller called EmployeeCtrl on this new module.
We should use a controller to set up the initial state of the $scope object and to add behavior to the $scope object. We declared our new controller, called EmployeeCtrl, and associate it with the collectionBindingApp module. This controller has a few functions to generate test data, but in real-life scenarios, you'll typically fetch data from RESTful services (for which you can use the $http service or the $resource service). So, we set the state here by assigning some employees to the $scope.employeeData object. An advantage of using an object is that you don't clutter $scope with too many variables. So, when you run the example, you see the employee data, first in a list (which also shows the index) and then in a tabular form.
It would've become pretty obvious by now that data binding can reduce a lot of DOM manipulation code from the application and is a powerful technique. AngularJS brings data-binding capabilities within the realm of web applications. We can use it in our favorite platform, that is, the Web, HTML5, and JavaScript.
