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.5 (370 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,461 students enrolled
85% off
Take This Course
  • Lectures 49
  • Length 5.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course Description

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!

What are the requirements?

  • Basic HTML, CSS, and JavaScript knowledge
  • General knowledge of how web applications work
  • Web browser

What am I going to get from this course?

  • 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

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!

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Welcome!

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.


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

Section 2: AngularJS Theory

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.


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.


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.

Section 3: Setting Up the Development Environment

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.


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.


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.

Setting Up the Development Environment Quiz
3 questions
Section 4: Controllers, Scope, and Dependency Injection

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.


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.


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.


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.


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.


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.


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.

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

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.


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.


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.


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.


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.

Building the Structure of the Application Quiz
7 questions
Section 6: Introducing $http

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.


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.


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.

Introducing $http Quiz
5 questions
Section 7: CRUD and User Interface Refinement

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.


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.


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.


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.


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.


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.

CRUD and User Interface Refinement Quiz
3 questions
Section 8: Routing with UI Router

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.


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.


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


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.


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.


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.


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.

Routing with UI Router Quiz
6 questions
Section 9: Setting Up a Backend with Firebase

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.


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


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.


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.

Setting Up a Backend with Firebase Quiz
3 questions
Section 10: Directives

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.


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


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.

Directives Quiz
4 questions
Section 11: Angular 2 Preview

Angular 2 is almost 100% different from Angular 1.x, but don't worry--the stuff we've learned throughout this course is absolutely worthwhile! Angular 1.x will be around for a long time to come and the knowledge you've gained in this course will give you context if you want to switch to Angular 2.

Let's take a look at how Angular 2 differs from Angular 1.x and what we can expect from it.


Angular 2 requires a "build step" if we use it with TypeScript, which is the recommended approach. The best way to get up and running quickly is to use a pre-made starter package. Fortunately, there are many of them available, and we'll see how to get started with a simple one called ng2-play.


Angular 2 is component-based and each component is created with the component decorator. Our app eventually becomes a tree of components. Let's see how we can create the parent component for the classified cards which will be the launching point for our app.


Since Angular 2 is component-based, we can use components within one another. Let's see how we can define a child component for a small portion of our classified card, and then make use of it in the parent component.

3 questions

Quiz on Angular 2

Section 12: Conclusion

That's a wrap! Great job on finishing the course. Here are some additional resources and parting tips.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ryan Chenkie, 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.

Instructor Biography

Code College, 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.

Ready to start learning?
Take This Course