What is AngularJS？ AngularJS profile
- 2020-03-30 04:31:50
- OfStack
What is a AngularJS & # 63;
AngularJS is a framework designed for dynamic WEB applications. It lets you use HTML as a template language, and by extending the syntax of HTML, you can build your application components more clearly and succinctly. What's new about it is that with data binding and dependency injection, you don't have to write a lot of code. This is all implemented through browser-side Javascript, which makes it perfectly compatible with any server-side technology.
AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a great declarative language for static text presentation, but it's a bit of a drag when it comes to building WEB applications. So I did some work (a trick, you might say) to get the browser to do what I wanted. formatDate
In general, we address the shortcomings of static web technologies in building dynamic applications by:
1. Class library - a class library is a collection of functions that help you write WEB applications. It's your code that takes the lead, and it's up to you to decide when to use the libraries. Class library: jQuery and so on
2. Framework - a framework is a special, implemented WEB application that you just need to populate with specific business logic. This is where the framework takes the lead, calling your code based on specific application logic. Frameworks include knockout, sproutcore, etc.
AngularJS takes a different approach, trying to compensate for the shortcomings of HTML itself in building applications. AngularJS lets the browser recognize the new syntax by using a structure we call an identifier (directives). Such as:
End-to-end solution
AngularJS seeks to be an end-to-end solution for WEB applications. This means that it's not just a small part of your WEB application, but a complete end-to-end solution. This makes AngularJS "opinionated" when building a CRUD application (add Create, query Retrieve, Update, Delete). However, even though it's "stubborn," it still ensures that its "stubborn" is only the starting point for you to build your application, and that you can still be flexible. Some of the standouts of AngularJS are as follows:
1. All the things you might need to build a CRUD application include: data binding, basic template identifiers, form validation, routing, deep linking, component reuse, and dependency injection.
2. The testing aspects include: unit testing, end-to-end testing, simulation, and automated testing frameworks.
3. Seed application with directory layout and test script as starting point.
The loveliness of AngularJS
AngularJS simplifies application development by presenting developers with a higher level of abstraction. As with other abstract technologies, this also loses some of its flexibility. In other words, not all applications are suitable for using AngularJS. AngularJS focuses on building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications. But to understand what works with AngularJS, you have to understand what doesn't.
Games, graphical interface editors, applications with frequent and complex DOM manipulation, are very different from CRUD applications, and they are not built with AngularJS. A lighter, simpler technique like jQuery might be better in this case.
A simple instance of AngularJS
Here is a typical CRUD application that contains a form. The form value is validated and then used to calculate the total value, which is formatted in a local style. Here are some common developer concepts you need to know:
1. Associate the data-model to the view (UI);
2. Write, read and verify user input;
3. Calculate the new value according to the model;
4. Localize the output format.
Index.html:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
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;}
Operation effect:
Invoice:
Quantity Cost
Total: {{qty * cost | currency}}
Try the above example and see how it works. In the ' 'tag, we use an' ng-app 'identifier to indicate that this is an AngularJS application. This' ng-app 'identifier will cause AngularJS** to automatically initialize **(auto initialize) your application. We use the ' 'tag to load the AngularJS script: < Script SRC = "http://code.angularjs.org/angular-1.1.0.min.js" >
By setting < Input> The ng-model attribute in the tag, AngularJS will automatically bind the data in both directions. We also conducted some simple data verification:
Quantity: <input type="integer" min="0" ng-model="qty" required >
Cost: <input type="number" ng-model="cost" required >
The widget for this input field looks pretty ordinary, but it's not if you realize the following:
1. After the page loads, AngularJS generates variables with the same name based on the declared model name (qty, cost) in the widget. You can think of these variables as M in the MVC design pattern;
Note that the input in the widget above has special capabilities. If you do not input data or input data is invalid, the input field will automatically turn red. This new feature of input boxes makes it easier for developers to implement the field validation common in CRUD applications.
Finally, we can look at the mysterious double braces {{}} :
Total: {{qty * cost | currency}}
This {{expression}} tag is the data binding for AngularJS. The expression can be a combination of an expression and a filter ({{expression | filter}}). AngularJS provides filters to format input and output data.
In the above example, the expression in {{}} lets AngularJS multiply the data from the input box, then format the local currency style and output it to the page.
It is worth mentioning that we did not call any methods of AngularJS, nor did we write any specific logic as if we were using a framework. The reason behind this implementation is that the browser does more than ever to generate static pages, enabling it to meet the needs of dynamic WEB applications. AngularJS makes it easier to develop dynamic WEB applications without libraries or frameworks.
AngularJS's "zen dao (concept)"
Angular believes that declarative code is much better than imperative code when building the view (UI) and writing the software logic, although imperative code is perfect for expressing business logic.
1. Decoupling DOM operation from application logic is a very good idea, which can greatly improve the tunability of code;
2. It is a very, very good idea to treat testing and development the same way. The difficulty of testing depends largely on the structure of the code.
3. Decoupling the client side from the server side is a particularly good practice, which enables both sides to develop in parallel and both sides of the code to achieve reuse;
4. It would be a great help if the framework guided developers through the entire development process, from designing the UI, to writing the business logic, to testing;
5. "simplify to zero" is always good.
AngularJS can save you from the following nightmares:
1. Use callbacks: using callbacks can mess up the readability of your code, making it fragmented and hard to see the business logic. Removing some common code, such as callbacks, is a good thing. Drastically reducing the amount of code you have to write because of the design of the JavaScript language allows you to see the logic of your application more clearly.
2. Write code to manipulate DOM elements manually: manipulating the DOM is a very basic part of AJAX applications, but it is always "cumbersome" and error-prone. The UI interface described declaratively changes as the application state changes, freeing you from writing low-level DOM manipulation code. In most applications written with AngularJS, developers no longer have to write their own code to manipulate the DOM, but you can do so if you want.
3. Read and write data to UI interface: a large part of AJAX application is CRUD operation. A classic process is to assemble the server's data into an internal object, then weave the object into an HTML form, then verify the form after the user modifies the form, display the error if there is an error, then reassemble the data into an internal object and return it to the server. There is so much code to be written repeatedly in this process that it always seems to describe the entire execution of the application rather than the specific business logic and business details.
4. Write a lot of basic code before you start: you usually need to write a lot of basic code to implement a "Hello World" application. With AngularJS, it provides services that make it easy to formally start writing your application, and these services are automatically added to your application as a guice-like dependency injection, allowing you to quickly get into the details of your application's development. In particular, you also have full control over the initialization of automated tests.