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脚本：