Of Stack

Introduction to AngularJS HTML compiler

  • 2020-03-30 04:31:44
  • OfStack

An overview of

AngularJS's HTML compiler lets browsers recognize new HTML syntax. It lets you associate behavior with HTML elements or attributes, and it even lets you create new elements with custom behavior. AngularJS calls this behavior extension an "instruction"

HTML has a lot of declarative structure to control the format when writing static pages. For example, if you want to center something, you don't have to tell the browser to "find the midpoint of the window and combine it with the middle of the content." All you need to do is add an align="center" attribute to the element where the content is centered. This is the power of declarative languages.

But declarative languages are also powerful in ways that you can't, in part because you can't use them to make the browser recognize new syntax. For example, if you don't want the content to be centered, but to the left of 1/3, it won't work. So we need a way for the browser to learn the new HTML syntax.

Compilation happens on the browser side; The server side does not participate in any of these steps and does not precompile.

The compiler (complier)

The compiler is a service provided by AngularJS that traverses the DOM to find properties associated with it. The whole compilation process is divided into two stages.

1. Compile: traverse the DOM and collect all relevant instructions to generate a link function.

2. Link: bind an instruction to a scope to generate a dynamic view. Any changes to the scope model are reflected in the view, and any user actions on the view are also reflected in the scope model. This makes the scope model the only thing you care about in your business logic.

Some instructions, such as ng-repeat, clone each DOM element in the data set once. Splitting the compilation process into compilation and linking phases improves overall performance because the cloned templates only need to be compiled once and then linked to their respective model instances.

instruction

The directive indicates "what should be done when the associated HTML structure enters the compilation phase." Instructions can be written in element names, attributes, CSS class names, comments. Here are several examples of using the ng-bind directive in the same way. 



<span ng-bind="exp"></span>

<span class="ng-bind: exp;"></span>

<ng-bind></ng-bind>

<!-- directive: ng-bind exp -->

An instruction is essentially just a function that needs to be executed when the compiler compiles to the relevant DOM. You can find more detail in the instruction the API documentation (link: http://www.angularjs.cn/category/docs/api).

The following is an instruction to make an element dragable. Note < Span> The draggable property in the element.

Index.html: 



<!doctype html>

<html ng-app="drag">

  <head>

    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body>

    <span draggable>Drag ME</span>

  </body>

</html>

Script. Js: 



angular.module('drag', []).

directive('draggable', function($document) {

    var startX=0, startY=0, x = 0, y = 0;

    return function(scope, element, attr) {

      element.css({

       position: 'relative',

       border: '1px solid red',

       backgroundColor: 'lightgrey',

       cursor: 'pointer'

      });

      element.bind('mousedown', function(event) {

        startX = event.screenX - x;

        startY = event.screenY - y;

        $document.bind('mousemove', mousemove);

        $document.bind('mouseup', mouseup);

      });
      function mousemove(event) {

        y = event.screenY - startY;

        x = event.screenX - startX;

        element.css({

          top: y + 'px',

          left:  x + 'px'

        });

      }
      function mouseup() {

        $document.unbind('mousemove', mousemove);

        $document.unbind('mouseup', mouseup);

      }

    }

 });

You can make any HTML element implement this new behavior by adding the draggable attribute. The beauty of our improvements is that we've given the browser new capabilities. We have extended the browser's ability to understand new behaviors and syntax in a way that is natural to developers who are familiar with the rules of HTML.

Understand the view

There are many templating systems on the web. Most of them are "static character templates and data bindings, generate new characters, and then insert the innerHTML into the page element."

This means that any changes in the data will cause the data to be recombined with the template to generate new characters that are inserted into the DOM. Some of the problems are the need to read user input and combine it with model data, the need to override user input, the need to manually manage the entire update process, and the lack of a rich representation.

AngularJS is different. The AngularJS compiler USES the DOM with instructions, not the string template. It returns a link function that, when combined with the scope model, generates a dynamic view. The process of binding the view to the model is "transparent." The developer doesn't need to do anything to update the view. And the application doesn't use innerHTML, so we don't have to override the user's input. More specifically, Angular directives can use not only string bindings, but also structures that indicate behavior.

AngularJS compilation generates a "stable DOM." This means that instances of DOM elements bound to the data model do not change during the lifetime of the binding. This also means that you can get an instance reference to a DOM element in your code and register events without worrying that the reference will be lost when the template and data are combined.

Related articles: