One of the themes that runs through AngularJS is just how naturally the underlying characteristics of HTML, CSS, and JavaScript have been coopted for web application development. As an example, since behaviors are created using JavaScript functions, you can create behaviors that are built on the capabilities provided by other behaviors in the same controller. In Listing 2-8, I have created a behavior that selects a CSS class based on the number of incomplete items in the to-do list.
Listing2-8. Building on Behaviors in the todo.html File
<!DOCTYPE html>
<html ng-app=”todoApp”>
<head>
<title>TO DO List</title>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script src=”angular.js”></script>
<script>
var model = {
user: “Adam”,
items: [{ action: “Buy Flowers”, done: false },
{ action: “Get Shoes”, done: false },
{ action: “Collect Tickets”, done: true },
{ action: “Call Joe”, done: false }]
};
var todoApp = angular.module(“todoApp”, []);
todoApp.controller(“ToDoCtrl”, function ($scope) {
$scope.todo = model;
$scope.incompleteCount = function () {
var count = 0;
angular.forEach($scope.todo.items, function (item) {
if (!item.done) { count++ }
});
return count;
}
$scope.warningLevel = function () {
return $scope.incompleteCount() < 3 ? “label-success” : “label-warning”;
}
});
</script>
</head>
<body ng-controller=”ToDoCtrl”>
<div class=”page-header”>
<h1>
{{todo.user}}’s To Do List
<span class=”label label-default” ng-class=”warningLevel()” ng-hide=”incompleteCount() == 0″>
{{incompleteCount()}}
</span>
</h1>
</div>
<!– …elements omitted for brevity… –>
</body>
</html>
I have defined a new behavior called warningLevel, which returns the name of a Bootstrap CSS class based on the number of incomplete to-do items, which is obtained by calling the incompleteCount behavior. This approach reduces the need to duplicate logic in the controller and, as you’ll see in Chapter 25, can help simplify the process of unit testing.
I have applied the warningLevel behavior using the ng-class directive, as follows:
…
<span class=”label” ng-class=”warningLevel()” ng-hide=”incompleteCount() == 0″>
…
This directive applies the CSS class returned by the behavior, which has the effect of changing the color of the label in the HTML document, as shown in Figure 2-7. (I describe the complete set of AngularJS directives in Part 2 and show you how to create your own in Chapters 15-17.)
■ Tip Notice that this span element has two directives, each of which relies on a different behavior. You can combine behaviors and directives freely to get the effect you require in an application.
It may be hard to make out in the print edition, but the effect is that the label is shown in green when there are three or fewer items and in orange when there are more.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.