This section describes the templateurl attributes in the command:
The templateurl property value is a URL path pointing to an HTML template. The HTML template will fill in (or replace) The instruction content:
For example, in the previous article, we changed the original template attribute to the templateurl attribute:
Method 1:
HTML:
<! Doctype HTML> <HTML ng-APP = 'dirappmodule'>JS:
var dirAppModule = angular.module(‘dirAppModule‘,[]);dirAppModule.directive(‘cdHello‘,function(){ return { restrict:‘EAC‘, replace:true, templateUrl:‘hello.html‘ }});Hello.html:
The result is the same as that obtained by using template:
* In this way, the templateurl attribute must be run in the environment, and local files cannot be used.
Method 2:
When the template file is large and loading takes some time, the user may first see the identifier and wait until the template is loaded. to avoid this problem, use the following methods:
HTML:
<! Doctype HTML> <HTML ng-APP = "dirappmodule">JS:
/* 20.3 command */var dirappmodule = Angular. module ('dirappmodule ', []); dirappmodule. directive ('cdhel', function () {return {restrict: 'eac', templateurl: 'hello.html ', replace: true }});Add a script tag directly on the page. The Script Type attribute is text/ng-template. The scriptid. The value of templateurlindicates the scripttag id., as shown in the example of hello.html
Note that this script tag does not send HTTP requests.
Method 3:
HTML:
<! Doctype HTML> <HTML ng-APP = "dirappmodule">JS:
/* 20.4 command */var appmodule = Angular. module ('dirappmodule ', []); appmodule. run (function ($ templatecache) {export templatecache.put('hello.html ','Note: All modules created through angular have a run method that accepts a function as a parameter. This function will be executed.
The second parameter is the HTML string, that is, the template content.
This method is often used when the template content is obtained asynchronously through $ HTTP. Then, the template is placed in $ templatecache for later use.
Full: https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/20.2%20%E6%8C%87%E4%BB%A4
Https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.3%20%E6%8C%87%E4%BB%A4.html
Https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.4%20%E6%8C%87%E4%BB%A4.html
Https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js
Angular Study Notes (30)-Instructions (3)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
