Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds


Free Preview: Modern Web Apps With Angular


  • Overview
  • Transcript

Angular is more than just the next version of the popular AngularJS front-end framework. Angular takes all the best parts of AngularJS and improves them. It's now a powerful and feature-complete framework that you can use to build the best web apps. Built with TypeScript in mind, Angular takes advantage of futuristic language features such as decorators and interfaces, which make coding faster and easier. Angular is also a great platform for building cross-platform mobile apps.

If you want to create modern web apps with Angular, this is the course for you. In this course, Andrew Burgess will show you how to code a complete web app with Angular, using the most current features and architectural patterns. Follow along with Andrew and build a full-featured project management app, with user login and validation and real-time chat. You'll get lessons on the Angular template language, structuring your app, routing, form validation, services, observables, and more. So let's get started!

Learn JavaScript: The Complete Guide

We've built complete guides to help you learn JavaScript and learn Angular, whether you're just getting started as a web developer or you want to explore more advanced topics.

1. Introduction

1.1 Introduction

Angular was one of the best web development frameworks available. It made it really simple to create a whole bunch of little puzzle pieces that fit together to build your application in a very modular way. And it made a lot of interesting concepts like dependency injection and other things first tier features. And I've been using the past tense here because what we're gonna start talking about in this course is Angular 2, which is a completely different framework from Angular 1. Hi, I'm Andrew Burgess. And I think you'll find that Angular 2, while being an entirely different framework from Angular 1, still holds on to a lot of those core ideas of modularity, dependency injection and a lot of other great things. However, Angular 2 takes things a step further. It was made to be completely cross-platform. It's made with performance and speed and other things in mind. And I think you'll find that as we work through this course and build a simple project management application in Angular 2, that there's not much more you can ask for in a fully featured web development framework. We're also going to be using TypeScript in this series to take advantage of not only types but some other features such as interfaces and decorators and lots of other great features that aren't really there for JavaScript just yet. Well, there's a lot to learn, so when you're ready, let's get started.

1.2 App Demo

Before we get started with actual development, let me walk you through the project that we're going to be creating. Basically, this is going to be a simple project management system. Think of it as a super basic version of Basecamp or Trello, where we'll have projects and then those projects will have conversations, and you basically have a set of users that can interact in these areas. So we'll start on our home page here. And of course, notice that when we're not logged in, these links do not work. I can go ahead and log in as one of the users of the system. And once we log in, you can see that we have a Log Out button up here, which lets us know we're logged in. And now, I can go to the Projects page, which shows me a list of the projects that I have. Notice we have some icons here showing who's involved with each project. Another neat thing to notice, notice this Annual Company Dinner project, I'm actually not allowed to do anything in there. It's really just view only for this user, so we have a lock here to show that. And of course, their icon does not show up below. But let's check out this project here. You can see we have some different conversations going on here. I can open up a conversation, and I can go ahead and write a message. We could also start a New Conversation, and then I can go ahead and add a message here. And we do actually have some basic live features going on, too, for this conversation. You can see if I open up the same conversation in a different user account, I can add a message here. And notice, it immediately shows up in mine, and just a few seconds later, you can see it shows up over here for other users of our system. So in that way, we can have a dynamic conversation. So there you go. It may look like a pretty basic application, but I think you'll find that there are tons of Angular 2 features that we'll be able to use here. So if you're ready, let's begin by setting up the project in the next lesson.