In this tutorial we will continue the basic tutorial and show how we can work with some simple structures, such as loops.
In case you missed it, you’re welcome to visit the first tutorial in the series : Starting with Angular
This shows what resources you need to get started with Angular, where to get the scripts from and how to build a very simple Angular app. In this tutorial I will assume that you know these things so won’t spend time on discussing the same thing again.
Let’s see how we can repeat some content without having to write too much code, hardly anything in fact.
We will basically have an array of content and we will display each item inside a div.
Let’s start with a very simple html page :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="AngularBasicTutorial-loops.js"></script>
</head>
<body ng-app=”simple”>
<div id=”content” ng-controller=”simpleController”>
<div ng-repeat=”contentText in content”>
{{contentText}}
</div>
</div>
</body>
</html>
Now the JavaScript :
(function () {
var app = angular.module('simple', []);
app.controller(‘simpleController’, [‘$scope’, function ($scope) {
$scope.content = [“content 1”, “content 2”, “content 3”];
}]);
})();
As you can see it’s all very simple, not a lot happening. Let’s see how this works :
All we did was to create a div and apply an ng-repeat on it. Inside ng-repeat we can have an expression. Please note that we cannot write any JavaScript in there, but instead we can have some constructs which refer to Angular parameters or functions.
content is a simple array and we will find it defined in the JavaScript file under $scope.content. Please note that how we get that data is irrelevant at this point. In another tutorial we will be looking at how we can get some real data from somewhere but for now we want to keep things simple so we understand how they work and fit together.
So, all we did was to select all the content items in the array with our expression.
ng-repeat will take the element it’s applied on and repeat it for all the items it finds in our expression. So we can expect to see three divs each displaying {{contentText}}.
Notice the double swirly brackets around contentText. This tells Angular that this is an expression and the content of this expression comes from an Angular parameter which is called contentText. We don’t have anything like this in our JavaScript, but we did define this item in our expression applied inside the ng-repeat tag. So {{contentText}} will be replaced with each value found in $scope.content. After all this, we can expect to see three divs, each one containing one of the array items defined in JavaScript.
Double click the index.html file and let’s see what happens :
On a blank page we will see this :
If you’d like to see the rendered html, please right-click on an item and select “Inspect element” assuming you use Chrome or whatever other option you have in a different browser.
Now, let’s spice this up a little bit and let’s use some JSON data, now gets us closer to a real scenario.
In our html page add this new content under our original div :
<hr />
<div ng-repeat=”contentText in properData”>
{{contentText.id}} – {{contentText.name}}
</div>
in the JavaScript file add this new parameter under $scope.content :
$scope.properData = [{ id: 1, name: "Peter" }, { id: 2, name: "John" }, { id: 3, name: "Alfred" }]
Now we have an array of JSON objects with two properties : id and name.
We need to change the ng-repeat a little bit to make it work with JSON. Fortunately this is very easy, so accessing properties from a JSON object can be done directly without any fuss.
The result now looks like this :
This concludes part 2 of the tutorial. hopefully you’re now starting to see the power of the framework even if we haven’t actually done a lot.
If you’d like to download the code for this tutorial, you can do it here : Angular Tutorial Part 2 – loops
As usual, the code is released under the MIT License
Have fun and see you later !
Andrei's web corner 