AngularJS learning notes (6) --- instructions and angularjs learning notes

Source: Internet
Author: User

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:

  • MVC
  • Modularity and dependency Injection
  • Bidirectional data binding
  • Command
Command Module

This module describes the usage and principles of commands, including:

  • Parse the simplest command hello: matching mode restrict
  • Parse the simplest commands hello: template, templateUrl, $ templateCache
  • Parse the simplest commands hello: replace and transclude
  • Comile and link (Operation element, tianjian CSS style, binding event)
  • Interaction between commands and controllers
  • Interaction between commands
  • Scope type and independent scope
  • Binding policy of scope
  • AngularJS built-in commands
  • Strength Analysis Expander
  • Instance resolution Accordion
  • Command running principle: compile and link
  • Summary: Essential ERP system UI Components
  • Summary: Essential UI components for Internet/e-commerce systems
  • Third-party instruction library angular-ui
  • Overview of the origins and principles of directive
Parse the simplest command hello

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.

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.