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

Next lesson playing in 5 seconds


Free Preview: Get Started With Angular 2


  • Overview
  • Transcript

Angular 2 is the new version of the extremely popular AngularJS framework. AngularJS turned the front-end development world upside down when it was released, bringing together a number of new or recent web application development practices into a powerful and easy-to-use framework. With version 2, the Angular team has started from scratch with a completely new system. Many of the ideas behind Angular are still the same, but the API and developer experience are very different.

In this course, Envato Tuts+ instructor Reggie Dawson will get you started using the new Angular 2 framework. You'll learn how to build a simple web app from scratch—starting with scaffolding and tooling configuration. You'll learn how to use the TypeScript statically-typed variation of JavaScript to create Angular 2 components, services, and directives. Along the way you'll see how to implement the fundamentals of a modern single-page app: including routing, external API access, user input and validation.

Whether you're an experienced Angular dev wanting to make the jump to this latest version, or a new developer who wants to learn to create websites with the latest technology, this course is a great starting point for learning Angular 2.

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

1. Introduction

1.1 Introduction

Hello everyone, this is Reggie Dawson. Welcome to the Get Started with Angular 2 course for Tuts+. Angular is a popular framework for building web apps. For a lot of developers who rely on Angular, it came as a shock when the Angular 2 team announce Angular 2 will be a completely new framework built from the ground up. This required developers to learn the framework all over again. In this course I will discuss how Angular 2 works and how to get started with the framework. We will learn about type script and what it offers, and more importantly, why you should be using it. At the end of this course you should realize that Angular 2 is not that difficult to pick up and it should be easy to migrate applications to Angular 2.

2. A First Look at Angular 2

2.1 What Is Angular 2?

Hello everyone, this is Reggie Dawson. Welcome to the Getting Started With Angular 2 course for tuts plus. In the last few years, Angular has become the go to framework for building web apps. The Google built platform has found wide acceptance and has even been incorporated in other frameworks such as ionic and foundation. It was a big uproar when the developers of Angular revealed that the next version of Angular, Angular 2 will be a full rewrite. As a result, projects built in the original Angular will be incompatible with Angular 2. For many people who are using angular and production apps, this is very troubling. What can you do as your apps age and you need some sort of update? Fortunately, I have to say, moving to Angular 2 will be no big deal. The main knock against angular was the learning curve for new developers. The concept of connecting services to your controllers and building directives is hard to grasp for some. Angular 2 is a complete departure from Angular in that it is built completely in typescript. TypeScript is also the preferred language to build apps in, although you can create apps in ES5, ES6, or even Dart. Now, I know you may not be keen on learning a new language, but learning TypeScript is well worth it for many reasons. The first is that TypeScript uses ES6 syntax. If you are involved in JavaScript development, you will eventually need to learn the new features that ES6 offers. The next thing about Angular 2 is that it uses basic TypeScript concepts to build apps. For example, the basic Angular 2 component is based on a TypeScript class with attached decorators. In this way when we learn to use Angular 2, we are also learning TypeScript and ES6 by extension. Another change in Angular 2 is the use of components, as I just mentioned. Angular 2 is a huge change in the architecture of Angular apps. First of all, the controller is gone, the directive and services return, but in a different form than we saw in Angular. All of these work with components which form the backbone of Angular 2 apps. Components are both a controller and directive. The component will contain your view as well as the selector of the component. This mimics the behavior of a directive. The component will also include any logic you need, like a controller. It is with these self-contained components that we will build our app. Now I know this may seem limiting at first and a step back from Angular, but in fact, this is a new and powerful way to build dynamic web apps. This modular design makes Angular 2 perfect for building large scale web apps where you can swap out components on the fly. In this course, we will build an educational app that students can sign up to and view videos. As a proof of concept, we will build a service using the YouTube API and tie this service into our app, then we will learn about the routing component of Angular 2. After that, we will build an area to manage students. Through building this app, we will explore many of the new features available in Angular 2. After that, you should feel comfortable building your own apps with Angular 2. In the next video, we will get started by setting up our project and the related libraries we will need.