Ultimate AngularJS: Build a Real-World App from Scratch
4.4 (451 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,754 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ultimate AngularJS: Build a Real-World App from Scratch to your Wishlist.

Add to Wishlist

Ultimate AngularJS: Build a Real-World App from Scratch

Build a Single Page App with AngularJS, Angular Material, UI Router, and Firebase. Includes Angular 2 preview!
4.4 (451 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,754 students enrolled
Last updated 2/2016
Curiosity Sale
Current price: $10 Original price: $100 Discount: 90% off
30-Day Money-Back Guarantee
  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create Single Page Applications with AngularJS
  • Use the command line to make files and directories, and to install packages from NPM
  • Work effectively with Angular Material
  • Create AngularJS directives
  • Wire up a real-time backend with Firebase
  • Apply routing to any Angular 1.x application with UI Router
  • Create a basic Angular 2 application with multiple components
View Curriculum
  • Basic HTML, CSS, and JavaScript knowledge
  • General knowledge of how web applications work
  • Web browser

This course will show you--from start to finish--how to build a real-life application with AngularJS. Angular is awesome, but it can be tricky to learn, especially if you are newer to web development. This is especially true if you're trying to figure out how to build an actual working application in it. It can seem like a daunting task--especially since many tutorials out there don't show how to do it from scratch.

The good news is that it's not that hard once you know how all the pieces work together. This course will teach you those pieces and how they fit together so that you can build your own real life single page web applications that persist data to a database.

This course is for all levels, but you will find it especially useful if you are newer to web development. You should know some HTML, CSS, and JavaScript, but by no means do you need to be an expert. We'll be using tools like the command line and NodeJS to install packages, but we'll be seeing how to use them from scratch, so you don't need to have prior knowledge of them.

This course brings together many commonly requested AngularJS subjects that aren't seen in a lot of other ones, including:

  • Directives
  • Routing
  • Angular Material
  • Angular 2

If you want to learn how to build a single page app with AngularJS, and want to learn it from scratch, then this is the best course you'll find. See you in there!

Who is the target audience?
  • Beginner JavaScript Developers
  • Web Designers of all levels
  • Web developers of all levels
  • Anyone wanting to learn how to make awesome apps with AngularJS!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
49 Lectures
2 Lectures 03:13

Welcome! Purchasing this course was a great choice. Let's look at what we'll build and how it will teach you how to use AngularJS.

Preview 02:10

Nice to meet you! I'm a full-stack developer from Canada. Here's a little bit more about me.

Who is Ryan?
AngularJS Theory
3 Lectures 14:10

The web has changed a lot since the early days, and one of the reasons we're able to make single page apps with frameworks like AngularJS is because JavaScript has improved a substantially. Let's take a closer look at what single page apps are and how they differ from traditional round-trip applications.

Preview 05:25

Creating single page apps with plain old JavaScript is possible, but it's difficult. Let's see where exactly AngularJS fits in and how it helps us to develop SPAs.

What is AngularJS Trying to Solve?

AngularJS has many great features and is great to work with, but there are a few downsides that we should consider as well. Let's take a look at some of the ways Angular falls short, but also why it's worth using.

The Good and the Bad
Setting Up the Development Environment
3 Lectures 18:55

We need a few tools before we start our project, including:

  • A text editor
  • The native terminal or program like iTerm2
  • NodeJS

Let's get these installed and configured.

Tools We Need

We'll need a solid project directory structure for the application we'll be building. The way that we organize our directory for an AngularJS app comes down to a mix of preference and practicality, so we'll stick with a pretty standard structure that you'll see in a lot of larger apps. We'll use the command line to create our folders and files so that we can get a better feel for how to use it.

Preview 07:33

The best way to get up and running with an AngularJS app is a simple "Hello, World" example. Let's set one up to see how to bootstrap an Angular application.

Making a Hello World App

Setting Up the Development Environment Quiz
3 questions
Controllers, Scope, and Dependency Injection
7 Lectures 21:39

There are many patterns in software development, and one of the most popular is the MVC pattern, which stands for "Model-View-Controller". AngularJS uses the MV* (the * meaning "whatever"), but let's take a look at what's involved in the MVC pattern to get some context.

The MVC Pattern

Controllers are a core feature of AngularJS and they are used to communicate data to our views. Let's take a look at how to wire up a controller and send some test data to a view.

Digging Into Controllers

When starting out with Angular, often one of the first pieces of "magic" that we see is the mysterious $scope object. Let's take a look at what $scope is used for and how we can use it to link our controllers and our views together.

What is $scope?

You might have already seen two-way data binding at work if you've looked at any AngularJS examples. With two-way data binding, we can bind an input to a text element and the two will update one another automatically. This is a cool feature that doesn't require any extra JavaScript on our part.

Two-Way Data Binding

We've already seen some of the features of Angular's tempting as we've been doing these simple examples. Let's take a closer look at tempting to see what else it can do for us.

More on Templating

Dependency injection is all about how we get a hold of other pieces of code that we need in our apps. AngularJS has its own dependency injection system which offers a convenient and simple way for us to tell our controllers which dependencies we need. Let's take a look at how it works.

Dependency Injection

Sometimes when we use a third-party library in AngularJS, we want to be able to set some configuration on it. Providers offer us a way to do this. Let's take a look at how to customize the Angular Material library using the provider that comes with it.

What are Providers?

Controller, Scope, and Dependency Injection Quiz
4 questions
Building the Structure of the Application
5 Lectures 37:25

Directives are a powerful feature of AngularJS that allow us to create custom HTML elements and define their behavior. Even though we're at the first stages of learning Angular, it's useful to get a glimpse into what directives are and how they work so that we can make sense of the directives that Angular Material provides.

A Crash Course on Directives

Angular Material gives us many ready-to-use components and the first one we'll make use of is the toolbar. This will give us a top navigation area. We also need to craft the individual classified cards.

Preview 08:37

Most single page application frameworks have a "repeater" which gives us a way to loop over an array and repeat whatever we want for each item. In most cases, we want to template something out on each iteration.

Using ng-repeat

With filters we can easily change how our data is displayed in our views. This is useful for things like currency, dates, and casing. Since we have price data for our application, we'll put in the currency filter.

Implementing Filters

Most applications will need to hide and display different parts of the user interface based on some condition. This is useful for letting users do things like toggle sections of the app on and off. Let's take a look at the various ways we can conditionally hide and show elements.

Preview 14:34

Building the Structure of the Application Quiz
7 questions
Introducing $http
3 Lectures 17:05

So far, we've just been working with data that comes from our controller, but what we actually need is a way to fetch data from somewhere else. Since most applications will use remote data sources, we'll find out how to use Angular's $http service to make requests for data.

Working with Remote Data

Angular's $http service returns promises when we make requests for data. Let's take a look at how to use $http and handle the response from a GET request.

HTTP Requests and Promises

As our applications grow, we'll often find that we need to make the same HTTP requests in multiple areas of our application. Instead of repeating our code, we can create a service that abstracts the HTTP logic to one location. We'll use a factory to do this.

Switching to Services

Introducing $http Quiz
5 questions
CRUD and User Interface Refinement
6 Lectures 01:01:55

We need to make it possible for users to create, read, update, and delete classifieds. Angular Material provides a nice sidenav directive that we can use for our input form. Getting the form up and running will require a little bit of JavaScript in our controller.

Putting in the Sidenav

With the sidenav in place, we can how write the code that will accept new classifieds and save them locally to be displayed on the screen.

Preview 12:40

We can make use of our existing sidenav for editing classifieds. All we need to do is adapt it to handle that task by implementing an edit method which changes the values of existing data.

Editing Existing Classifieds

Deleting classifieds is a fairly straightforward matter--we just need to remove the specified data object from our array. This can be done by splicing it out.

Deleting Classifieds

We've already seen how filters work when we want to change the way a value gets displayed, but we can also use them to limit the data that gets displayed on the screen based on a search parameter. To do so, we need to bind an input element to a filter on the ng-repeat for our data.

Filtering Data

AngularJS makes it really easy to add animation to our apps if we use the angular-animate library. With it, we just need to add some CSS that describes how we want our animations to look.

Adding Animation

CRUD and User Interface Refinement Quiz
3 questions
Routing with UI Router
8 Lectures 01:11:12

Without routing, our whole application lives at one single URL. This is bad because we don't have a way to send people a link to a specific location within our apps. We should compare native desktop apps with web apps to get a sense of the concepts involved with routing.

Routing Concepts

With UI Router we deal in "states" of the application instead of routes. Let's take a look at how states work and how to configure them.

Preview 07:49

One of the problems with $scope is that we can easily get confused about property names in our views. However, if we use the "controller as" syntax, we can define a for our controllers that gives us explicit naming.

Switching to Controller As

Switching over to UI Router means that we have to refactor what we've build already and split things into separate components. It will be best if we start by turning the main part of our application (the classified listings) into a state with a URL route called "classifieds".

Refactoring the Classifieds Route

We want to have a distinct state for adding in new classifieds so that we can send someone a link to our app that has the sidebar open and ready to accept input for a new classified. We'll wire it up so that people can access the new classifieds state at /classifieds/new.

Creating the New Classifieds State

Sometimes we need to be able to fire events and listen for them in our application so that we can act on those events. An example of this would be re-routing the user to the main classifieds state when the sidebar closes. We can make this happen with a watcher by accessing $scope.$watch.

Setting Up Watchers

Now that we've split our app out into different controllers, we need a way to communicate data between them. For example, we need a way to tell our parent classifieds controller that a new classified has been added in so that it can be pushed onto the classifieds array. We can do this with $scope.$emit.

Emitting Data

If we want to be able to send someone a link to edit a specific classified then we need to be able to reference that particular classified in the URL bar. With UI Router we can have any of our URL parameters be variables, which is perfect in this case.

Editing Data with Route Params

Routing with UI Router Quiz
6 questions
Setting Up a Backend with Firebase
4 Lectures 26:37

Firebase is a real-time data store that we can hook into very easily. The service provides a library called AngularFire that makes working with Angular simple. We won't need to change much of our code to get our data persisted to a backend.

Firebase Concepts

Reading data from Firebase is easy and there are just a few changes we need to make to our code.

Preview 07:11

Since Firebase is a real-time datastore, when we add in a new classified from one device, we'll see it show up in our other devices immediately.

Adding Data to Firebase

The final step is to enable editing and deleting of our Firebase data. The ID we use in the URL bar will change to be the unique ID provided for each data object by Firebase.

Editing and Deleting Data from Firebase

Setting Up a Backend with Firebase Quiz
3 questions
3 Lectures 20:11

Directives are really useful because we can define custom HTML elements that wrap up any kind of complex bahavior we like. One of the keys to making them work is isolating their scope so that they are closed off from the outside world. Then, we make it possible for specific data to get in based on attributes we set up for the directive.

Isolating Scope

Our classified cards would make a great directive because there might be multiple places in our application that we would want to use them.

Setting Up the Classified Card Directive

There are a few steps to making a directive that works well. Let's finish out the classified cards directive to make sure it has the behavior we expect.

Finishing the Directive

Directives Quiz
4 questions
2 More Sections
About the Instructor
Ryan Chenkie
4.4 Average rating
2,338 Reviews
32,297 Students
3 Courses
Full-Stack Developer

Ryan is a full-stack JavaScript developer and works mostly with Angular and Node. He's a Google Developer Expert, Product Owner at Auth0, and also runs Angularcasts.io, a screencast site offering end-to-end Angular and JavaScript training.

When he's not coding, Ryan is hanging out with his wife, playing guitar, or nerding out about outer space.

Code College
4.6 Average rating
19,794 Reviews
229,648 Students
9 Courses
The Best Coding Courses on the Web

Code College is an online school that provides high quality learning material, courses, and training videos for students looking to learn web design, web development, marketing, online business, and more!

Founded in 2014 by Canadian entrepreneur, successful instructor, and blogger, Brad Hussey, Code College is a growing network of highly skilled instructors who provide the best quality tutorials, courses and learning material on the web.