JavaScript Logo

JavaScript video tutorials from Toptal software engineers

A series of JavaScript video tutorials and other educational posts to help you rapidly develop and perfect your JavaScript skills.

In this demonstration, we will explore how to use $broadcast and $emit, examining their similarities and differences.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to look at the difference between the $broadcast and $emit functions in AngularJS. To make use of angular, you’ll have to include it in your webpage as I have done here. I’m including it from my popular CDN, you can download a copy to your own web server and reference it from there if you would like.

Okay, now let’s take a look at this Angular application that I have here. I have an ng-app here with my application being called MyApp, and I’ve got several controllers setup, now notice that I’ve got, we have Alpha Controller, Bravo Controller, and Charlie Controller. These three controllers here are all siblings.

And then underneath Alpha controller, we have first controller and second controller. First controller and second controller are siblings to each other, and both of them are also child controllers of Alpha controller. So what we want to do, is we want to understand what $broadcast and $emit do. Basically what they allow us to do is to transmit messages from a parent scope to a child scope, or from a child scope back up the parent scope.

Now coming down here to our code,…

In this demonstration, we will explore the internal $$postDigest function, explaining its purpose in relation to the $digest loop.

Source code used in this demonstration can be found at Github.

Video transcript

In this co demonstration we’re going to take a look at a very interesting function that’s available in AngularJS called the double $$postDigest function. Now, to make use to this function, you’ll have to include AngularJS in your web page as I have done here. I referenced it from a popular CDN but you can download a copy to your local web applications and reference it from there if you would like.

Now, the functions and $$ properties, in general, shouldn’t really not ever be used because they are kind of internal to angular.

But this one is actually quiet useful and so long as they don’t change the internal API, you can definitely make use of this when building your application. So, let’s kind take a look at how it works. Let’s say after the Angular digest loop process runs, I actually want to execute a one time function.

I can register it using the postDigest,…

In this demonstration, we will show the differences between the $apply() and $applyAsync functions.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration we are going to take a look at the difference between the apply and apply Async functions available in AngularJS. Now to make use of Angular you’ll have to include it in your webpage. I have included it here from a Major CDN but you can also download it to your own local web application and reference it from there.

Now down here in our Angular application you’re going to see where I have a button, and you’ll be noticing that I’m not using NG click. I’m actually using the build in on click handler that comes just as a part of HTML 5 with this is just a standard webpage, and what this is going to do, this is actually going to fire off a function called click me.

Which is to find in the global scope, but it’s not to defined directly within Angular. Let’s take a look and see what I mean. If we scroll down here we’re going to see that we have window.clickme defined here but it’s not actually going to run as part of Angular. The only reason I’m defining it here, is so that I can reference the scope…

In this demonstration, we will show the differences between the $eval() and $evalAsync functions.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at the $eval() and $evalAsync() functions provided by the AngularJS framework. In order to make use of Angular, you have to reference it in your project, as you can see here I’m referencing it from a popular CDN, you can also download a copy of Angular to your local environment and reference it from there there as well.

Now coming down here to our Angular Application, basically, all we have here is a button configured so that when we click the button, we execute this clickme function right here and then down here on the scope we actually have a clickme function defined. Now what we’re going to do is we’re going to kind of demonstrate the difference between $eval() and $evalAsync(), the difference is subtle but important, so let’s take a look at this $event here, we’re going to use the event object, let me do console.log.

Say, $event.target.innnerText. And this is actually going to output the value here that we have for the content between these start and end tags for the button. So if we jump over to our web browser and reload our page, click on…

In this demonstration, we will show the need for calling $destroy to clean up $scopes created by developer’s code.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at when we need to destroy a scope object in AngularJS. Now, in addition to including angular, we’re actually going to be including underscore as well as angular-sanitize. Underscore is going to be used for some array query operations that we’re going to want to do, and then angular-sanitize is going to be used so that we can actually output some content from a variable as actual HTML to the webpage.

Now, we’ve also defined a couple of styles here at the top, red_text, blue_text and green_text, and basically that’s just going to be some styles set up to set the color of the text and then applying that with a class selector here. Okay, so coming down to our angular application, let’s take a look at this, kind of, complex directive, [xx] complex set of directives that I have created.

I basically have created a directive call my-select-view, and basically what it’s going to do is give us a drop-down box and then when we select a certain color, it’s going to display that color based upon the selection, so you can see here we actually have three different…

In this demonstration, we will compare the $watch functions used by Angular.js to observe changes on the model through the $digest loop.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at the $watch functions provided by AngularJS. The $watch functions in Angular are essentially used to basically synchronize the UI and the model. The $watch Functions observe properties on the model and when the digest loop runs, it then executes those $watch functions thereby allowing the UI to be updated with those new model property values.

Now to make use of the $watch functions, we first, of course, have to include AngularJS into our web page, as you can see, I’ve done here from a popular CDN, but you can also include it in your actual web application and reference it from there. Now, as you can see here, I have a kind of a basic framework here for an Angular Application, I have my NG App and NG controller, and then down here on my code I have a module defined as well as a controller.

Now to simply use a $watch function, we can simply come in here and say $scope.$watch, and we can actually have a function run every single time the digest just loop executes, I’m going to say, function, and we’ll do console.log, and we’ll…

In this demonstration, we will demonstrate the difference between the $watch and the $observe function.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration, we’re going to take a look at the difference between the $watch function and the $observe function in AngularJS. Through the $watch function and the $observe function, Angular provides us a mechanism by which we can observe values on the model and then update the UI in response to their changes. Now in order to make use of these function, we of course have to include AngularJS in our webpage as I have done here, you can reference it from a popular CDN or you can download it to your local web application and reference it from there. I have the basic scaffolding here of a very simple Angular web application, I have my NG app and my NG controller, and then down here, I actually define my application module as well as my controller. Now, probably the best way to take a look at this is actually to construct an actual $watch and then compare it to an $observe, and we’re going to see that when watches execute, they actually execute two functions.

One is an actual comparison function to determine whether or not the value has changed and the second function is the actual…

In this demonstration, we will demonstrate the difference between the $apply and the $digest functions in terms of which $scope objects are digested when those functions are invoked.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration we’re going to take a look at the difference between the dollar sigh apply and dollar sign digest functions in AngularJS. In order to make use of this demo, you have to make sure that you include AngularJS in your web page. I have done so here from a very popular CDN which you can also download a copy of Angular to your local web application, reference it from there.

Now scrolling down here a little bit, let’s take a little bit of a look at our Angular application. We have ng app with set to the value of my app and then we have a message here or a template variable set on our rootscope and then we have engine controller pointing to my control and we have a child message template variable with an engine controller scope.

So scrolling down to our Javascript code, we’re going to see what we’ve defined our my app module and we’ve defined my controller. Now we’re going to be injecting both the rootscope and the dollar sign scope which represents the scope for this controller. And you’ll notice here we’re going to set dollar sign root scope root…

In this demonstration, we will demonstrate how to use a $parser function as an alternative to a $watch

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration we are going to take a look at a good alternative to using a watch in AngularJS. Now in order to do this code demonstration, we have to make sure that you have AngularJS added to your web page as you can see here. I have loaded it up from my popular CDN however, you can download it to your local web application and reference it from there as well. Now if we scroll down here you are going to see a very simple form basically we have our ng upper ng control, and then we have this input control with the engine model directive being down to the message property of the scope variable.

So if we come down here to our code, we’re going to see what we have in Angular module and our controller, and then we have dollar signs scoped on message set to initial message. Now if we switch to our web browser, we’re going to see where we have our input box is populated with that initial message. And the first thing we’re going to do is actually take a look at how we can observe changes to this message…

In this demonstration, we will use max() and min() functions to extract the maximum and minimum values from collection of values and objects.

Source code used in this demonstration can be found at Github.

Video transcript

In this code demonstration we are going to take a look at the max() and min() functions provided by the underscoreJS code library. In order to make use of these functions we actually have to include the UnderscoreJS code library in our webpage, now I’ve done this by referencing it from a popular CDN but you can also download it to your local website and reference it from your local server as well.

Now basically the max() and min() functions basically allow us to find the maximum or minimum value of something within an array or a collection, we can use it with simple values or we can actually use it with objects. So to get started here, I’m going to do console dot log and I’m going to call underscore dot max and I’m going to pass into it in array.

So in our array we’re going to have one, two, three and four. Now in this run, they should find a maximum value which in this case will be the number four, so I’m going to reload our web page here, we’re going to see that four as I’ll put it to the console. So now let’s take…

In this demonstration, we will use contains() function to determine if a value or object is in a collection.

Video transcript

In this code demonstration, we’re going to take a look at the contains() function provided by the underscoreJS code library. Now to make use of Underscore, you have to make sure that you include a reference to it in your web page like I’ve done here. I’ve referenced a popular CDN, but you can also download a copy of Underscore to your local project and reference it from there as well.

Now, to do the contains(), we basically are going to pass in some type of collection, and we’re going to see if a value or an object exists in that collection. So let’s take a look at our array of numbers that we have here, and I’m going to say, var result = _contains(), then I’m going to pass in here my array of numbers, and then I’m going to pass in the number three.

The number three will be the value that we’re going to check to see if it’s contained in the array. Then we’ll output the result of that with console.dir. Now, let’s switch over to our web browser and let’s see what the result of this is. It comes back true because 3 is in…

The top JavaScript freelance developers

Small 04535d12f0d07d5b6608219ade57a04f
Alejandro Hernandez, ArgentinaAlejandro got his Bachelor's in software engineering eleven years ago, and since then has been working for software companies of all sizes from all around the globe as a freelancer. Currently, he enjoys working as the technical lead on JavaScript projects, where his deep understanding of architecture and theory is most impactful. [click to continue...]
Small 487da1e58c844507e080e6ecc98f4447
Charles Cook, Ph.D., United StatesCharles has a Ph.D. in aerospace engineering and spent three years developing custom data processing and analysis programs for NASA. He specializes in scalable, enterprise-level application development and engineering solutions for exceptionally high throughputs. He is also the founder and owner of GreatVocab.com, for which he developed the core system using novel concepts in data analysis and control theory. [click to continue...]
Small c7a6b7fbbc49433fe97f9a527486740c
Alexander V. Makeev, RussiaAlexander carries multiple technical degrees in Nuclear Physics and worked at CERN as a Python developer implementing dynamic performance optimizations for complex web applications. He excels at rapidly integrating reliable web technologies and achieving flexible software architecture designs. His strong theoretical and practical background in IT, business consulting, and project management makes him extremely capable on projects of any size. [click to continue...]
Small 865b97c8 78da 4296 86ae 33ef1820aa80
Zoran Melis, CroatiaZoran is a software engineer with over ten years of professional experience with a wide range of technologies. He has worked with C/C++, Python, Go, JavaScript, Java, and more. Currently focusing on full-stack, scalable applications development, he has been a part of teams of all sizes in environments ranging from small private companies to Google. [click to continue...]
Small 21e9dba6 e9af 457a 9ce9 8c6612ba8b0b
Rafal Gwizdala, PolandRafal is a skilled software engineer with strong architecture and coding skills, broad technology knowledge, and many years of experience delivering software. He is a project leader, mentor, coder, and consultant. He specializes in business software, process automation, and transactional systems. [click to continue...]

JavaScript blog posts

Never miss new JavaScript videos

Thank you for subscribing

You can edit your subscription preferences here.