CHApTer 5 ■ DIreCTIveS
ngInclude
This handy directive lets you include the contents of another file within your document. Take, for example, the very
small file in Listing 5-3, which we have named include-me.html.
Listing 5-3. include-me.html
Thanks for visiting our website!
Now, let’s include this file’s output at the bottom of includes-in-action.html (see Listing 5-4).Listing 5-4. includes-in-action.html
<!DOCTYPE html>
Includes in Action
You should see the inluded files contents below
This directive is easy to use, but there is one potential pain point for the Angular JS beginner. Be aware that
ngInclude expects to be supplied with an Angular JS expression. Remember, an Angular JS expression is a subset of
JavaScript, and it follows all the usual rules. A string must either be single-quoted or double-quoted. As the Angular
JS expression is itself double-quoted, the string you provide within it must be single-quoted. This is why we use
"'include-me.html'". Using "include-me.html" simply wouldn’t work.
■ Note The ngInclude directive has additional options, which we will examine further when I talk about animations,
in Chapter 9.
ngShow and ngHide
The ngShow directive will show or hide the HTML element upon which it is defined. The element is shown or hidden
by adding or removing a predefined AngularJS class called ng-hide. The p element in the following example will be
shown only when $scope.correctAnswer is true.
That answer is correct!
If we assume that $scope.correctAnswer is false; looking at the source code of the HTML page would reveal
that the ngHide class has been added to the p element by the AngularJS framework.
That answer is correct!