Home > Developer > Web Develop
AngularJS learning notes (6) --- instructions and angularjs learning notes
Four core features of AngularJS-Commands
In the previous content, the four core features of AngularJS are as follows:
This module describes the usage and principles of commands, including:
Let's first look at a practical example:
Html
<!doctype html> Js
var myModule = angular.module("MyModule", []);myModule.directive("hello", function() { return { restrict: 'AEMC', template: '<div>Hi everyone!</div>', replace: true }});
Effect
This is the simplest directive Command, which has three configuration items: restrict, template, replace
Here we use four matching methods to implement the hello command, namely AEMC, and then use the statements in the template to replace the hello command.
template:'<div>Hi everyone!</div>'
1. parse the simplest command hello: matching mode restrict There are four matching modes for ACME
- We recommend that you use the element and attribute method, that is, the EA Method for matching.
- Note that there must be a space before and after M (comment mode). Otherwise, the matching will fail.
- When you need to create instructions with your own template, use the element name to create
- When you need to add functions for existing HTML tags, use the attribute creation method.
2. parse the simplest commands hello: template, templateUrl, $ templateCache In the above example, we use the template, which is an html string, but this is not very good. If there is a lot of content, the string will be too long, in addition, JavaScript may involve a large number of splicing tasks, which is less efficient.
template:'<div>Hi everyone!</div>'
Therefore, we introduce templateUrl to introduce an independent html file as a template, which makes it easier to write
templateUrl:'hello.html'
There is also a $ templateCache
Var myModule = angular. module ("MyModule", []); // when the syringe loads all modules, this method executes myModule once. run (function ($ templateCache) {$ templateCache. put ("hello.html", "<div> Hello everyone !!!!!! </Div> ") ;}); myModule. directive ("hello", function ($ templateCache) {return {restrict: 'aecm ', template: $ templateCache. get ("hello.html"), replace: true }});
We can see from the literal meaning that the cache is to be cached, so we use the run method. After loading the module, we first use $ templateCache. put to cache a piece of html code.
When you need to write a template, use the $ templateCache. get method to retrieve the required code.
3. parse the simplest commands hello: replace and transclude
If replace is set to true, the html code in the template will appear in the html instead of the hello tag. If it is set to false, the hello tag will not be replaced. The html still contains a hello tag.
Transclude is an option that can implement command nesting. We can nest a label in the hello tag. Here is a small example:
Html
<! Doctype html>
Js
var myModule = angular.module("MyModule", []);myModule.directive("hello", function() { return { restrict:"AE", transclude:true, template:"<div>Hello everyone!<div ng-transclude></div></div>" } });
We set transclude to true, and then there is such a sentence in the template:
<div ng-transclude></div>
This will determine where the content originally nested in the hello tag is displayed.
So the final result is
Command execution mechanism-compile and link Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
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
