What Are We Making Here, Anyway?
To Do's
- {{ task }}
Let's See Some Code

MyHtmlFile.html |
<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>
- 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.
- 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.
- Create a new div for the controller. we set the ng-controller directive to the function for that particular controller.
- 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.
- We create a button labeled Add that, when clicked, will fire the add() function in our controller Javascript code.
- 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

MyController.js |
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 = ""; } }
- 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.
- Then we'll set up the variable taskArray and populate it with some dummy data.
- We'll then declare the function add then we need to occur when the Add button is clicked.
- 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.