AngularJS Application Development Thinking 1: declarative Interface

AngularJS Application Development Thinking 1: declarative Interface
Rewrite example: templates, commands, and views AngularJS has the most notable feature of generating pages with dynamic behavior using static HTML documents. In the previous small clock example, we use AngularJS templates to rewrite the code. The example has been embedded into → _ →: the HTML file looks like a common HTML file, but it only has some special tags (for example: ng-app, ez-clock, etc ). In Angular, This HTML file is called a template. A tag like ng-app is called an instruction. The template instructs AngularJS to perform necessary operations through instructions. For example, the ng-app command is used to notify AngularJS to automatically guide the application, and the ez-clock command is used to notify AngularJS to generate the specified clock component. When AngularJS starts an application, it will parse the template file through a compiler, And the generated result is: View: AngularJS we define two parts: Template (HTML file containing instructions) angularJS assembles the two parts to generate the final view. Have you understood the meaning of the framework? Using commands to encapsulate JavaScript code we use a custom tag ez-clock in the template, and it becomes an active clock. What happened during this period? It's definitely not a web browser. It doesn't know what ez-clock is. Angular. min. js introduces the basic angularJS library, which loads HTML documents in the browser and establishes the DOM tree, and then performs the following operations: find the DOM node with the ng-app attribute, use this node as the root node, search for custom commands, and find that ez-clock calls the implementation function of the ez-clock command (Directive factory) according to our definition, the ez-clock expansion operation is as follows: Use a div element to replace this custom tag to create a timer, when a timer is triggered, a non-HTML standard tag such as innerTextez-clock of the div element is refreshed. In AngularJS, it is called directive/directive, that is, when you see it, the basic framework needs to be explained in order to expand into something that the browser can understand (HTML elements and scripts), and this interpretation process is called compilation. It can be seen that the AngularJS framework requires clearer separation of HTML documents and JavaScript code. JavaScript code is usually mixed in HTML documents and needs to be encapsulated in the form of instructions, the template and command implementation code are assembled and run by the Basic Framework. Using commands as APIS to encapsulate DOM operations into instructions makes it easier to divide the work and reuse code. AngularJS clearly defines the components of a WEB application. In this way, in a team, someone can implement instructions, someone can develop templates, and others can do what they are good, higher efficiency and lower cost. Of course, from the perspective of compiling HTML templates on the interface, commands such as ez-clock are more semantic than div, making the template easier to maintain, so that the implementation upgrade of commands does not affect the template, this is not a small benefit. Unlike interfaces like objects and functions that we are familiar with, commands are a new type of API that provides the ability to embed dynamic behavior in static HTML files: defining Your Own commands AngularJS built-in commands cannot fully meet the actual development needs. We usually need to define our own commands: Enhancing the behavior of standard DOM elements, for example, if you want to drag a DOM element, you can write it as follows: <p ez-draggable = "true">... </p> the ez-draggable command gives DOM elements the ability to drag and drop. For example, if you want an image cropping function, you can write <ez-photoshop src = "a.jpg"> </ez-photoshop> using the ez-photoshop command, we define a web component that contains interactive behaviors. Encapsulating other component libraries is not encouraged by AngularJS, but there is indeed a strong demand. Starting point: declarative based on the previous example, we can easily feel an Important Thinking Mode for application development using AngularJS: starting with constructing a declarative interface. In fact, I guess this is also the initial motivation for Misko to develop AngularJS. Earlier versions of Flex, WPF, and Firefox XUL are more or less inspired by Misko. When using AngularJS for front-end development, you should always start by constructing a declarative Interface Template. If the ready-made commands are not enough, define your own commands and implement your own commands. This is an iterative process. Remember, commands are a new type of API that uses interface declaration as a requirement to guide our code encapsulation.