Angular Study Notes (30)-Instructions (3)

Source: Internet
Author: User
Tags script tag

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.