Basic Angular Tutorial: Simple Controller ng-repeat Example

For the super basic Angular example with pure html check out the Angular Hello World post. This post is a step up; it's the regular basic angular tutorial (advanced basic tut coming soon!). Here we're going making use of a Javascript file to save data in an array let angular update our DOM elements acordingly. Yeaahhooo!

What Are We Making Here, Anyway?

Below You can test the Angular application that I'll show you how to make in this tutorial (We aren't using any css here, and my blog is automatically adding some styling to the webapp so yours might look slightly different when you drag the files into your browser):

Add a new task here: Add

To Do's

• {{ task }}

Let's See Some Code

Ok. I'm going to show you the html file, and we'll dissect it together. You can copy this whole snippet and save it as MyHtmlFile.html (the name really doesn't matter).

MyHtmlFile.html
File Size:	0 kb
File Type:	html

Download File

---

<div ng-app>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="MyController.js"></script>

    <div ng-controller="ToDoListController">
     Add a new task here: <input type="text" ng-model="newTask"/>
        <button ng-click="add()">Add</button>
        <h2>To Do's</h2>
        <ul>
            <li ng-repeat="task in taskArray"> {{ task }} </li>
        </ul>
 
    </div>

</div>

Let's run through what's going on here.

1. Wrap everything in the file in a <div> tag and use the ng-app directive to tell the browser that this is an Angular webapp.
2. Load two different Javascript files. The first is the minified Angular.js library. The second is the custom controller file that we will be making very soon.
3. Create a new div for the controller. we set the ng-controller directive to the function for that particular controller.
4. We will then put some text on the page instructing the user to "Add a new task here: ," followed by an input box allowing them to enter text. We'll bind that input box's value to the variable newTask using the ng-model directive. 
5. We create a button labeled Add that, when clicked, will fire the add() function in our controller Javascript code. 
6. We'll create a heading with the text To Do's  and use ng-repeat to display each task in our taskArray (both variables from our controller Javascript code.    

The Javascript Controller

We'll also need a Javascript file. This will hold the logic for out controller. It can be any name you like, but be sure that it matches with the name of the file you put in the <script> tag in MyHtmlFile.

MyController.js
File Size:	0 kb
File Type:	js

Download File

---

function ToDoListController($scope) {
        $scope.taskArray = ["clean apartment", "write some code", "go out to eat"];
 
                console.log("hello");
        $scope.add = function() {
        $scope.taskArray.push($scope.newTask);
        $scope.newTask = "";
        }
    }

This is quite a simple file. Programmers shouldn't be bothered will classes and all that nonsense. ;)

1. First, create a function called ToDoListController. This will be called when the <div> from the html file is created. The function automatically accepts the $scope argument (we get this for free from the Angular framework). This is unique to Angular and allows you to access the binded variables from the html file.
2. Then we'll set up the variable taskArray and populate it with some dummy data.
3. We'll then declare the function add then we need to occur when the Add button is clicked. 
4. Inside of the add function let's push what's currently in the textbox into our taskArray and set the text input to an empty string. 

Putting It All Together

Save these two files in the same folder in your computer. Then just drag the MyHtmlFile.html file into the browser and it should work. If you don't want to put them in the same folder then you just need to change the path in your MyController.js script tag to reflect where you have it, using either the relative or absolute path.