Take you closer to AngularJS-create custom commands

Why use AngularJS commands?

Those who have used AngularJS should be most interested in its commands. Currently, only AngularJS supports custom commands, and AngularJS is the only framework that provides reusable Web applications.

Currently, many JavaScript products provide plug-ins to Web developers. For example, Bootstrap is a popular front-end development toolkit that provides styles and JavaScript plug-ins. When using the boins in Booostrap, developers must switch to the JavaScript mode to write jQuery code to activate the ins. Although jQuery code is easy to write, it must be synchronized with HTML, this is a tedious and error-prone process.

The AngularJS home page shows a simple example for implementing the Tab function in Bootstrap. You can easily add the Tab function on the page, and the usage is as simple as ul labels. The HTML code is as follows:

   BootStrap Tab Component   
      
  
          This is the content of the first tab.     
       
  
          This is the content of the second tab.     
     
  

The JavaScript code is as follows:

angular.module('components', []).   directive('tabs', function() {     return {       restrict: 'E',       transclude: true,       scope: {},       controller: [ "$scope", function($scope) {         var panes = $scope.panes = [];           $scope.select = function(pane) {           angular.forEach(panes, function(pane) {             pane.selected = false;           });           pane.selected = true;         }           this.addPane = function(pane) {           if (panes.length == 0) $scope.select(pane);           panes.push(pane);         }       }],       template:         '' +           '
 
 

  
  ' +             '
  
  
'+ '{{pane.title}}' + '
' +           '
 
 
' +           '' +         '',       replace: true     };   }).   directive('pane', function() {     return {       require: '^tabs',       restrict: 'E',       transclude: true,       scope: { title: '@' },       link: function(scope, element, attrs, tabsCtrl) {         tabsCtrl.addPane(scope);       },       template:         '' +         '',       replace: true     };   })

You can view the effect from the following link: http://jsfiddle.net/powertoolsteam/GBE7N/1/

As you can see, apart from having And Tag, the page is no different from the regular HTML page. HTML developers do not need to write any code. Of course, there is always a need for the first person to eat crabs to create commands for sharing, but currently Tabs commands are very common and can be reused anywhere (such as BootStrap, jQueryUI, Wijmo, and some well-known front-end plug-ins ).

Thanks to its ease of use and ease of writing, many users have begun to write commands using AngularJS. For example, the AngularJS development team has implemented a series of commands-UI Bootstrap to replace Bootstrap Based on AngularJS; well-known ComponentOne control vendors have also created Wijmo Based on AngularJS; we can also find some public instruction databases on GitHub: jQueryUI widgets.

Having AngularJS, do you think you have stood on the shoulders of giants? But don't be happy too early. If we already have so many commands for us to use, why should we learn AngularJS and why should we learn custom commands?

For example, you may have special requirements:If you work in a financial company, you need to create a financial form that displays data in the form of a table, has the function of binding, editing, verifying, and synchronizing data to the server. Form plug-ins are common, but it is not clear that they can meet these specific needs. Therefore, you must create custom commands based on your actual business needs.

   Offshore Investment Summary        

This is the purpose of this Article. Next we will discuss how to create AngularJS commands.

Create custom AngularJS commands

The custom commands at the beginning of this article are very simple. It only implements the synchronization function. General Commands include more elements:

// Create a command module (or retrieve an existing module) var m = angular. module ("myApp"); // create the "my-dir" command myApp. directive ("myDir", function () {return {restrict: "E", // The instruction is an element (not an attribute) scope :{// set the scope name for the instruction: "@", // name value transfer (string, one-way binding) amount: "=", // amount reference transfer (bidirectional binding) save: "&" // save operation}, template: // replace HTML (use the variable in scope) "" + "{name }}:"+"Save"+" ", Replace: true, // use the template to replace the original tag transclude: false, // do not copy the original HTML content controller: [" $ scope ", function ($ scope) {... }], Link: function (scope, element, attrs, controller ){...} }});

The effect is as follows:

Note that this custom instruction follows a format: prefix "my", which is similar to a namespace. Therefore, if you reference multiple module commands in an application, you can easily determine the definition of a prefix. This is not a hard requirement, but it can bring a lot of convenience.

The constructor of the command returns JavaScript objects with attributes. These contents are clearly described on the AngularJS homepage. My understanding of some attributes is as follows:

Restrict: indicates the Application Form of commands in HTML. The backup options include "A", "E", and "C", "M ", attribute, element, class, and comment (default value: ""). We will focus more on attributes-how to create UI elements. Scope: The scope of the created instruction. scope is passed as an attribute label in the instruction. Scope is a necessary condition for creating reusable commands. Each Command (no matter which level of the nested command) has a unique scope and does not depend on the parent Scope. The scope object defines names and types variables. The preceding example creates three scope variables. Name: "@" (value transfer, one-way binding ):
"@" Indicates that the variable is a value transfer. The command retrieves the value in the string passed from the parent scope. Command can use this value but cannot be modified. It is the most common variable. Amount: "=" (reference, bidirectional binding)
"=" Indicates that the variable is passed by reference. Command to retrieve the reference values in the main Scope. Values can be of any type, including composite objects and arrays. The command can change the value in the parent Scope. Therefore, this type is required when the Command needs to modify the value in the parent Scope. Save: "&" (expression)
The '&' symbol indicates that the variable is an expression enabled in the parent Scope. It allows commands to perform more advanced operations than modifying values. Template: Replace the string marked in the original template. The replace function replaces all old elements with new values. Note how the template uses the variables defined in Scope. This allows you to create macro-style commands without writing any additional code. Replace: Indicates whether to replace the value in the original tag or append the value in the original tag. The default value is false. The original tag is retained. Transclude: indicates whether the custom Command copies the content in the original tag. For example, the preceding "tab" command sets transclude to true because the tab element contains other HTML elements. The "dateInput" command must be empty during initialization. Therefore, set transclude to false. Link: This method plays an important role in commands. It performs DOM operations and registers event listeners. The link method includes the following parameters: scope: reference of the Scope command. Scope variables are not defined during initialization. The link Method registers the monitor value change event. Element: Reference of DOM elements containing commands. The link method is generally used to operate instances through jQuery (Angular's jqLite can also be used if jQuery is not loaded ). Controller: used with nested commands. This parameter is used to provide sub-instruction reference to the parent instruction, allow interaction between commands, tab instruction is to use this parameter is a typical example: http://jsfiddle.net/powertoolsteam/GBE7N/1/

Note: When the link method is called, The scope variables passed through the value ("@") will not be initialized, and they will be initialized at another time point in the instruction life cycle, if you need to listen to this event, you can use scope. $ watch method.
Now, the basic knowledge description is required for custom commands. If you are still not familiar with commands, the best way is to implement a few small examples, you can practice in fiddle: http://jsfiddle.net/powertoolsteam/Tk92U/

In the next article, we will familiarize ourselves with several AngularJS custom commands.