Course info

Rating

(4143)

Level

Intermediate

Updated

Aug 19, 2015

Duration

6h 51m

Description

In this course, you will learn how simple it is to use Angular to create maintainable and testable single page applications. You will learn how to: bootstrap your Angular application; use AngularJS markup and expressions; create and use controllers; use built-in services and create custom services; turn your application into a SPA using routing; and create your own custom elements and handle events using directives. You will also learn how AngularJS allows you to do all thing using test-driven-development.

About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

Section Introduction Transcripts

Course OverviewHey everybody, I'm Joe Eames and this is Jim Cooper, and welcome to our course, Angular Fundamentals. Jim and I have been working with Angular for a long time and we are super excited to present this course to you. Angular is an amazing and comprehensive framework, which lets you quickly and easily put together applications without having to worry about manually updating the user interface when your data changes. It provides everything you need to create compelling applications on the web. In this course, we are going to learn all the major features of Angular and how to get the most from it, even if you are just a beginner. The features we'll cover are controllers and templates, which display the interface, services which contain your business logic, directives for creating your custom HTML components, how to get data to and from your server, and how to test your application. By the time we're through, you'll know how to build production-ready applications in Angular. Before starting this course, you should be familiar with JavaScript and web development, but don't worry if you're not an expert, a basic knowledge will be enough. We hope you'll join us on this journey to learn Angular with the Angular Fundamentals course at Pluralsight.

Introduction to AngularHi, this is Joe Eames, and this is Jim Cooper, and welcome to Pluralsight's course on AngularJS Fundamentals. Client-side JavaScript used to be simple enough that we could get away with very little thought as to the structure of our JavaScript, but as our web applications have become bigger and bigger, we need something to reign in all the resulting complexity. AngularJS allows us to toss out all that client-side spaghetti code and write simple and elegant MVC-style single-page applications. In module 1, I'll show you how simple it is to get your project bootstrapped with Angular seed and how to start working with Angular markup. Then, in module 2 I'll show you how to start organizing that code into controllers and how to use the built-in directives to control your view. Then I'll jump in, and in module 3 I'll show you how to abstract some of the complexity out of your controllers and into services to facilitate the single responsibility principle and make testing easier. After talking about services, I'll show you in module 4 how to use routing to turn your app into a true single-page app, and I'll demonstrate all the built-in power and functionality that comes with Angular routing. And finally, in module 5, I'll talk about one of the most exciting and powerful pieces of AngularJS, directives. I'll demonstrate how you can use AngularJS directives to create your own custom elements, observe changes, and handle events. And last, but certainly not least, I will jump back in and show you how the Angular team has designed AngularJS to allow you to do all this in a fully test-driven way. I'll demonstrate how to test your controllers, services, and directives, and even how to do full end to end UI testing.

Angular RoutingHi, this is Jim Cooper and welcome to this module on Angular JS Routing. In this module, we'll be taking a look at routing in AngularJS, and why routing is important in creating single-page applications. We've already seen some pain points because we haven't introduced routing into our demo application. For example, every page we've created has had to include all of the JavaScript and CSS references for that page. This is because our demo application is not yet a single-page app, and routing is a big part of making that leap. In this module, we'll explore how the routing in AngularJS can help us to transform this app into a single-page app.

Testing AngularIn this module, we're going to learn how to test our code with Angular. In Angular, we do our testing with Karma. We can test our code without Karma, but Karma is such a great utility, that we're definitely going to want to leverage it when we're testing our code. If you're interested in learning more about testing with tools other than Karma, my course on testing JavaScript covers the main testing libraries that are used when testing JavaScript, which are Jasmine, QUnit, and Mocha. Angular by default uses Jasmine, although, you can use any testing library. But, Jasmine happens to be better supported, so we're going to use Jasmine in this module. It's important to node that in this module, I'm going to assume that you already know how to use Jasmine. If you don't, again I'll refer you to my course on testing clientside JavaScript. I have an entire module on Jasmine. I highly recommend you go watch it. In addition to that, we'll be covering mocking. In that same course, I have an entire module on the sign on mocking library. That would be another good module to watch if you have no idea what sign on is and how to use it. After we talk about Karma, we're going to talk about how to unit test. We're going to start by looking at how to unit test controllers. Then, we'll look at how to unit test services, then filters. Then finally, we'll wrap up our unit testing by looking at how to unit test directives. The last thing we're going to look at is how to do end to end testing with Angular. End to end tests is a very unique and very powerful feature of Angular that allows you to write tests that exercise your application in a production environment. You can essentially automate the browser and go through scenarios that utilize your actual application, just like a user would, and make sure the application works the right way. These kinds of tests can be very valuable, but they can also be very brittle because they might break easily when you change your HTML. So, be careful when writing your end to end tests, that you don't make them too brittle by tying them very closely to your HTML. Because we'll be using some tools that are external to Angular, now is a good time to check the GitHub Repo for this course, and make sure that the course is up to date.