software Logo

software video tutorials from Toptal software engineers

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

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…

In this video tutorial we show you an example of how to pass custom parameters into a custom filter in Angular JS. If you want to learn how to create a custom filter, check out our other video called “Creating a Custom Filter in Angular JS”.

Video transcript

In this video demonstration, we’re going to take a look at how we can pass parameters into our custom filters in AngularJS. Now here we have our application defined on this div DOM element here, and then down here we have the module for our application. Now you’ll notice that I’m going to be doing everything with the root scope in this demo.

Typically, you would create a controller and then use a child scope, but for a simple demo on filters, using the root scope is sufficient. OK, so I’m going to come up here and add a message template variable. And then down here in my run function, I’m going to say rootScope. message=”Hello World!”. We’re going to save that, we’ll come back to our web browser, reload the page, make sure that it loads fine and it does.

Excellent. There’s our “Hello World!”. Now, what we want to do, is we want to create a custom filter with a parameter. So to create a filter in AngularJS, we’re going to use the filter function, and I’m going to call this filter myConCat, and basically what we’re going to do, is we’re going to concatenate two strings together….

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…

In this tutorial we look at the flexibility of JavaScript function arguments and talk about more advanced techniques like passing multiple arguments into a function by calling an index value.

Video transcript

In this code demonstration, we’re going to take a look at function arguments. Now, function arguments in JavaScript are actually quite flexible. Let’s say I want to create a new function here called myFunc, OK? Now I can come down here and I can call myFunc just like this, and we’ll just have it output something to the console. Console.log( “myFunc was called”). Very simple. We can go to our web browser, we can reload our page, and we’ll see that it says, myFunc was called. But let’s say I wanted to pass in a parameter or pass in an argument, so let’s add a parameter here, we’ll call it param1, and then down here, we’ll pass in our argument and we’ll just say ‘Hi!’.

And now what I’m going to do, is I’m going to actually just put a colon there then put + param1. I’m going to save that, and then I can reload my webpage, and we’re going to see that we can see the value that we passed in was ‘Hi!’. Alright, so, so far that’s pretty standard, I mean, if you would look at any other programming language, you’d say, okay, that makes sense, but…

Here we show examples of multiple ways to invoke a function in your code and explore how “this” behaves in JavaScript

Video transcript

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…

Here we look at the effect of freezing an object in JavaScript and show you an example of how to do it.

Video transcript

In this demonstration, we’re going to take a look at what it means to actually freeze an object in JavaScript. So I’m going to create an object here called widget and we are going to give widget a couple of different properties here, so the first property we’ll give it is color, make it blue then we’ll give it a property called size and make it large, then we’ll give it another property called quantity and we’ll set it equal to three.

So here we have our widget object, now to kind of help us out with this demonstratio we are going to create a fuction called Displayinfo. Displayinfo is going to take parameters one is the objects itself followed by the property name and simply we are just going to output to the console log, the actual property descriptor information for a given property on the object.

So we’ll do Object.getOwnPropertyDescriptor just like that and then we’re going to pass in the object, and then we’re going to say property name and this will actually return out to us the property descriptor. So if we were to say dispalayinfo,widget,color; the output of this is going to look like this….

This is an example of how you can define many properties at once on an object in JavaScript using an Object Map.

Video transcript

In this demonstration, we’re going to take look at how we can define many properties on an object at one time. So let’s say I’ve got this object here. We’ll just make it an empty object literal. I can use the Object.defineProperty function to actually define a new property on this object.

So the first parameter is the object that I want to add the property to, then I’m going to add a new property called color, and then in here, I actually specify what my descriptor is going to be. So in this case, I want to make this property writable and I want to set the value of it to blue. So I can do this, and then I can come down here and I can actually say, console.log( object. color), and this will output to the web browser, the value of the property which is in fact blue. So I come here and I reload this, you’ll see that it outputs blue. But let’s say I wanted to define many properties on an object. Instead of just calling define property multiple times, I just want to pass in an object that has multiple properties defined.

I can…

A closure is an inner function that has access to the outer (enclosing) function’s variables and parameters. Here we take a look at some interesting examples of closures in JavaScript.

Video transcript

In this demonstration, we’re going to take a look at something that’s interesting about closures. I want to create a couple of global variables here. Var x, y and funcs, and funcs is going to be basically an array of functions. So I want to create a little loop here, we’ll say x=0 and then x<5, and then we’ll increment x on each iteration, and then we’re simply going to say, funcs.push, and we’re going to pass a function in here.

It’s going to be a very simple function, all it’s going to do, is do a console.log(x). So we’re going to basically create five functions, push them onto an array, and then we’re going to iterate over that array, and we are going to execute those functions. So we’ll do, y<5, y++, and then we’ll come in here, and we’ll actually say funcs, and we’ll reference the function with the y, and then we’ll actually execute it.

And so this will actually loop over all five functions and we’ll output the value of x to the screen. Now if we reload our webpage here, we’re going to see that we get 5 outputted five times. Now a lot of…

Here we discuss examples of the three different kinds of properties that can be added to a JavaScript object.

Video transcript

In this demonstration we’re going to take a look at the three types of properties that can be attached to an object. So the first type of property that we can attach is what’s known as an Instance Property. So I’m going to create a new Instance Property here on this on this widget object, we’ll call it Instance Func, it’s simply just going to be a function that actually outputs a line of text to the console.

So we’ll just say, an instance func was called, now we’re going to create another type of property, we’re going to create a Prototype Property so we’re actually going to put this one right off the Prototype of the widget object, and we’ll call this a prototype func just like this, and we’ll do it console.

log, a prototype func was called, there we go. The third type of property that we can have is what I call a Static Property. So we’re going to create a static func, we’re going to create this right off of the Widget Function Object put a function on here, and we’ll just have it output console. log a static func was called, there we go….

An example of how you can extract a prototype of an object and then replace the prototype’s methods with new custom methods.

Video transcript

In this demonstration, we’re going take a look at how we can take an object’s prototype and actually modify that object and extend it to perform additional functionality that we might be interested in. To perform this demo, I’m actually including 2/3rd party libraries, I’m going to be using jQuery, and I’m going to be using the Q promise library.

So down here I have set up my two deferred objects. I have an object called first Deferred and a second object called secondDeferred, and basically what I want to do, is I want to chain these two promises. So I first of firstDeferred. promise, and then hanging off that promise I have a then statement, which is then going to execute another function once that first promise is resolved. And the second deferred promise is going to be returned from this then statement, and once that promise gets resolved, then the final function here, saying both promises resolved, will be executed.

To actually resolve these, I’m just going to use a simple set Timeout. I have the setTimeout for the first Deferred to be resolved after 3000 milliseconds or 3 seconds, and for the secondDeferred, I have it set…

The top software freelance developers

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...]
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 2a088ce9 76cc 4abe 8675 95a9c9671498
Brandon Hernandez, TaiwanBrandon is an experienced developer who produces user-facing applications, server-side software, games, and support tools. He has experience in client-side web programming, customer-facing project management, software design, and coding. He is comfortable working alone and in a team. [click to continue...]
Small 61113685ead97ec7ec1bb36501f3fe18
Pablo Pera, United StatesPablo has taken more than 10 mobile apps from idea to millions of users in the market, as the lead engineer of multiple teams in various companies, including his own. Before focusing full-time on Android apps, he worked for Google and CERN (home of the LHC particle accelerator) as well as various tech startups in NY. He has invaluable experience in all areas related to an Android app from design and coding to acquisition and growth. [click to continue...]
Small cb3b14ceadc313f248b11bd464a80e32
Ted Cohn, Puerto RicoTed has 25+ years as a senior architect, technologist, developer, entrepreneur, and CTO. He led Barnes & Noble's Nook team in Palo Alto, created Pleo the dinosaur, Foodiebot chatbot ordering system and worked for Silicon Valley giants like Apple, Excite, and NeXT. He can develop new concepts, join/lead teams, and bring order to chaos. He loves innovating and delivering incredible products. Superb communication and presentation skills. [click to continue...]

software blog posts

Side list cover 1017nermin 03
The Zen of devRant

by David Fox - Co-founder and Head of Engineering @ devRant

Never miss new software videos

Thank you for subscribing

You can edit your subscription preferences here.