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.

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.

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 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 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 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 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 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 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 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’re going to take a look at several different ways to invoke a function. So, I’m going to define a very simple function here called myFunc, and we’re going to give it one parameter. And what we’re going to do, is we’re actually going to say console.log( “myFunc was called”), so we can see that the function itself was called.

We’re going to say console.log, and we’re going to actually say the value of the this variable. So we’ll just say, this, and then we’ll just output the value of this like this. And then we’ll do console.log, and we’ll do the value of param1. Okay? +param1. Now, you’ll notice here that I have this use strict, and use strict here on line 13 is basically something that was added to ECMAScript 5 to take care of some issues in JavaScript that were a little quirky and weren’t really a best practice.

For this part of the demo, I’m actually going to turn this off so that you can see the output of the this object under certain conditions, and then later on we’ll turn it back on and I’ll show you what the difference is. So…

Mark Wong-VanHaren, SpainMark is an entrepreneur, engineer, CTO, and artisan with decades of startup experience, including co-founding Excite.com. He makes complex problems simple with expressive, maintainable code. He believes in building small, well-tested, functional pieces, loosely joined by a well-documented contract. [click to continue...]

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...]

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...]

Ignacio Freiberg, ArgentinaIgnacio is a software engineer and architect with more than 8 years of experience in many programming languages, libraries, and frameworks. He enjoys working in freelance mode to give him the opportunity to constantly develop new skills, and he is familiar with many different paradigms and technologies. [click to continue...]

Rafael Chiti, United KingdomRafael is passionate about change and trying new things, both professionally and in general with his life. He is a skilled web developer with over 8 years of experience. He loves startups and is extremely proactive. [click to continue...]