- Current location: home page
- Hang Seng Technology Eye
- Angularjs: Everyone can’t stand bad code. How to avoid bugs from development to testing?
AngularJS is a pure front-end development framework for dynamic WEB applications. It uses HTML as the template language and JS for business logic. It is well-organized, rigorously tested, versatile, powerful and extremely flexible. You still need to have a server-side backend, but most of the user interaction logic will be handled elegantly on the client side.
[End-to-end solution]
AngularJS is not a simple framework. It tries 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.
It covers everything from development (data binding, basic template identifiers, form validation, routing, deep linking, component reuse, dependency injection) to testing (unit testing, end-to-end testing, simulation, and automated testing frameworks) to building a complete application.
The core
Concept 】
AngularJS is designed to overcome the limitations of HTML and JS in building applications, to make them easier to build and test. It does a great job of maximizing application development by presenting developers with a higher level of abstraction.
Through will be repeated in the process of web application development, tedious, and the development of low-level operations (DOM manipulation, event listeners, data collection, input validation) encapsulated provided to developers, through a well-designed framework and specification to guide the development process in the whole development process, specification documents and code structure, to the greatest extent make up for the defect of web application development process.
This work has led to a lot of clever techniques and concepts:
Bring the SPA
Single page application. Angularjs really only has one page (only one HTML tag and body tag in the entire app). Only the template and data change.
Bring the MVC
Hierarchical model of data, business logic and view, fully decouples view logic, business logic and data logic.
Bring about the module
Defines an application. A module is a container for different parts of the application. A module is a container for all components, usually belonging to a module. AngularJS apps have no main methods. Instead, they use modules to declare how the app should be launched. Angualrjs uses modules to simplify dependency introduction and further optimize code structure.
▲ Bidirectional data binding
Business data is automatically written to the DOM component for display, and user input from the DOM component is automatically written to the business data model.
▲ Semantic labels (instructions)
Custom HTML tags, which can be elements or attributes. These tags can be used as new custom controls; It can also be used to “render” elements that have certain behavior, and it can also manipulate DOM properties in interesting ways. An instruction is something that introduces a new syntax that greatly enhances HTML presentation. More abstractly, Angualrjs builds an extensible HTML compiler based entirely on A JS implementation. Instructions are used to pass data to the compiler to pass specified functions and styles to DOM elements.
▲ Dependency Injection
Using name declarations to inject dependent modules or services into the current service decouples the business code from the configuration implementation.
Bring the template
A collection of HTML code, instructions and page logic, it does not care about data content, does not care about business logic, it only according to the injected data to render the corresponding content, is a view of high abstraction.
[Development concept and advantages]
DOM and application logic are completely decoupled, and MVC and dependency injection maintain separation of concerns. (The view is responsible for showing what is going to happen; Model representation data; There is a service layer to implement reusable tasks; DOM manipulation and extension in directive; Glue things together using controller. Code structure is clear, API concise and abstract, reusable, easy to maintain and greatly improve the code tunability (the difficulty of debugging largely depends on the code structure).
Decoupling the client side and the server side, with no connection to each other except for the AJAX interface, allows both sides to be developed in parallel, and makes the code on both sides reusable.
Decoupling UI design from business development, UI designers need only understand the nature and structure of the data to design the interface presentation. Developers also need not care what the page DOM is. The two can be developed in parallel and are eventually linked through templates and data binding.
Putting testing and development on the same footing, based entirely on testable foundations, supports automated unit testing and integration testing well. The API documentation itself is a detailed description of test coverage.
Greatly reduce the development threshold, shielding a large number of low-level operations, so that developers do not need to understand the interface of the underlying DOM, just master Angualrjs and basic HTML and JS can quickly get started.
AngularJS will save you from the following nightmares:
▲ Use callbacks: The use of callbacks disrupts the readability of the code, making it hard to see the business logic. Drastically reducing the amount of code you have to write because of the design of the JavaScript language makes the logic of your application much clearer.
▲ Manually writing code to manipulate DOM elements: Manipulating the DOM is a fundamental part of AJAX applications, but it can also be cumbersome and error-prone. The DECLARatively described UI interface changes as the application state changes, freeing you from writing low-level DOM manipulation code. Most AngularJS apps don’t require developers to write their own DOM code.
▲ Reading and writing data to the UI: A large part of AJAX applications are CRUD operations.
A classic process is to form server data into internal objects, which are then formatted into HTML forms. The user modifies the form, validates the form, displays errors if there are any, and then reconstructs the data into internal objects, which are then returned to the server. There is a lot of repetitive code in this process, which makes the code always seem to describe the entire application execution process, rather than specific business logic and business details. Angularjs completely frees you from this process with bidirectional binding, rendering and retrieving data almost without code.
Hang Seng technology eye original article, unauthorized reprint prohibited. For details, see (click) reprint instructions.
link
Hang Seng Blockchain
The Light’s official website
Contact us
TEL:0571-28829811
Email:[email protected]
Hang Seng Technology Eye