Shulou(Shulou.com)05/31 Report--

Today, I will talk to you about how to explain the application of AngularJS in automated testing. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

What is AngularJS?

1. AngularJS is a set of frameworks, templates, data binding and rich UI components for developing web pages

2. AngularJS provides a series of robust features and methods to isolate code into modules

3. AngularJS released its first version in 2009, maintained by Google, and compressed version 94k.

Second, the core idea of AngularJS

1. Decoupling the data view from the business logic through bidirectional binding of the data view in AngularJS, which will improve the testability of the code.

2. Follow the MVC pattern to encourage loose coupling among view, data and logical components.

3. Put the test on the same important position as the application programming, and write the test while writing the module. Because of the loose coupling of each component, this kind of test can be realized.

4. The page side of the application is decoupled from the server side. As long as the two parties define the communication API, they can develop in parallel.

Third, simple chestnuts

Question: suppose we need to write a list of mobile phones to support fuzzy search of mobile phone information and sort by specified fields, how to achieve it?

As shown in the figure above, there are few DOM operations, focusing more on business logic!

Let's write HTML

Write controller Controller

PhoneListCtrl controller. In the example, $scope (data model) and $http (a service that encapsulates ajax) are both built-in angularjs services that can be customized.

$scope.phones = data; the data returned by the background in this place is applied to the data model, and the foreground UI automatically responds to the update.

Instruction 4.1 what is an instruction?

Directive is one of the technologies that AngularJS uses to extend browser capabilities. During DOM compilation, instructions associated with HTML are detected and executed. This allows instructions to specify behavior for the DOM or change the structure of the DOM. For example, ng-controller, ng-src, ng-model, etc.

4.2 compilation of AngularJS

4.3simple AngularJS instruction writing

General format of custom instructions:

Angular.application ('myApp', []) .directive (' myDirective',function () {/ / an instruction definition object return {}; / / define an instruction by setting an item, where it is overwritten})

Let's look at an example of a simple custom instruction:

Module: this method creates a new module. AngularJS manages the code by module.

Directive: create a new instruction in the module, and the specified method is executed during the compilation step, which returns a custom link function that is executed after the two-way binding is completed.

Restrict: it tells AngularJS how this instruction can be declared in DOM. E (element), A (attribute, default value), C (class name).

Scope: can be set to true or an object. The default value is false. When scope is set to true, it inherits from the parent scope and creates a new scope object. There are three binding strategies @ = &.

Template: a piece of HTML text, or a function that takes two arguments, tElement and tAttrs, and returns a string representing the template.

4.4 use instruction

Ng-app= "MyModule": specifies the initialized module (module) when angularjs starts. Currently specified is a custom module.

Drink water= "{{pureWater}}": invokes the custom drink directive to assign the pureWater attribute in $scope to the water attribute in the directive.

Drink can be either an attribute or a tag.

V. Modules and services

In AngularJS, the module is responsible for organizing, starting, and instantiating applications.

There are two parts of the module, one is the configuration block and the other is the running block.

Configuration block: runs during the instance factory (provider) registration and configuration phase. Only factories and constants can be injected into the configuration block (the configuration of constants should be placed first)

Running block: the injector (injector) is created and executed and is used to start the application. Instances and constants, variables, etc., can be injected.

Services in AngularJS applications are replaceable objects tied together with dependency injection. These objects can provide encapsulated logical operations for invocation. AngularJS has a lot of useful services built in, such as $timeout, $http, and so on, and we can do most of the business logic by using the built-in services. But many times we also need custom services:

Use of services

The code in the figure above defines a service notify that relies on another service, $window. The method of the window object is encapsulated in $window, a controller myController is defined, notify services are injected into the controller, and a method callNotify is defined in the controller's scope to invoke the service. Inject is a way of dependency injection, see the dependency injection section below.

VI. Dependency injection

We can compare the service we need to a tool, such as a hammer, so how do we get the hammer?

The first way: make your own hammer. If the workmanship of the hammer changes, we need to remake it. It is equivalent to new a service in the program, and when the implementation of the service changes, you can only modify the code, which will lead to risk.

The second way: we find a factory, tell the factory the model of the hammer, and then the factory makes it for us. At this point, there is no need to care about how the hammer is made, we just use it. But this way is still troublesome, we need to know where the factory is. Similar to getting the service we want through the factory method in the code. This kind of party will rely on the factory.

The third way: we posted a list in front of the door stating what type of hammer we needed, and the next day someone silently delivered a hammer. This is wishful thinking in real life, but this way is really easy, there is no need to think about anything, we just focus on using hammers. This is dependency injection in the program. As long as you declare what you need, you can get what you need when you use it.

Dependency injection in AngularJS

The first way: declare the dependency through the method parameter name. This method is not recommended because the method parameter name changes after the js file is compressed.

The second way: declare an array, rely on the list to put the front of the array, and inject the target to put the last element of the array. This method is recommended.

The third way: declare the dependency list through the $inject attribute.

What is not introduced in the article but needs to be understood

1. The life cycle of $scope, which is a very important content.

2. AngularJS's support for forms. AngularJS has built-in form services, which can greatly improve the efficiency of development.

3. The detailed definition of the instruction. In many cases, simple instruction writing can not meet the requirements, and more in-depth customized instructions are needed.

4. How to test. In AngularJS, testing is very simple and can be tested using other test libraries (such as Jasmine).

After reading the above, do you have any further understanding of how to explain the application of AngularJS in automated testing? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.