Creating the HTML view of a simple CRUD to do list with Angular.js Part 2
Controllers in Angular.js are JavaScript functions which would hold different methods and properties. In our HTML view, we can define the controller that an element uses and all of its child elements would also be able to use the properties and methods of that controller. We can also use those properties and methods in the HTML view through Angular’s data binding or through various built-in directives. Using a controller creates a new child scope for the element in which it is applied and its children.
To create a controller, first we need a module to attach it to. In this small to do list, we can immediately chain the controller to the definition of the module. We create a controller by calling the controller method on the module and passing it the controller’s name (it would be express vpn used in our HTML view – for example, when adding the ng-controller directive) and a function which takes as arguments the various dependencies that the controller would have (you need at least $scope to which you would attach properties/methods that would be used in the HTML view).
Part 1:
|
1
|
angular.module(“ultimateTodo”, []).controller(‘todoController’, function($scope) {
|
Thereafter, we initialize an array and a string. The todoItem property’s value would change as users type in the input box as we have used ng-model in it.
|
1
2
|
$scope.todo = [];
$scope.todoItem = “”;
|
The loadTodo method which is called as soon as the page is rendered with ng-init would retrieve an array that is saved as a string from localStorage (), parse it back as an array and save it in the todo property.
|
1
2
3
4
5
6
|
$scope.loadTodo = function() {
if (localStorage.todo) {
$scope.todo = JSON.parse(localStorage.todo);
}
}
|
The saveTodoItem method (which is called once the user clicks on the save icon) would add the to do item as typed by the user to the array that we retrieved from localStorage and save it back to localStorage. This todo array is important because we loop over it with ng-repeat in our view to display all to do list items.
|
1
2
3
4
5
|
$scope.saveTodoItem = function() {
$scope.todo.push($scope.todoItem);
$scope.todoItem = “”;
localStorage.todo = JSON.stringify($scope.todo);
}
|
The removeTodoItem method takes as a parameter the index of the to do list item in the todo array and, removes it from that array and saves the new array to localStorage.
|
1
2
3
4
|
$scope.removeTodoItem = function($index) {
$scope.todo.splice($index, 1);
localStorage.todo = JSON.stringify($scope.todo);
}
|
Finally, the editTodoItem method takes again as a parameter the index of the to do list item in the todo array, finds it in the DOM and saves its value to the el variable. Then, it sets the appropriate todo item’s value to what is contained in the el variable. We do this because the to do list item has a contenteditable attribute in our HTML view and users can change their value to whatever they wish. Once they are satisfied with the changes they have made, they just click on the edit(save) icon and we persist the changes.
|
1
2
3
4
5
|
$scope.editTodoItem = function($index) {
var el = document.getElementsByClassName(‘theItem’)[$index].innerHTML;
$scope.todo[$index] = el;
localStorage.todo = JSON.stringify($scope.todo);
}
|
Conclusion
If all is well, we get to end up with a simple but functional to do list app. We can even add more features to it and add it as a smartphone app with a hosted app service like ManifoldJS.
To test the application, you would have to have some kind of a server, running it through file:// would not give the desired output.
Tutorial Categories:
Tutorial Categories:
