UPDATE (4th October 2017): This Angular 2 tutorial has been updated to the latest version of Angular (Angular 4). Note that the Angular team has re-branded the terms
Angular 2 to
Angular 1.x to
AngularJS which are now the official names of these frameworks.
Earlier this week Lisa Ryrholm and I were at the first ngStockholm meetup helping people get started with Angular 2. We’re going to have yet another workshop next week and I thought to myself… Wouldn’t it be nice if the people coming to the workshop could have a detailed reference about each and one of the exercises in the workshop? Wouldn’t it be cool if this reference had nice explanations and step by step directions that they could use during the workshop or refer back to later on? Something in a neat tutorial format? Of course!
And voilà! Here it is! Are you interested in a step by step introduction to Angular 2? Then let’s get started coding!
Why Should You Care?
And not only that, it draws on all the teachings of tons of projects carried out by thousands of developers in AngularJS to provide a more consistent and compact developer experience. One with a reduced number of concepts to grasp and an easy-to-learn development model and syntax.
Angular 2 is the natural path forward for all the AngularJS developers out there and a great choice for those that appreciate an opinionated framework with a sensible set of defaults, focus on modularity and testability.
Is Angular 2 Ready?
Angular 2 is ready indeed! Since the initial publishing of this article Angular 2 has gone from beta, to RC, to final and now it’s in its version 4. It is used not only by numerous companies but even extensively at Google in more than 200 projects including AdWords, GreenTea (Google’s internal CRM system), Google Fiber and Google Cloud Platform.
The Code Samples
You can download the complete code samples for this blog post from this GitHub repo. You can also check the unbelievably cool online editor Stackblitz which has awesome support for writing Angular prototypes on the web. My recommendation is that you follow the tutorial along using your own development environment, that way you get to enjoy the full Angular developer experience. But if you don’t have time or energy to set it up right now, then try Stackblitz.
Getting Started With Angular 2 and TypeScript
Don’t Worry if You Haven’t Used TypeScript or ES6 Yet
I will be explaining all the TypeScript and ES6 features that you may be unfamiliar with as we go along.
If you are interested in learning ES6, I have written a ton of articles about it. I’ve also written an introduction to TypeScript that might be just what you need if you want to expand your TypeScript knowledge before or after following this Angular 2 tutorial. Additionally, you can take a look at ES6 in 350 bullet points which provides an awesome overview of ES6.
Want to Learn More About the Angular CLI?
Then check this article where I explain what it is and how you can use it to simplify your Angular 2 development environment.
This will create a new Angular 2 project from scratch and set it up so that you can use SASS as CSS preprocessor. If you go inside the
angular-get-started folder that should have just been created you’ll find a folder structure that will look more or less like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
You can test that everything works as it should by running the development server. Type the following command:
This should start the development server, open a browser and load your app. You can stop the server any time by typing
CTRL-C a couple of times in the terminal. But for the time being just rejoice! You have created your first Angular 2 application!
Index.html The Entry Point for Your App
index.html is the entry point to your application:
- It provides the HTML markup for your application with the custom
If you take a sneak peak at the
index.html file in your project you’ll see the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Webpack? What is that?
That’s where tools like Webpack step in. Webpack is a module bundler that takes all these files and modules, processes them and makes them available in a way that can be run in any browser. Moreover it can optimize your application by taking advantage of a rich community of plugins.
Take a look at the awesome Webpack docs if you’re interested in learning more.
Bootstrapping Your App
In AngularJS we used the
ng-app directive to point Angular 2 to the starting point of your application. In Angular 2 we use a bootstrapper. You can find the bootstrapping logic in the
What is a Module?
Generally, a module will contain code that encapsulates a specific functionality. The module will expose this functionality to the rest of the application by defining a series of
exports that other parts of the system can then
The core module for Angular 2 for instance is called
'angular2/core' and it gives you access to Angular core primitives like
1 2 3 4 5 6 7 8 9 10 11
In this file we import the
platformBrowserDynamic object from the
'@angular/platform-browser-dynamic' module and call its
bootstrapModule function with the
AppModule as argument.
There’s two interesting things to note here:
'@angular/platform-browser-dynamic'bootstrapper hints at the fact that Angular 2 is platform agnostic. That is, you can run it in the browser, but you can also run it on a web worker or in the server using different bootstrappers.
- Notice how we import modules in a different way, Angular 2 modules are imported by name, and application components are imported using relative paths.
bootstrapModule function with the
AppModule as argument tells Angular that this module is the main module for your application.
Wait… But What is an Angular 2 Module? I Thought We Were Just Using ES6 Modules in Angular 2!
Yes, we do use standard ES6 modules in Angular 2. Angular modules are just a new convenience for us developers, a higher level module to wrap ES6 modules that are all about developer ergonomics.
Angular 2 modules and the new
NgModule decorator let us declare in one place all the dependencies and components of our application without the need to do it on a per-component basis (like we used to do in previous versions):
1 2 3 4 5 6 7 8 9 10 11 12 13 14
NgModule decorator takes an object with the following information:
importsarray where you declare your module dependencies, for instance, browser, forms, routing or http. The
BrowserModuleused above contains all the dependencies necessary to run Angular 2 on a browser.
declarationsarray where you declare the components and directives that belong to the current module.
bootstraparray that identifies the root component that Angular 2 should use to bootstrap your application.
In this example we import an
AppComponent component from the
app.component.ts module and set it as the root of our application.
But What is a Component?
The component is the core building block of Angular 2 applications. It represents a reusable piece of UI that is usually depicted by a custom html element.
A component is self contained and is constituted by at least a piece of html code that is known as template, a class that encapsulates the data and interactions available to that template, and the aforementioned html element also known selector.
AppComponent looks like this:
1 2 3 4 5 6 7 8 9 10
It has an
AppComponent class that is decorated by some metadata in the form a TypeScript decorator
@Component which binds the class to its template, its styles and the
app-root selector (Can you remember the
<app-root> element from the
This metadata tells Angular 2 that whenever you see an
<app-root> html element you should render the template in
templateUrl, with the styles in
stylesUrls and in the context of the
If you are familiar with C# or Java, a decorator works exactly like an Attribute.
If you are not, then think of a decorator like a function that is applied to whatever it decorates. In this case, the Component decorator attaches some metadata to the
If we take a sneak peek at the template you’ll see the following:
1 2 3
title bit (which we call interpolation syntax) tells Angular 2 to display the content of the component
title variable when rendering the component. Indeed, if you run
ng serve you can see how the browser renders the text
app works! inside an
If you take a look back at the
AppComponent definition and at your project structure you’ll realize that the Angular CLI follows a convention when creating components:
- All files for a given component are placed within the same folder named like the component itself (in this case
- These files are named with
app.componentand have different extensions based on their function:
app.component.tsfor the component itself
app.component.htmlfor the template
app.component.scssfor the styles
Now let’s do a quick test to see how we can bind the
AppComponent class members to the template. Let’s change the
title property value from
app works! to
Star Wars PPlz!!!!!. If you now save the file, your browser should automagically refresh itself and you should be able to see the
Star Wars PPlz!!! as the title of your app (If you closed your browser just open it again and if you stopped the development server then remember to run
ng serve --open to start it again and see your changes).
Your First Component, Listing Star Wars People Of Note!
Lisa and I were discussing for a while which super duper cool service we would use for our workshop… Spotify, SoundCloud, instagram… And all of the sudden we came to this free and open Star Wars web service. So that’s what we’re going to be building, a gateway into the Star Wars universe. Starting with its peoples of note!
The first thing that we are going to do is not going to require services, not yet. We are going to create our first component to display a list of Star Wars people and we will start faking out that data.
It’s good practice to start by defining the domain model of our problem space, in this case a
Person. We’ll take advantage of TypeScript
interface (although we could’ve used a class as well) and create a
Person within the
person.ts file. But we won’t create it by hand, we will use the Angular CLI! Angular CLI to the rescue!
The Angular CLI has something that we call generators that let you scaffold parts of your application for you. For instance, you can use the following command to create an interface:
1 2 3
The result of running this command is a
person.ts file in your
Now let’s add some properties that are representative of a person:
1 2 3 4 5
TypeScript let’s you add type annotation to your variable and function declarations. This helps you with better tooling like intellisense and to catch type errors.
If you are interested in learning more about TypeScript type annotations, I wrote an article about it that you are more than welcome to read.
Now that we have defined the core object of our domain model let’s create our very first component: the
PeopleListComponent. Againt we take advantage of the Angular CLI and type the following:
1 2 3
This will generate a new folder
people-list and will place a TypeScript and a style files within that folder. Since we have selected the
--inline-template option, instead of using an external template file the component will use the
template property inside the
@Component decorator to define an inline template.
It will look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
app-people-list? Why App?
By default, when you create a new app with the angular CLI all your new components will be prefixed with the
app prefix. That’s because the custom elements standard requires custom components to be named with at least two letters separated by a dash to avoid conflicting with built-in browser elements like p, section, body and head.
You can change the prefix for you app in the
angular-cli.json file that contains the angular CLI configuration for your project. You can also set a prefix during project creation using the
prefix flag with
Ok, now we’ve got a component that we can render using the
<app-people-list> element. Indeed, you can appreciate how the Angular CLI creates a dummy template so you can test that the component works right away. But we still need to do some changes before we can display a list of Star Wars celebrities.
The next thing that we’ll do is to expose a
people property with an array of
Person with the mighty Luke, Darth Vader and Solo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
And now we’ll update its template so that we can represent a list of star wars people. Just like
ng-repeat in AngularJS, Angular 2 provides a repeater directive that let’s us repeat a part of a template:
1 2 3 4 5 6
* before the
ngFor denotes the fact that
*ngFor is what is called a structural directive, a directive that is going to affect the DOM in some way adding or removing elements to it. Soon you’ll notice how Angular 2 uses a lot of these cues in their syntax to convey a specific meaning and help you learn and understand what the different directives and parts of the framework do.
let person creates a local template variable that contains each item within the
people array and is bound to each
Putting everything together we get:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
Why Does that String Delimiter Look So Weird?
That’s because it is a backtick (`). Backticks are used to define the new ES6 template strings. They are a new great feature of ES6 that let’s you write multiline strings natively and insert any expression directly within a string with a very straightforward syntax.
Now we can update our
AppComponent to display the list of StarWars people. We only need to update the
And voilà!!!!! It automagically works! (again check the browser for an update or run
ng serve -o).
Once thing that is interesting to mention is that if you had followed the previous steps but you had created the new component with your bare hands it would not have worked. Why is that? That’s because the Angular CLI does a lot of things for you in the background. For instance, when we created the component before, the CLI not only created the component itself but it also wired it up so we could use it in our application.
Indeed, in order to be able to use a component within another component you need to make your application aware of it. You can do that in the
app.module.ts file, that is, in your Angular 2 module. If you take a look at this file you’ll discover the following:
1 2 3 4 5 6 7 8 9 10 11 12
Good job! You’ve started your path to learning Angular 2! Yey! We touched a ton of stuff in this blog post, Angular, TypeScript, the Angular CLI, modules, Webpack, bootstrapping, components, decorators, classes and template strings. Wow! Hope you’ve enjoyed the tutorial!
And if you are interested in getting started with Angular 2, don’t miss our next workshop next week!!!