Custom Angular plugins-site User Guide

Recently, as a result of a large project revision, in order to allow users to adapt to the new revision, so in the system introduced the "User guidance" function, for the initial entry of the system users some simple use of training training. This is a very common feature for most Web sites. So before this task was developed, the blogger tried to abstract it out of the business logic of the existing system and encapsulate it as a generic plug-in, making the code easier to extend and maintain.

No picture, no truth, First:

The use of this trainning plugin is simple, it uses the same configuration as the angular route, and simply configures each step of its training information.

The title information of the
• title:step;
• template/templateurl:step the content template information. This class can be configured with HTML elements, or URL addresses for templates, and Templateurl supports angular route-like function syntax;
• controller:step Controller configuration In the controller, the following parameters can be injected: The current step–currentstep, all step configuration –trainnings, the current step configuration –currenttrainning, and the next action callback – Trainninginstance (where NeXTSTEP: For the next callback, Cancel to cancel the user boot callback);
• Controlleras:controller alias;
• Resolve: Data configuration prior to controller initialization, resolve in angular route,
• locals: local variables, similar to resolve, can be passed to the controller. The difference is that it does not support function calls and is more convenient for constant writing than resolve, the display orientation of the triangular arrows on the
• placement:step container,
• position:step where the container is displayed, This is an absolute coordinate, you can pass the absolute coordinates of {left:100, top:100} , or the #stepPanelHost configuration relative to the placement position of this element. It also supports custom function and other component syntax for injecting angular. And can be injected by default: All step configuration –trainnings, current step –step, current step configuration –currenttrainning, and step container node –steppanel;
• Backdrop: Whether you need to display a matte layer, which is displayed by default, does not display a matte layer unless the display is declared false,
• Stepclass: Style information for each step container;
• Backdropclass: Style information for each mask layer.

After understanding these configurations and customizing the configuration information for the entire user based on the specific requirements, we can use the Trainningservice trainning method to boot the user at a specific actual start, passing in the parameters as the configuration information for each step of the steps. and can register its done or cancel events:

trainningService.trainning(trainningCourses.courses)    .done(function() {        vm.isDone = true;    });

The following is a demonstration of the configuration information:

    . Constant (' trainningcourses ', {courses: [{title: ' Step 1: ', tem  Plateurl: ' trainning-content.html ', controller: ' Steppanelcontroller ', Controlleras:                    ' Steppanel ', placement: ' Left ', Position: ' #blogControl '},{ Title: ' Step 3: ', Templateurl: ' trainning-content.html ', Controller: ' St                    Eppanelcontroller ', Controlleras: ' Steppanel ', placement: ' Top ',                    Position: {top:200, left:100}},                ... {stepclass: ' Last-step ', Backdropclass: ' Last-backdrop ', Templat Eurl: ' trainning-content-done.html ', controller: ' Steppanelcontroller ', conTrolleras: ' Steppanel ', Position: [' $window ', ' Steppanel ', function ($window, Steppanel) {                        Customize the function so that its screen centers var win = angular.element ($window); return {top: (Win.height ()-steppanel.height ())/2, left: (win.wi DTH ()-steppanel.width ())/2}]}]})

This article plug-in source code and demo effect only Codepen, the effect is as follows:

See the Pen ng-trainning-Green (@greengerong) on Codepen.

In the trainning plug-in source design, contains the following points:

• Provides the service API. Because about trainning this plugin, it is a global plug-in, just in angular all the service is also a singleton, so it is a good design to encapsulate the user-led logic into the angular service. However, for each step of trainning, the content information is DOM operation, it should not exist in the service in angular processing, the best way is to encapsulate him into directive. So here is the definition of Directive, which is compile in the service and then append into the body.
• For each such standalone plug-in, a separate scope should be encapsulated, which facilitates subsequent destruction and does not conflict with the existing scope variable.
• $q wrapping the result of the delay trigger. It is a good choice to use promise encapsulation for operations such as the trainning plug-in or modal. It replaces the complexity of callback parameters and is presented in a smooth API, which is more beneficial to the readability of the code. It is also possible to return APIs with other angular service unified.
• For similar routes such as Controller, Controlleras, resolve, template, Templateurl, the processing code can be moved to the same kind of plug-in. They can add more custom extensions to plugins. For explanations of this part of the code, the blogger will push for everyone in the next article.
• Using $injector.invoke to dynamically inject and invoke the angular service, this can both gain the extensibility of angular other service injections and gain the dynamic nature of the function. As in the above example, the screen is centered in custom extension mode.

Such design essentials can also be applied to global plugins such as modal, alert, and overload. Interested readers, you can read this code http://codepen.io/greengerong/pen/pjwXQW#0 in the blogger's Codepen notes.

Custom Angular plugins-site User Guide