Ten AngularJS Concepts for Beginners

This code snippet introduces 10 basic AngularJS  concepts for beginners by building a very simple application. The application enables users to maintain a to do list with basic add, edit, and remove features. Additional features include sorting, ability to mark each item as complete etc. In this application, following concepts are introduced:

1. angular.module, ng-app, and ng-controller: setting up the bare-bone structure of an AngularJS application
2. ng-model: two-way data binding
3. {{  }}: data binding expression
4. ng-disabled: enabling/disabling widgets
5. ng-show: controlling the visibility of widgets
6. ng-class: controlling the appearance of widgets
7. ng-click and ng-keypress: handling click and key press events
8. JSON: woking with JSON objects and collections
9. ng-repeat: rendering collections
10. ui-sortable: enabling sorting by dragging

Here is the final result of the application followed by the source code. You can play with the code and create your own version of the app @ jsfiddle.net.

HTML:

[html]
<div ng-app="ToDoApp" class="container list-container" >
<div ng-controller="ToDoController">

<input type="text" placeholder="Add new item" class="form-control"
ng-model="newItem" ng-keypress="newItemKeyPress($event)" ng-disabled="items.length >= 100" />

<h4><span>To Do </span><span ng-show="!isEmptyList()">({{getProgress()}}%)</span></h4>
<div ng-show="isEmptyList()">
No items in the list
</div>

<div ui-sortable ng-model="items" ng-show="!isEmptyList()">
<div ng-repeat="item in items track by $index" class="list-item" ng-class="{‘list-item-done’: item.isDone}">
<span><input type="checkbox" ng-model="item.isDone" /> </span>
<span ng-show="!item.editMode" ng-class="{‘list-item-done’: item.isDone}" >{{item.text}} </span>
<span ng-show="item.editMode"><input type="text" ng-model="item.text" ng-keypress="editItemKeyPress($event,$index)"/> </span>
<span class="glyphicon glyphicon-pencil" aria-hidden="true" ng-show="!item.isDone" ng-click="editItem($index)" ></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true" ng-click="removeItem($index)"></span>
</div>
</div>

</div>
</div>

[/html]

JavaScript:

[js]
var app = angular.module(‘ToDoApp’, [‘kendo.directives’,’ui.sortable’]);

function ToDoController($scope) {

$scope.items = [
{text: "Shopping", isDone: false, editMode: false},
{text: "Book flight", isDone: false, editMode: false},
{text: "Call Dad", isDone: false, editMode: false},
{text: "Catchup with Mash", isDone: false, editMode: false},
{text: "Create an angular app", isDone: true, editMode: false},
];

$scope.newItem = "";

$scope.newItemKeyPress = function(keyEvent) {
if (keyEvent.which === 13) {
$scope.addItem();
}
}

$scope.addItem = function () {
if($scope.newItem != "") {
$scope.items.push({text: $scope.newItem, isDone: false});
}

$scope.newItem = "";
};

$scope.editItem = function (index) {
$scope.items[index].editMode = !$scope.items[index].editMode;
};

$scope.editItemKeyPress = function(keyEvent,index) {
if (keyEvent.which === 13) {
$scope.items[index].editMode = false;
}
}

$scope.removeItem = function (index) {
$scope.items.splice(index, 1);
};

$scope.isEmptyList = function() {
return $scope.items.length == 0;
};

$scope.getProgress = function() {
var completedCount = 0;
var listSize = $scope.items.length;

for(i = 0; i < listSize; i++) {
if($scope.items[i].isDone) {
completedCount++;
}
}

return Math.round((completedCount*100)/listSize);
};
}
[/js]

CSS:

[css]
.list-container
{
padding:20px
}

.list-item
{
background-color: rgb(239,239,239);
padding: 5px;
margin: 5px;

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid lightgray;
/*cursor: move;*/

}

.list-item-done
{
background-color: rgb(204, 255, 153);
text-decoration: line-through;
}

[/css]