Mastering Web Application

(Rick Simeone) #1

Displaying and Formatting Data


The ng-if directive is available only in the most recent version of
AngularJS: 1.1.x or 1.2.x.

Including blocks of content conditionally


The ng-include directive, while not directly acting as the if/else statement, can
be used to conditionally display blocks of dynamic, AngularJS-powered markup.
The discussed directive has a very nice property. It can load and conditionally
display partials based on a result of expression evaluation. This allows us to easily
create highly dynamic pages. For example, we could include different user edit
forms depending on the user's role. In the following code snippet we load a different
partial for users that have administrator role:


<div ng-include="user.admin && 'edit.admin.html' || 'edit.user.html'">
</div>

The ng-include directive is creating a new scope for each partial it
includes.

Additionally ng-include is the great tool that can be used to compose final pages
from smaller markup fragments.


The ng-include directive accepts an expression as its argument,
so you need to pass a quoted string if you plan to use a fixed value
pointing to a partial, for example, <div ng-include="'header.
tpl.html'"></div>.

Rendering collections with the ngRepeat directive


The ng-repeat directive is probably one of the most used and the most powerful
directives. It will iterate over a collection of items stamping out a new DOM element
for each entry in a collection. But the ng-repeat directive will do much more than
simply assuring the initial rendering of a collection. It will constantly monitor the
source of data to re-render a template in response to changes.

Free download pdf