What is AngularJS? Introduction to AngularJS_AngularJS

What is AngularJS?

AngularJS is a structural framework designed for dynamic WEB applications. It allows you to use HTML as a template language, and by extending the syntax of HTML, you can build your application components more clearly and concisely. Its innovation is that it uses data binding and dependency injection to save you from writing a lot of code. These are all implemented through browser-side Javascript, which also makes it perfectly integrated with any server-side technology.

AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a good declarative language designed for static text display, but it is weak when it comes to building WEB applications. So I did some work (tricks if you will) to get the browser to do what I wanted. formatDate

Usually, we use the following technologies to solve the shortcomings of static web page technology in building dynamic applications:

1. Class library - A class library is a collection of functions that can help you write WEB applications. It's your code that takes control, and it's you who decides when to use the library. Class libraries include: jQuery, etc.

2. Framework - A framework is a special, already implemented WEB application. You only need to fill it with specific business logic. The framework here plays a leading role, calling your code according to specific application logic. Frameworks include: knockout, sproutcore, etc.

AngularJS uses a different approach, trying to make up for the shortcomings of HTML itself in building applications. AngularJS enables browsers to recognize the new syntax by using structures we call directives. For example:

1. Use double curly braces {{}} syntax for data binding;
2. Use DOM control structures to iterate or hide DOM fragments;
3. Support forms and form validation;
4. Ability to associate logical codes to relevant DOM elements;
5. Ability to group HTML into reusable components.

End-to-end solution

AngularJS attempts to be an end-to-end solution for WEB applications. This means that it is not just a small part of your WEB application, but a complete end-to-end solution. This will make AngularJS very "opinionated" (original text is opinionated, meaning there are not many other ways) when building a CRUD (add Create, query Retrieve, update Update, delete Delete) application. However, even though it is "stubborn", it still ensures that its "stubbornness" is only at the starting point when you build the application, and you still have the flexibility to change. Some of the outstanding features of AngularJS are as follows:

1. Everything that may be used to build a CRUD application includes: data binding, basic template identifiers, form validation, routing, deep linking, component reuse, and dependency injection.
2. Testing includes: unit testing, end-to-end testing, simulation and automated testing framework.
3. Seed application with directory layout and test scripts as a starting point.

The cuteness of AngularJS

AngularJS simplifies application development by presenting developers with a higher level of abstraction. As with other abstraction techniques, some flexibility is lost. In other words, not all applications are suitable for AngularJS. AngularJS is primarily concerned with building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications. But to understand what is suitable for building with AngularJS, you need to understand what is not suitable for building with AngularJS.

For example, games, graphical interface editors, applications with frequent and complex DOM operations are very different from CRUD applications, and they are not suitable to be built with AngularJS. In situations like this it might be better to use some lighter, simpler technology like jQuery.

A simple AngularJS example

The following is a typical CRUD application containing a form. The form value is first validated and then used to calculate the total value, which is formatted into a local style. Here are some common concepts among developers that you need to understand first:

1. Associate the data model (data-model) to the view (UI);
2. Write, read, and verify user input;
3. Calculate new values ​​according to the model;
4. Localize the output format.

index.html:

Copy code The code is as follows:

   
       
       
   
   
       

            Invoice:
           

           

           
               
               
                   
                   
               
           

Quantity	Cost

           

---

            Total: {{qty * cost | currency}}
       

   

script.js:

复制代码 代码如下:

function InvoiceCntl($scope) {
    $scope.qty = 1;
    $scope.cost = 19.95;
}

end-to-end test:

复制代码 代码如下:

it('should show of angular binding', function() {
    expect(binding('qty * cost')).toEqual('$19.95');
    input('qty').enter('2');
    input('cost').enter('5.00');
    expect(binding('qty * cost')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

运行效果：

复制代码 代码如下:

Invoice:
Quantity  Cost
Total: {{qty * cost | currency}}

试一下上面这个例子，然后我们一起来看下这个例子的工作原理。 在``标签里, 我们用一个`ng-app`标识符标明这是一个AngularJS应用。这个`ng-app`标识符会使AngularJS**自动初始化**(auto initialize)你的应用。 我们用``标签来加载AngularJS脚本：

复制代码 代码如下:

Quantity:
Cost:

The widget of this input box looks very ordinary, but if you realize the following points, it will be extraordinary:

1. When the page is loaded, AngularJS will generate variables with the same name according to the model name (qty, cost) declared in the widget. You can think of these variables as M (Model) in the MVC design pattern;

2. Note that the input in the widget above has special abilities. If you have not entered data or the entered data is invalid, the input box will automatically turn red. This new feature of the input box makes it easier for developers to implement common field validation functions in CRUD applications.

Finally, we can take a look at the mysterious double braces {{}}:

Copy code The code is as follows:

Total: {{qty * cost | currency}}

This {{expression}} tag is AngularJS data binding. The expression can be a combination of expression and filter ({{ expression | filter }}). AngularJS provides filters to format input and output data.

In the above example, the expression in {{}} tells AngularJS to multiply the data obtained from the input box, then format the multiplication result into the local currency style, and then output it to the page.

It is worth mentioning that we neither called any AngularJS methods nor wrote any specific logic like using a framework, we just completed the above functions. The reason behind this implementation is that the browser has done more work than before to generate static pages, so that it can meet the needs of dynamic WEB applications. AngularJS lowers the threshold for developing dynamic WEB applications to the point where no class library or framework is required.

AngularJS’s “Zen Tao (Concept)”

Angular believes that when building a view (UI) and writing software logic at the same time, declarative code is much better than imperative code, although imperative code is very suitable for expressing business logic.

1. Decoupling DOM operations and application logic is a very good idea, which can greatly improve the adjustability of the code;
2. It is a very, very good idea to treat testing and development equally. The difficulty of testing depends to a large extent on the structure of the code;
3. Decoupling the client and server is a particularly good practice, which enables parallel development on both sides and enables code reuse on both sides;
4. If the framework can guide developers throughout the entire development process: from designing UI, to writing business logic, to testing, it will be of great help to developers;
5. It is always good to "reduce complexity to simplicity and reduce complexity to nothing".

AngularJS can free you from the following nightmares:

1. Use callbacks: The use of callbacks will disrupt the readability of your code and make your code fragmented, making it difficult to see the original business logic. Removing some common code, such as callbacks, is a good thing. Drastically reducing the code you have to write due to the design of the JavaScript language allows you to see the logic of your application more clearly.

2. Manually write code to manipulate DOM elements: Manipulating DOM is a very basic part of AJAX applications, but it is always "clunky" and error-prone. The UI interface described in a declarative manner can change as the application state changes, freeing you from writing low-level DOM manipulation code. In most applications written with AngularJS, developers no longer need to write code to manipulate the DOM themselves, but you can still write it if you want.

3. Reading and writing data on the UI interface: A large part of AJAX applications is CRUD operations. A classic process is to organize the data on the server side into internal objects, and then compile the objects into HTML forms. After the user modifies the form, the form is verified. If there is an error, an error is displayed, and then the data is reorganized into an internal object, and then returned to the server. . There are too many codes that need to be written repeatedly in this process, making the code always seem to describe the entire execution process of the application rather than the specific business logic and business details.

4. You need to write a lot of basic code before you start: Usually you need to write a lot of basic code to implement a "Hello World" application. With AngularJS, it will provide some services that make it easy for you to officially start writing your application, and these services are automatically added to your application through a Guice-like dependency-injection dependency injection. Allows you to quickly enter the specific development of your application. In particular, you can also fully grasp the initialization process of automated testing.