In this code lab you will going to build the Hello World of the JavaScript frameworks, ToDo MVC
bower to install the angular dependencyangular dependency</body> tag, for performance reasons.ng-app directive to the top element in the page1 + 1 will do)index.html in a browser and check the result. If you got back what you entered as an expression AngularJs is not bootstraped. Try again!src inside the project folderapp.module.js inside a newly created folder
(function(){
angular.module("toDoApp", []);
}());ng-app directiveapp.module.js fileindex.html and the result should be the samebody to have a clean slate.app.controller.js inside a newly created folder
(function (module) {
var ToDoCtrl = function () {
var vm = this;
vm.todo = {
user: "Radu"
};
};
module.controller("ToDoCtrl", ToDoCtrl);
}(angular.module("toDoApp")));ng-controller directive to the body tag and set its value to the controller's name.app.controller.js fileh1 tag as the first element in the body and make sure it dispalys Radu's To Do Listitems property to the vm.todo variable:
[
{"action": "Make slides", "done": false},
{"action": "Travel to ING", "done": false},
{"action": "Prepare room", "done": false},
{"action": "Order pizza", "done": false}
]
index.html add a table that will show our todos
<table>
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.todo.items">
<!--remove te spaces from the expression.-->
<td> { { item . action } }</td>
<td><input type="checkbox" ng-model="item.done"></td>
</tr>
</tbody>
</table>controller
vm.addNewItem = function (actionText) {
vm.todo.items.push({action: actionText, done: false});
};
index.html, above the table add
<input ng-model="actionText"/>
<span>
<button ng-click="vm.addNewItem(actionText)">Add</button>
</span>Add button should add items to the listThe application looks pretty bad and for sure by now some of you started to improve it :)
bower to install and save the bootstrap-css dependencybootstrap.css and bootstrap-theme.css files inside the head tagBootstraph1 inside a div with a class of page-headerdiv with a class of panel.table, an input and a span, inside a div with a class of input-controlinput a class of form-controlspan a class of input-group-btnbutton a class of btn btn-defaulttable a class of table table-stripedChange the ng-repeat directive to look like this:
item in vm.todo.items | filter: {done: false}Change the ng-repeat directive again by adding an orderBy filter:
item in vm.todo.items | filter: {done: false} | orderBy: 'action'Let's create a custom filter that will allow us to show completed todos
app.filter.js inside the src folder
(function (module) {
var checkedItems = function () {
return function (items, showComplete) {
var resultArr = [];
angular.forEach(items, function (item) {
if (item.done === false || showComplete === true) {
resultArr.push(item);
}
});
return resultArr;
};
};
module.filter("checkedItems", checkedItems);
}(angular.module("toDoApp")));
index.htmlng-repeat directive to look like thisitem in vm.todo.items | checkedItems: showComplete | orderBy: 'action'
table add the following html snippet
<div class="checkbox-inline">
<label>
<input type="checkbox" ng-model="showComplete"> Show Complete
</label>
</div>It will be nice to see the number of todos left to complete with a warning color when we have too many pending
h1 tag
<span class="label label-default" ng-hide="vm.incompleteCount() === 0" ng-class="vm.warningLevel()">
<!-- remove the spaces inside the expression -->
{ { vm.incompleteCount() } }
</span>controller
vm.incompleteCount = function () {
var count = 0;
angular.forEach(vm.todo.items, function (item) {
if (!item.done) {
count++;
}
});
return count;
};
vm.warningLevel = function () {
return vm.incompleteCount() < 3 ? "label-success" : "label-warning";
};It is time to get rid of the todos from the controller and obtain them from a service
app.service.js inside the src folder(function (module) {
var toDoService = function () {
var getItems = function () {
return [
{"action": "Make slides", "done": false},
{"action": "Travel to ING", "done": false},
{"action": "Prepare room", "done": false},
{"action": "Order pizza", "done": false}
];
};
return {
getItems: getItems
};
};
module.factory("toDoService", toDoService);
}(angular.module("toDoApp")));items property from the vm.todo object inside the controllertoDoService as a dependency to the controller. It is just a parameter in the controller functionvm.todo.items = toDoService.getItems(); as the list line inside the controller functionservice file (find the correct position) inside index.html.Next, let's read the todo items from a json file using the $http service
The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.
data folder in the project root foldertodos.json file with the following content
[
{"action": "Make slides", "done": false},
{"action": "Travel to ING", "done": false},
{"action": "Prepare room", "done": false},
{"action": "Order pizza", "done": false}
]
$http service as a dependency to the toDoServicegetItems service
var getItems = function () {
return $http.get("/data/todos.json");
};
prommise now so we need to change something in the controller
toDoService.getItems().then(function (response) {
vm.todo.items = response.data;
});
Refreshing the page will not work now. We need serve the site from an web server
From command line start live-server
$ live-server Serving "..." at http://127.0.0.1:8080 Ready for changes
http://127.0.0.1:8080