AngularJS <script> Directive
- AngularJS alters the default behaviors of the <script> element.
- The content of the <script> element is a loaded with $templatecache, which means the template can be used by ngView, ngInclude or directives.
- The script element type is defined as text/ng-template.
- A template cache name must be assigned through the elements id which is used as directives by templateUrl.
- This directive executes at priority level 0.
Syntax for script directive in AngularJS:
|type||string||It specifies the type must be set to ‘text/ng-template’.|
|id||string||Denotes the cache name of the template.|
Sample coding for script directive in AngularJS:
Using script directive in AngularJS:
Code Explanation for script directive in AngularJS:
- The ng-app specifies the root element (e.g. <body> or <html> or <div> tags) to define AngularJS application.
- script tag defined with the type “text/ng-template”
- id=tempfile is the id of the script directive
- currenttemp is the file name of the element.
- temp-link is given for the current template link
- temp-content is the id of the element which is used to get the source from the currenttemp.
- nginclude directive is used to include the file of the “currenttemp”.
Sample Output for script directive in AngularJS:
- The current content is displayed in the output on page load.
- If the user click the end of the current content.
- The next template is displayed in the output.