In-depth introduction to the use of custom commands in AngularJS and the use of custom commands in angularjs

In-depth introduction to the use of custom commands in AngularJS and the use of custom commands in angularjs

AngularJS custom commands are your own commands, plus native core functions that are run when the compiler compiles the DOM. This may be hard to understand. Now, suppose we want to reuse some specific code on different pages of the application without copying the code. Then, we can simply put this code into a separate file and call the code that uses custom commands, instead of typing it over and over again. This code is easier to understand. AngularJS has four types of custom commands:

1. Element commands
2. Attribute commands
3. CSS class instruction
4. Comment command

Before implementing them in our existing apps, let's see what the custom commands look like:
 
Element commands

Write the following tag in html to place code snippets. When we want to use a specific code, we use the above tag to include the code.

<guitar-reviews> ... </guitar-reviews>

In the JS file, use the following lines of code to make the above angularJS custom commands take effect.
 

app.directive('guitarReviews', function() { return {  restrict  : 'E', // used E because of element   templateUrl : 'custom-directives/reviews.html' };});

Code explanation:

Like app. controller, we first define app. directive and then guitarReview, which is the element tag name used in html. But did you notice that guitar-review and guitarReviews are different? This is because the characters in guitar-reviews are converted to the upper and lower case cases, so they are changed to guitarReviews In the JS file. The next step is to return the parameter's anonymous function. Restrict: 'E' indicates that we are defining a custom element directive, while templateUrl points to the code fragment file to be included.
 
Attribute commands

Type the following attributes in the html Tag of an html file. This tag is used to hold code snippets. When we want to use a specific code snippet, we just need to break this label to include the code.
 

<div guitar-reviews> ... </div>

In the JS file, use the following code to make the preceding custom angularJS commands take effect.
 

app.directive('guitarReviews', function() { return {  restrict  : 'A', // used A because of attribute   templateUrl : 'custom-directives/reviews.html' };});

Note: AngularJS recommends that you replace css and comments in custom commands with simple CSS and comments.

Now let's implement custom commands in the app. You can download the project file here. I put the reviewsparts code in a single file, and then assign the code segment to a element, which will be used on the details.html page at the end.
 
Step 1

Create a new folder named cDirectives under the specified folder to store custom commands. Then, create a reviews.html file under the folder to hold the user's reviews. At this point, your folder hierarchy is as follows:

Step 2

Cut the review section in details.html and add the <user-reviews> </user-reviews> label as follows:

Step 3

Copy the code you added to the details.html page to reviews.html as follows:

<!-- Review Tab START, it has a new controller --><div ng-show="panel.isSelected(3)" class="reviewContainer" ng-controller="ReviewController as reviewCtrl" > <!-- User Reviews on each guitar from data.json - simple iterating through guitars list --><div class="longDescription uReview" ng-repeat="review in guitarVariable[whichGuitar].reviews">   
 
Step 4
Now you can add behavior in the user-reviews label. Let's open controller. js and add the following code:

GuitarControllers.directive('userReviews', function() { return {  restrict  : 'E', // used E because of element   templateUrl : 'partials/cDirectives/reviews.html' };});
 
Code explanation:
Here, our <user-reviews> command is changed to userReviews (expressed in camel format) and the characters are lost. Next we can say that when it is called, it loads the file in templateURL and limits this command on Element E.
We just customized a command. Although it seems that our application has not changed, our code is now better planned than before. Can you customize instructions for descriptions and specifications? Try it yourself.