ANGULARJS Application Development Thinking 1: Declarative interface

This blog post before the previous article: http://www.cnblogs.com/xuema/p/4335180.html

Overriding examples: templates, directives, and views

The most notable feature of Angularjs is that with static HTML documents, you can generate pages with dynamic behavior.

Or the previous small clock example, we use the Angularjs template to rewrite it, and the example has been embedded in →_→:

Example Address: http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

HTML files look like normal HTML, but there are a few more special tags (such as ng-app,ez-clock, etc.). In angular, this HTML file is called a template.

Ng-app Such a mark we call the instruction. The template instructs the Angularjs to perform the necessary actions through instructions. For example: The ng-app instruction is used to notify Angularjs to automatically boot the application, and the ez-clock instruction notifies ANGULARJS to generate the specified clock component.

When Angularjs launches the app, it processes the template file through a compiler parsing, resulting in: view:

We defined two parts: the template (the HTML file that contains the instruction) and the instruction implementation (JavaScript file), which angularjs the two parts together to produce the final view.

Do you have a little understanding of the meaning of the framework?

Encapsulating JavaScript code with directives

We used a custom label ez-clock in the template, and it became a moving clock, what happened during that time?

It's definitely not a browser, it doesn't know what ez-clock is.

Angular.min.js introduces the basic Angularjs library, which after the browser loads the HTML document and builds the DOM tree, do the following:

1. Find DOM node with Ng-app attribute
2. With this node as the root node, search for custom directives and discover Ez-clock
3. Invoke the implementation function of the ez-clock instruction (instruction class factory) to expand

According to our definition, the Ez-clock operation is as follows:

1. Replace the custom label with a DIV element
2. Create a timer that refreshes the innertext of the DIV element when the timer is triggered

Ez-clock is a non-HTML standard tag that, in Angularjs, is referred to as instruction/directive, meaning that the underlying framework needs to interpret it in order to expand into something that the browser can understand (HTML elements and scripts). And this explanation of the process is called: compiling.

As can be seen, the ANGULARJS framework requires a clearer segmentation of HTML documents and JavaScript code, often in the form of JavaScript code that is intermixed with HTML documents, which need to be encapsulated as directives, while templates, instruction implementation code, and so on, are assembled and run by the infrastructure framework.

Consider directives as APIs

The DOM operations are encapsulated into instructions, making it easier to work with code reuse.

Because ANGULARJS defines a part of a Web application more clearly, it is possible for someone in a team to be responsible for implementing the instructions, someone who is responsible for developing the template, doing what is good for them, more efficient and less expensive.

Of course, from the point of view of writing an interface HTML template, such as ez-clock, such as the command is more semantic than Div, make the template easier to maintain, so that the implementation of the instruction upgrade does not affect the template, which is not a small benefit.

Unlike the interfaces we are familiar with, such as objects and functions, directives are a new type of API that provides the ability to implant dynamic behavior in a static HTML file:

Define your own directives.

Angularjs built-in directives do not fully meet the needs of actual development, usually we need to define our own directives:

• Enhancing the behavior of standard DOM elements

For example, if you want a DOM element to be draggable, you can write:

1. <p ez-draggable="true">... </p>

With the ez-draggable directive, we give DOM elements the ability to drag and drop.

• Custom components

For example, I want a picture clipping function, then you can write this:

1. <ez-photoshop src="a.jpg"></ez-photoshop>

With the Ez-photoshop directive, we define a Web component that contains interactive behavior.

• Encapsulating other component libraries

This is not the direction of angularjs encouragement, but there is a strong demand indeed.

Starting point: Declarative

Based on the previous example, it is easy to feel an important thinking pattern for application development using ANGULARJS: Start with a declarative interface.

In fact, I suspect this is also the original motive of Misko development angularjs. Earlier flex, WPF, and Firefox xul were more or less inspired by Misko.

When using Angularjs for front-end development, you should always start by constructing declarative interface templates, and if the ready-made instructions are not enough, define your own instructions and implement your own instructions. This is an iterative process.

Remember, directives are new APIs that guide our code encapsulation with the declarative use of interfaces as a requirement.

Reference: http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

ANGULARJS Application Development Thinking 1: Declarative interface