Angular Light for jQuery / JS developers

I periodically see on the Toaster questions like “how to hide a block on click” or “how to color by condition”, so I want to show you 4 “tricks” that can improve your jQuery code and development speed.

Initial example

Examples of the description below: jQuery example and Angular Light example
This example consists of 2 “moments”: 1. Click on “panel” by clicking. 2. Display the selected “panel”.

1. For the jQuery example, we are forced to mark the class="button" buttons so that we can find them from the code (although classes were not originally created for this). For the example with Angular Light, we don’t need this, as it introduces variables into the DOM, and we can directly specify that clicking this button assigns a variable: al-click="active='win'" , i.e. here, on click, the code is simply executed: active='win' .
')
2. To display the selected panel in jQuery, we again have to mark our blocks (id = "info_win") to find them in the code, then in the code we make manipulations depending on what needs to be displayed. Just as above, with AL, we don’t need to mark the blocks, we just indicate the condition when they should be visible: al-show="active=='win'" , i.e. when the variable is active=='win' , then the current block will be displayed.

Well, of course, you need to "activate" this block of code with id = "dialog":

 alight.bootstrap('#dialog', { active: 'win' //       active }); 

For this example, only two “commands” were required: al-click and al-show (you can see an example from the link above).

Add coloring buttons

Examples: jQuery example and Angular Light example
Now, for example, we need to highlight the active button, I added the class “active”, probably the most optimal for the jQuery example is to remove the class for all buttons and set it for the desired button:

  dialog.find('.button').removeClass('active'); dialog.find('.button[value=' + code + ']').addClass('active'); 

Ok, now let's do it for AL. Since the active variable is available for us, and we will use it.
Place on the button al-class = " active : active == 'win' " . This code adds the active class to the current element when the condition active == 'win' is satisfied, that's all, js code for this “effect” does not need to be added.

Let's complicate the example

Examples: jQuery example and Angular Light example
In many tasks we need input of user data and their output: let's make an example of text input, its output and checkbox control for displaying / hiding the block.

Option on jQuery - mark up all the elements in HTML: #name, #visible, #box, #boxtext, then subscribe to events and make the function of converting, displaying text and hiding the block.

For AL, we need two variables: name and visible . To get the text from input type="text" , we use the al-value="name" command (it will assign all the entered text to the name variable), and to display this text, it is enough to insert the {{name}} construction in the right place , but we need to convert the text before output, so we will use js - {{ name.toUpperCase() }}

Now the input type="checkbox" element uses the "command" al-checked="visible" , it will assign visible = true or false depending on the state of the element. Well, you already know how to hide a block al-show="visible" .

(In the jQuery example, elements are initialized from js, since it is assumed that the initial values ​​are given from js)

The most "difficult"

It's time to learn about the directives, the very ones that all Angular.js developers fear . What for? For example, you need to do some kind of your own, cunning work on an element or “insert” a jQuery plugin.
Initially, directives are made very simply, for example, we will make a text color directive in red.
To do this, “mark” an element, for example, with an al-red : text tag.
Well, let's make the directive itself, i.e. you need to put the function in the place with the same tag:

 alight.directives.al.red = function(scope, element) { $(element).css('color', 'red') }; 

This function takes as input the item we have tagged. Done, an example here . So you can use AL from jQuery and jQuery from AL.

As you can see in the second example, a group of buttons, they have the same HTML code. Differ only in codes and text. So here, they can be displayed in a loop, so as not to duplicate the HTML code, but this is already in the next article.

Well, and finally, a real example from Toaster to jQuery , and converted to AL (although it could be made even easier).

The main idea is that you do not need to abandon jQuery if you want to try MVC / MVVM (Angular Light). You can do some elements using Angular Light and take advantage of both. Angular Light will not heavily weight your project: the latest version weighs about 17kb (compressed, gzipped + minfied); In addition, Angular Light is one of the fastest MVVM libraries.

PS: If you try Angular Light, pay attention to the version, on the Internet, most of the examples for the old Angular Ligh, but it has some minor differences.