Start with 7 free days of training.

Gain instant access to our entire IT training library, free for your first week.
Train anytime on your desktop, tablet, or mobile devices.

This AngularJS video training course with Ben Finkel covers introductory and advanced development topics with the AngularJS framework....
This AngularJS video training course with Ben Finkel covers introductory and advanced development topics with the AngularJS framework.

Recommended Skills:
  • Basic familiarity with: HTML, CSS, and JavaScript
Recommended Equipment:
  • A Desktop environment with an up to date web browser and text editor
Related Job Functions:
  • Web developer
  • Software engineer
  • Programmer/analyst
AngularJS is a JavaScript-based library produced by Google that aims to simplify the experience for web developers. Topics covered in this course include: Basic AngularJS applications, two-way data binding, controllers, scopes, form validation, directives, dependency injection, promises, unit testing, and application architecture.

Developers of all skill levels should find a lot to love about AngularJS, and the easy, integrated approach to web development that it offers. New developers will find the basic features of AngularJS covered in rich detail, while experienced engineers and architects are taken on a deep dive of advanced topics.
 show less
1. Introduction to AngularJS (16 min)
2. Basics of AngularJS (25 min)
3. Data Binding in AngularJS (16 min)
4. Controllers in AngularJS (17 min)
5. Managing Scope with AngularJS (18 min)
6. Expressions and Filters (20 min)
7. Extending Forms (23 min)
8. Introduction to Directives (21 min)
9. Advanced Directives (26 min)
10. Dependency Injection (16 min)
11. Providers, Services, and Factories (16 min)
12. AngularJS Routing (26 min)
13. Promises in AngularJS (26 min)
14. AJAX With AngularJS (29 min)
15. Animations (21 min)
16. Unit Testing (29 min)
17. Token-Based Authentication (22 min)
18. Handling Events (19 min)
19. Touchscreen Gestures (16 min)
20. Application Architecture (27 min)

Introduction to AngularJS

00:00:00

Introduction to AngularJS. Hello, everyone. This is Ben Finkel. I'm going to be walking you and talking you through this video series on AngularJS by Google. Now, AngularJS is a cool, kind of new JavaScript framework written entirely on the client side.

00:00:15

It works entirely in the client's browser. And it allows you to build powerful MVC applications right there inside of the browser. It's really neat stuff. It's got a lot of powerful ways to use it. So in this video series, we're going to cover it soup to nuts and learn about it all those different ways.

00:00:29

To start with, we're going to talk a little bit about what is AngularJS. I mean, seriously, what is it? It's got capital letters on the end of the word. What's going on there? So we want to know what AngularJS is and how it tries to differentiate itself from other web development frameworks out there.

00:00:43

Also going to have a little course overview. And we'll talk about this video series, what the videos try to accomplish, and how you can use it to get the most out of this series, plus what kind of tools that you're going to need to use as you follow along in the videos.

00:00:55

Lastly, we'll look specifically at some of the learning objectives that I hope you'll get out of this video series. And there's a lot of really cool stuff to learn about Angular, so pay real close attention to that. All right. If you're ready, I'm ready.

00:01:06

So let's get started. So what is AngularJS? Well, I'm glad you asked. That's a really good question. AngularJS came out of a guy named Misko Hevery in 2009 when he was working at Google. And Mr. Hevery, I've only ever seen your name written. If I'm mispronouncing it, I apologize.

00:01:21

The way the story goes is that he was working on a project called Google Feedback. And it had this enormous amount of front end code, 17,000 lines of code that they were trying to wrestle with. And that's a lot of code. They were trying to debug it and test it and get it right.

00:01:33

And it was just creating headaches for the whole project team. Misko raises his hand. And he says, you know what, I can rewrite this whole site, all 17,000 lines of code, with this little open source library that I've been working on on the side. So they said OK.

00:01:45

He comes back three weeks later. 17,000 lines of code have turned into 1,500. And everyone was a little bit blown away at Google. Right then and there, they knew they had something. And that's when AngularJS was born. Now, at its core, what AngularJS tries to do is solve the problem that all web development frameworks try to solve.

00:02:03

And that's the fact that HTML as we currently know it is a static language. HTML does not change. If you're familiar at all with HTML code, you know that this little bit I have up on the screen here will display a message on the screen. It says, hello Ben.

00:02:15

My name's Ben, but your name probably isn't. So how do you get HTML to change its message depending on the user? How do you get HTML to be more dynamic? Well, AngularJS is one way to do that. And that's the big, important thing that AngularJS does. It's dynamic.

00:02:31

Specifically, it tries to make HTML into a dynamic templating language. Now, you may be thinking hey, that's what JavaScript is for, right. JavaScript is dynamic. It allows me to do all this stuff. And in fact, that's what Angular is. The JS on the end of it stands for JavaScript.

00:02:45

You get access to all of Angular simply by including the JavaScript library at the top of your page, like you can see in this code sample here. If you were so inclined, you could reproduce every single thing that Angular does with your own JavaScript code and your own JavaScript library.

00:02:58

But don't do that. It would take a lot of work, and they've already done it for you. No need to recreate the wheel. Plus, one of the mission statements of AngularJS is to simplify the web developer's experience. So let them simplify it for you. They've taken a lot of the features and functionality that as a web developer you'd want, and they've built it into their library.

00:03:15

So take advantage of that. AngularJS is also concise. And what I mean by that is take a look at this code sample down here. Now, you can probably recognize that as HTML code. And you may even be able to figure out what it's doing if you pay attention to the code.

00:03:30

Well, here's what you don't know is that that's a fully functional AngularJS application. That right there. A couple extra HTML attributes and some curly braces, and there you have it. It doesn't interfere with the legibility of the HTML itself. It's still readable.

00:03:45

It's nice and concise. AngularJS is also open source. It's been developed with help from the open source community, so it's really extensible. You can integrate it with whatever other frameworks or libraries you need to use. You can change it however you need to change it to suit your own requirements.

00:04:01

Lastly, I want to point out that AngularJS is testable. This is a really important one. I don't know about you, but I know me as a developer, I was always terrible about testing my code. It's kind of annoying, and it's not always easy to do. Well, AngularJS goes out of their way to build functions that allow you to unit test your code very, very easily.

00:04:19

We're going to spend a lot of time in this video series on that. So pay real close attention to that. So, who is AngularJS for? Well the short answer is, it's for everybody. Anyone can take advantage of AngularJS, because it's so nimble and so flexible.

00:04:35

For Enterprise Web Development, Angular is part of the increasingly popular MEAN Stack. Angular is the A in MEAN, along with Mongo, Express, and Node. So due to the open source nature of each of the components of the MEAN stack, it can really be applied to any technology platform that your enterprise already has in place.

00:04:52

It doesn't matter what you're using, you can build these mean applications on it. Also, due to the open source nature of AngularJS itself, you can integrate AngularJS with whatever technology stack you're already using in your enterprise. So it plays real nicely with existing enterprise web development.

00:05:08

Angular is also great for prototyping and quick hit development. You know the kind of stuff where the client comes to you and they say, hey, we need this thing done. There's not really money in the budget for it. Can you get it done for us? Also, it needs to be done next week.

00:05:18

Well, AngularJS, Languages because it's so simple and concise to use, is great for that sort of thing. AngularJS is also great for hobbyist programmers, like say myself. Hey, I always want to use the latest and greatest technology, the newest tools. I want to know what's coming out of Microsoft, what's coming out of Google.

00:05:34

Well, here it is, AngularJS. It's also a lot of fun to program with AngularJS. If you're like me and you enjoy programming, AngularJS hits all the right buttons there. I also think AngularJS is good for new developers, or people learning web development.

00:05:46

And the reason for that is you don't have to bring a lot to the table to use AngularJS. Some basic HTML, CSS, and JavaScript knowledge is all you need. And you can pick it up and start using it right away. It also teaches a lot about best practices, including creating unit testable code.

00:06:01

And that's really important for new developers to learn these days. So, what about this video series? Who are these videos for? Well, all of the above, I'd say. As we progress in the series, we're going to move from basic AngularJS topics into more complex advanced topics.

00:06:15

Each topic will be covered in one video, one Nugget, that's 15 to 20 to 25 minutes long. We take a real deep dive into that topic. If it's new information to you, sit down with a cup of coffee, watch the video. And when you're done, you can turn right around and use what we've learned.

00:06:29

On the flip side, if it's a topic that you're familiar with, you're comfortable with it already, feel free to skip the video and move on to the next one. The videos are self-contained, and the only thing that's expected of you is that you know the information contained in the previous videos.

00:06:42

Like I mentioned earlier, the only thing you need to bring to the video series is some knowledge of basic HTML, CSS, and JavaScript. Now, don't feel like you need to be an expert in any of this. You simply have to recognize the syntax and know more or less how to write it.

00:06:56

Any complex topics that come up, I'm going to do my best to explain right in the video what's going on there and how you can use it. If I had to underline one of these though, it would be the JavaScript. After all, it's called AngularJS for a reason.

00:07:07

That's what you're going to need to know the most about. Now, as far as development tools go that you'll need to follow along in this video series, I'm going to make that as easy on you as possible. I'm going to the majority of my work in a playground called JSFIDDLE.

00:07:20

If you're not familiar with JSFIDDLE, don't worry about it. It's just a web browser utility that lets you punch in code and see the output right away. There's a lot of different playgrounds out there. You can use whichever one you're happiest with. I'll save my JSFIDDLE code, though, and share the URL with you so that after you watch the video, you can open it up on your desktop and play with the code right away.

00:07:39

Hopefully, that makes it nice and easy. So you don't just have to look at static code on the screen that I'm talking over. You can actually get in and muck about with the code yourself. When things get more complex, though, I will need an editor. Now, I'm not a big fan of IDEs.

00:07:52

I think they add a lot of complication to the learning process. So I'm just to use Sublime editor. It's a simple text editor. But really, you can use your favorite code editor. Whatever it is you like to use, you can do. Because all this is is JavaScript and HTML.

00:08:05

Anything that you use to write that kind of code, write that kind of text-- Notepad++ or WebStorm or Eclipse-- is going to work just fine. You'll also notice I haven't mentioned operating system, and that's because you can use any OS you want. Again, it's JavaScript.

00:08:20

It'll run any operating system that has a JavaScript interpreter. That's pretty much every one these days. Android, Windows, iOS, you name it, you can run it. Now, let's get into the good stuff. Let's take a look at what we're going to learn over the course of this series.

00:08:35

Like I mentioned earlier, we're going to start with the AngularJS basics. So what are those basics? Well, we want to start off talking a little bit about data binding in AngularJS. Data binding is a problem that every web development framework has. How do you get data that's dynamic, that changes every time your software runs, into your static HTML page?

00:08:54

How do you make that HTML dynamic? Well, AngularJS has a really elegant solution for this. And it's actually two way. So you can not only get data into your HTML, you can get data out of your HTML that your user has keyed in and into your code really seamlessly and really easily.

00:09:08

It's really cool, and it's a lot of fun to learn how to do. We'll also take a look at controllers in AngularJS. Remember, Angular is an MVC framework. MVC stands for Model-view-controller. So the controllers are the code, the JavaScript code in this case, that control the flow of your application.

00:09:24

They respond to user requests, they respond to user events, and they control what happens next. Really important part of an MVC application. Controllers are sort of in charge of the whole thing. You really want to make sure you have a solid understanding of them and how AngularJS implements controllers.

00:09:40

We will learn all about scopes in AngularJS, and in particular, something called the scope object. It's a really important part of AngularJS. If you've done any JavaScript development, you know that scope can be a little bit wonky. Well, it's very structured in AngularJS.

00:09:53

And it's important to know how to use the scope object and the whole scope hierarchy. There's a root scope object and it has children scopes. And those scopes have children scopes. And that's how you control what's in and out of scope. It's really important.

00:10:04

It's a really fundamental part of AngularJS. And we'll make sure that we cover it really in depth. We'll take a look at expressions in AngularJS. And we'll spend some time looking at form validation. And the form validation is really important. And you ought to know this if you've done any web development.

00:10:19

When users are filling out your page, when they're filling out forms on your page, you want to make sure that the things they type in are accurate. Email addresses should look like valid email addresses. Numbers and date should look like valid numbers and dates.

00:10:29

And that's especially tricky, because some of those things change depending on where your user is. Users in the United States write dates differently than users in Europe or China. So you really want to be able to handle form validation on the client side.

00:10:42

And AngularJS, as a client side web development framework, has some really cool built-in utilities to handle this for you. So we want to take a look at those and how you can integrate those in your application. With all that under your belt, you get everything you need to make some really cool, powerful AngularJS web applications.

00:10:57

You've got the basics down and you understand the framework. But you're not here just to learn the basics. You want to learn the cool stuff. You want to learn the advanced topics. So that's what we'll cover after that. But I'm going to go ahead right now and put air quotes with my fingers around the word advanced, because-- you'll hear me repeat this over and over with Angular-- it makes things so simple, so easy to do that even the advanced topics are not all that advanced.

00:11:18

They're actually pretty straightforward. We'll take a look at what Angular calls directives. And directives are just the way that Angular extends the HTML language, extends the vocabulary of HTML. And you see this NG prefix come up a lot when we're talking about it.

00:11:31

These are the custom attributes, the custom HTML elements that Angular introduces that allows us to write HTML that looks like HTML, but also has the dynamic abilities, the dynamic capabilities of AngularJS. And one of the cool things is that Angular actually allows us to create our own custom directives as developers.

00:11:48

So we can create our own custom HTML attributes and HTML elements, and embed them right inside of our document. Dependency injection is not a feature of AngularJS. It's a design pattern that AngularJS implements. It's a way of structuring, of designing your code.

00:12:02

And much like directives, we were using it all along in the basic section of the course. We just didn't know it. So in the advanced topics, we want to take a look at how Angular implements it, and how we can implement ourselves and use it ourselves to write good, solid, fundamental code.

00:12:15

This is one of those best practices that I mentioned earlier that Angular's real great about presenting to the developer. We'll take a look at routing in AngularJS. To this point, we've been looking at single page applications. That's very cool. But at some point, you're going to want to route your users elsewhere.

00:12:29

You're going to want to send them to another place. And if you've done any web development at all, you know how tricky it can be to do routing appropriately. You want to create URLs that are bookmarkable, that the user's can save and browse back to whenever they like.

00:12:41

And you want to create a routing structure that is browsable, that the users can use the Forward button and the Back button in their browser to navigate around in. So AngularJS uses something called the location service. There's that dollar sign again.

00:12:54

And that's going to help us route our users inside of our application and create multi-page applications that are intelligent and powerful. We'll want to take some time looking at getting external data. And that's using HTTP requests and promises. So let's face it, you're not always going to have all the data, all the information that you need right there available on the client PC.

00:13:13

You need to go pull data either down from your own web server, or from someone else's web server, a third party web service. And the HTTP requests are how you do that. Promises is another design pattern. That's a way of structuring the code so that you can handle asynchronous callbacks, and your application is not bound up, it's not blocked, while it's waiting for these external third party web services to reply.

00:13:35

Now, those are not all the advanced topics we're going to cover. We also want to look at some things like animation in AngularJS. AngularJS makes it really easy to create cool, popping animations on your client side web applications. And if you've use a modern web application, you know that that's what makes them really fun, really neat to use.

00:13:50

It really improves the user experience when things slide in an off the screen and move around cleanly and smoothly. That's what makes it feel neat and cool and modern. So AngularJS provides some features and functions to do that for us. We also want to talk about integrating with Node.JS.

00:14:05

And specifically, we want to talk about how to integrate this whole client side package with a server side package. Because to this point, we've only been talking about the client side and doing things on the client side of the application. But hey, you're probably going to be serving up a web application from a web server.

00:14:20

So we'll take a look at some examples on how to do that with Node.JS, even though Node is a topic for another conversation. We're going to spend some time talking about testing an AngularJS application. This is really important, two exclamation point important.

00:14:32

And that's because AngularJS, one of its fundamental mission statements is to create code that's easily testable. And to that end, AngularJS has built in a lot of hooks, a lot of functionality that allows you to easily create test harnesses. I might even say that testing is fun, although I wouldn't go that far.

00:14:47

No one likes testing, right? But because these features and functions angular includes there's no excuse for us as a developer to not properly tester AngularJS applications before we roll them out. It's really easy to do. It's really cool. And we want to make sure that we pay close attention to that.

00:15:04

We want to look at implementing some basic security with AngularJS. Hey, you live in this world. I live in this world. You know as well as I do that security is a big topic right now. It seems like every other day, you're hearing about somebody's code getting hacked into, somebody's personal information getting stolen from a major website.

00:15:18

So proper security methodology is important. We won't be able to go over it a ton in this course. But we do want to talk about how to implement a few basic security best practices with AngularJS. And then lastly, we want to talk about application architecture.

00:15:31

How do we tie all this stuff together? Where should files go? How should things be organized? We'll talk about all these different things, so it'll be good to just kind of go over it and see how you tie it all, package it up, and bundle it up into a solid application.

00:15:45

In this Nugget introduction to AngularJS, we looked at a very high level at what AngularJS is-- what it's trying to do, what problems it's trying to solve, the fact that it's a client based framework, and that it's written entirely in JavaScript. We also looked at a course overview.

00:15:58

We talked about who AngularJS is for, what kind of developers want to use AngularJS, and who this video series is for. We talked about how to get the most out of this video series, including what kind of tools you're going to want to have available to you while you watch these videos.

00:16:10

And lastly, we looked at the learning objectives for AngularJS, all the various topics that we want to cover so that at the end of this video series, you can put together a robust, fully featured AngularJS application. I hope this has been informative, and I'd like to thank you for viewing.

Basics of AngularJS

Data Binding in AngularJS

Controllers in AngularJS

Managing Scope with AngularJS

Expressions and Filters

Extending Forms

Introduction to Directives

Advanced Directives

Dependency Injection

Providers, Services, and Factories

AngularJS Routing

Promises in AngularJS

AJAX With AngularJS

Animations

Unit Testing

Token-Based Authentication

Handling Events

Touchscreen Gestures

Application Architecture

Please help us improve by sharing your feedback on training courses and videos. For customer service questions, please contact our support team. The views expressed in comments reflect those of the author and not of CBT Nuggets. We reserve the right to remove comments that do not adhere to our community standards.

comments powered by Disqus
Intermediate 7 hrs 20 videos

COURSE RATING

Training Features


Practice Exams
These practice tests help you review your knowledge and prepare you for exams.

Virtual Lab
Use a virtual environment to reinforce what you are learning and get hands-on experience.

Offline Training
Our iOS and Android mobile apps offer the ability to download videos and train anytime, anywhere offline.

Accountability Coaching
Develop and maintain a study plan with one-to-one assistance from coaches.

Supplemental Files
Files/materials that supplement the video training.

Speed Control
Play videos at a faster or slower pace.

Bookmarks
Included in this course
Pick up where you left off watching a video.

Notes
Included in this course
Jot down information to refer back to at a later time.

Closed Captions
Follow what the trainers are saying with ease.
Ben Finkel
Nugget trainer since 2014