Search within TutorialsPark

AngularJS Template Directives


Learn how to use AngularJS Built-in Template Directives of ng-include, ng-switch and ng-cloak.


AngularJS Template Directives : Partial Views

The AngularJS Directive of ng-include is used to get a fragment of HTML block from an outside source, and process the directives within in and Add to the Main Document. The HTML fragments are called as Partial Views

: AngularJS Partial Views HTML Fragments


Next we include the fragment defined in the last part within the main Document, using directive ng-include, it load and evaluates the content of the table within the main document.

The Directive ng-include supports three configuration parameters as specified in the table below.

Table : AngularJS Values of Build-in ng-repeat Values

Name Description
src To specify the URL of the external content to be loaded.
onload To set an expression that should be processed when the content gets loaded.
autoscroll To set whether AngularJS should scroll the viewport when the content gets loaded.

Example: AngularJS Partial Views using ng-include Directives

Give it a TRY! » Note: An Ajax request is made to fetch the file,

AngularJS Partial Views : Setting Partial Views Dynamically.

The demo in last part was used to fetch just one external fragment, but the directive ng-include can be used to fetch multiple fragments and alternate between them dynamically.

In the demo, we use a HTML fragment containing a list, a behaviour showFragment is used to show one of the two fragments, a variable called displayList when set to true displays the list fragment.

Example: Angular Partial Views Setting Partial Views

Give it a TRY! » Note: AngularJS binding feature keeps track of the value of displayList and shows fragment.


AngularJS Controller : Using Directive ng-include as an Attribute

The AngularJS Directive of ng-include previous examples were in form of element directives, but we have an option of using it as attribute as well.

In the demo, we use a div element and replace the attribute src with directive ng-include and set its value as showFragment(), the attribute onload has a function to execute when loading is complete

Example: Angular JS Controllers Getting Keys along with Data

Give it a TRY! » Note:The net is effect is same as the last example, but the directive is in form of attribute


AngularJS Partial Views : Swapping Elements using ng-include Directives

The AngularJS Directive of ng-include can be used to control fragments, but inorder to switch in between different fragments already within the document, we need to use the directive ng-switch

In the demo, the directive ng-switch is used along with attribute on, value of which is an expression which is checked to decide what should be shown. In the current case its data.mode

The directive ng-switch-when is applied on the element when the value within the attribute is same as the result of expression within attribute on. And ng-switch-default sets the default content, when nothing is specified.

Example: AngularJS Template Directives Using Built-in Directives

Give it a TRY! » Note: Click on the radio button to set different layout for the data, the swapping is dynamic in nature.


AngularJS Directives : Hide Unevaluated Expressions using ng-cloak Directive.

The are times when the connectivity or processing is slow, AngularJS directive of ng-clock lets you hide the content until the resources are loaded or processing is complete using CSS styles.

The directive ng-cloak can be used body element, so that it is applicable to all elements, or even on specific elements.The CSS class is removed when resources are loaded or processing is complete.

Example: AngularJS Directives Hide Unevaluated Expression using ng-cloak Directive

Give it a TRY! » Note: It recommended to used the directive with specific elements.