AngularJS Logo

AngularJS video tutorials from Toptal software engineers

A series of AngularJS video tutorials and other educational posts to help you rapidly develop and perfect your AngularJS 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…

Here we look at how you can create a custom filter using Angular JS. See our other videos to find out how to create custom parameters into these types of filters.

Video transcript

In this video we’re going to demonstrate how to create a custom filter in AngularJS. So, as you can see here, I have my ng-app defining my application on this div element right here, and then down here I have angular. module, and defining the module for my application. Now for executing this code, we’re going to do everything within a run block within a run function, and we’re going to do things off of the rootScope. Typically in a real angular application you would create a controller and then do everything off of a childScope, not in the rootScope, but for the purposes of demonstrating a filter, we will be using this approach. So if I have a template variable, we’ll call it message, and if I come down here on my rootScope, and I say rootScope. message, and then I say, “Hello World!”. If I save that and then reload my web browser we’re going to see that I have my “Hello World!” displayed here in my view, alright? So Angular has a filter called Uppercase and to call a filter in AngularJs, we basically just put this pipe character followed by the name of the filter, so…

Here we take a look at an example of creating a custom AngularJS filter to filter a list of ordered or unordered items.

Video transcript

In this code demonstration we’re going to take a look how we can create a custom AngularJS filter to actually filter a list of items. So we’re going to come in here and we’re going to add a very simple unordered list element and we’re going to add some list items and we’re going to do an ng repeat=items and items, we add our item here then we’ll close out our list item element. Now down here in our code we’re going to do this with the root scope inside of a run block.

Typically you would do this in a controller with a child scope that type of thing in a real application but to demonstrate this filter functionality, working in the root score is perfectly fine. So I’m going to have rootscore. items and I’m going to say one, two, three, four, five, six, seven, eight, nine, ten, and now what I’m going to do is I’m going to load this up in my web browser, and we’re going to see a list of ten items, alright?

So 1-10. Now let’s say I wanted to create a filter that would only show me items with a number value…

The top AngularJS freelance developers

Small me
William Lyles, United StatesWilliam is a top architect, engineer, and developer with a proven ability to develop efficient, scalable, and fault-tolerant server solutions for complex problems. He has extensive experience and a proven track record of successfully analyzing, decomposing, and solving difficult programming problems. [click to continue...]
Small zlatko
Zlatko Duric, GermanyZlatko is an experienced Alfresco and JavaScript developer. He is focused on full-stack JavaScript web development (Node.js back-end and AngularJS front-end), and he has excellent knowledge and experience with the Alfresco document management architecture. [click to continue...]
Small eb43dfa1 37ac 462c 9ac2 7a21116383c5
Ryan J. Peterson, United StatesRyan is a top architect, entrepreneur, and developer. He boasts a proven competency in building cloud-scalable, extensible software and systems. He writes code that can be maintained and expanded over time as business systems and requirements adapt to market demands or pivots in core business direction. [click to continue...]
Small 841d0035 9a82 401c aceb 84ec0fc2136b
James C Russell, United KingdomJames is an experienced Ruby, JavaScript and React.js developer. He has written his own web frameworks and almost 100 open source projects. He has contributed to famous projects such as RubyGems, RSpec, Merb, and Puka, and has spoken at several conferences. [click to continue...]
Small 6497053d d474 4000 ab9a b76d518b3d31
Rashid Wakileh, United StatesRashid is a passionate lead front-end engineer. He is an expert in test-driven development, and has extensive experience in leading teams to create software solutions. He enjoys using JavaScript frameworks and thoroughly testing all aspects of his code. [click to continue...]

AngularJS blog posts

Never miss new AngularJS videos

Thank you for subscribing

You can edit your subscription preferences here.