Writing your First Angular2 Web Application
Poor Man’s Reddit Clone
In this chapter we’re going to write a toy application that allows the user to submit a new article with a title and an URL. You can think of it like a reddit-clone. By putting together a whole app we’re going to touch on most of the parts of Angular 2.
Here’s a screenshot of what our app will look like when it’s done:
First, a user will submit a new link and after submitting the users will be able to upvote or downvote each article. Each link will have a score that we will keep track of.
For this example, we’re going to use TypeScript. TypeScript is a superset of JavaScript ES6 that adds types. We’re not going to talk about TypeScript in depth in this chapter, but if you’re familiar with ES5/ES6 you should be able to follow along without any problems. We’ll go over TypeScript more in depth in the next chapter.
Getting started
TypeScript
To get started with TypeScript, you’ll need to have Node.js installed. There are a couple of different ways you can install Node.js, so please refer to the Node.js website for detailed information: https://nodejs.org/download/ .
Do I have to use TypeScript? No, you don’t have to use TypeScript to use Angular 2, but you probably should. ng2 does have an ES5 API, but Angular 2 is written in TypeScript and generally that’s what everyone is going to be using. We’re going to use TypeScript in this book because it’s great and it makes working with Angular 2 easier. That said, it isn’t strictly required.
Once you have Node.js setup, the next step is to install TypeScript. Make sure you install at least version 1.6 or greater. To install it, run the following npm command:
npm is installed as part of Node.js. If you don’t have npm on your system, make sure you used a Node.js installer that includes it.
Windows Users: We’ll be using Linux/Mac-style commands on the commandline throughout this book. We’d highly recommend you install Cygwin as it will let you run commands just as we have them written out in this book.
Example Project
Now that you have your environment ready, let’s start writing our first Angular2 application!
Open up the code download that came with this book and unzip it. In your terminal, cd into the first_app/angular2-reddit-base directory:
$ cd first_app/angular2-reddit-base
If you’re not familiar with cd, it stands for “change directory”. If you’re on a Mac try the following:
- Open up
/Applications/Utilities/Terminal.app
- Type
cd, without hitting enter
- In the Finder, Drag the
first_app/angular2-reddit-base folder on to your terminal window
- Hit Enter
Now you are
cded into the proper directory and you can move on to the next step!
Let’s first use npm to install all the dependencies:
Create a new index.html file in the root of the project and add some basic structure:
<!doctype html>
<html>
<head>
<title>Angular 2 - Poor Man's Reddit</title>
</head>
<body>
</body>
</html>
Angular 2 itself is a javascript file. So we need to add a script tag to this document to include it. But our setup with Angular/TypeScript has some dependencies itself:
Traceur
Traceur is a JavaScript compiler that backports ES6 code into ES5 code, so you can use all ES6 features with browsers that only understand ES5.
Even though we’re using TypeScript, we’re using the Traceur runtime to polyfill (“backport”) some ES6 features to our ES5 code
The Angular team is working to remove the Traceur runtime as a dependency of Angular 2
We’ve vendored Traceur in the sample code, so to add Traceur to our app we add the following script tag:
<script src= "vendor/traceur-runtime.js"></script>
For more information, check the Traceur GitHub repository.
SystemJS
We also need to add SystemJS. SystemJS is a dynamic module loader. It helps simplify creating modules and requiring our code in our web app. It allows you to require the modules you need in the right order.
We’ve also vendored SystemJS in the example code so to add SystemJS we need to add this:
<script src="vendor/system.js"></script>
Angular2
And of course, we also need to add Angular itself. We have a version of Angular 2 in the code sample already, so to use it we can simply put this script tag:
<script src="vendor/angular2.dev.js"></script>
Writing a hello world application
Here’s how our code should look now:
<!doctype html>
<html>
<head>
<title>Angular 2 - Poor Man's Reddit</title>
<!-- Libraries -->
<script src="vendor/traceur-runtime.js"></script>
<script src="vendor/system.js"></script>
<script src="vendor/angular2.dev.js"></script>
</head>
<body>
</body>
</html>
We also need some CSS so our application will look good. Lets include a stylesheet as well:
<!doctype html>
<html>
<head>
<title>Angular 2 - Poor Man's Reddit</title>
<!-- Libraries -->
<script src="vendor/traceur-runtime.js"></script>
<script src="vendor/system.js"></script>
<script src="vendor/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- <- here -->
</head>
<body>
</body>
</html>
Let’s now create our first TypeScript file. Create a new file called app.ts on the same folder and add the following code:
Notice that we suffix our TypeScript file with .ts instead of .js The problem is, our browser doesn’t know how to read TypeScript files, only Javascript files. We’ll compile our .ts to a .js file in just a few minutes.
/// <reference path="typings/angular2/angular2.d.ts" />
import {
Component,
View,
bootstrap,
} from "angular2/angular2";
@Component({
selector: 'hello-world'
})
@View({
template: `<div>Hello world</div>`
})
class HelloWorld {
}
bootstrap(HelloWorld);
This snippet may seem scary at first, but don’t worry. We’re going to walk through it step by step.
The import statement defines the modules we want to use to write our code. Here we’re importing three things: Component, View, and bootstrap. We’re importing it from "angular2/angular2". The "angular2/angular2" portion tells our program where to find the dependencies that we’re looking for.
Notice that the structure of this import is of the format import { things } from wherever. In the { things } part what we are doing is called destructuring. Destructuring is a feature provided ES6 and we talk more about it in the next chapter. The idea with the import is a lot like import in Java or require in Ruby. We’re just making these dependencies available to this file.
Making a Component
One of the big ideas behind Angular 2 is the idea of components. In our Angular apps we write HTML markup that becomes our interactive application. But the browser only knows so many tags. The built-ins like <select> or <form> or <video> all have functionality defined by our browser creator. But what if we want to teach the browser new tags? What if we wanted to have a <weather> tag that defines the weather? Or what if we wanted to have a <login> tag that defines where we should put the login?
This page is a preview of ng-book 2.
Get the rest of this chapter plus hundreds of pages Angular 2 instruction, 5 sample projects, a screencast, and more.
Ready to master Angular 2?
- What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall? Imagine how quickly you could work if you knew the best practices and the best tools?
- Stop wasting your time searching and have everything you need to be productive in one, well-organized place, with complete examples to get your project up without needing to resort to endless hours of research.
- You will learn what you need to know to work professionally with ng-book 2: The Complete Book on Angular 2 or get your money back.
Get it now