Writing your first app on Angular 2 — Part 1

Angular 2 Beta is out for a while now and people are starting to develop their first app on it. I decided to give it a try, but I wanted an app a little bit more “real world” than the quick start tutorial from Angular’s official page. I also wanted a simple app, but not as simple as a TODO list. I chose to build a basic chat app. Among the three possible languages we can choose I got TypeScript, because Google seems to encourage people to use it. I split this tutorial in three posts:

  • Part 1: We’ll setup our environment and get out Angular app to display a label on the screen, just to make sure everything works.
  • Part 2: We’ll create the chat visual components.
  • Part 3: We’ll create a simple server in Express to store our messages and use Angular’s services to display them on our app.

Let’s start!

Pre-requisites

Before start on the app be sure you have installed the following tools:

  • Node.js
  • npm
  • bower

npm comes bundled with Node, a default Node installation should work on our case. You can download Node.js from here. To install bower you need to execute the following command:

npm install -g bower

After running this command bower is available to you globally, since we used the -g argument.

The basic setup

After all set up, we’ll need to create a folder on your computer to host the app. I’m using Windows and I want to create a folder called chat-app on C:Repositories, so I run this command under the C:Repositories dir:

mkdir chat-app && cd chat-app

When the command executes you will both create and access the folder.

After creating the folder we’ll create the package.json file inside it. This file tells npm which dependencies our application will need to download to execute properly. The content of the file is the following:

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent "npm run tsc:w" "npm run lite" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.3",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.11"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5"
}
}

Now we’ll run the command to install all of these packages. On your command/terminal window, still inside your chat-app folder, run the following command:

npm install

Since we’re using TypeScript, we’ll need to inform which configuration will be used to compile our code. To do it, create a file called tsconfig.json under the chat-app folder and paste this content on it:

{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"bower_components"
]
}

Both the tsconfig.json and the package.json file are the ones used on the Angular 5 Min Quickstart. The only change I made was add the “bower_components” line on the exclude property. If you want to get more information about that, take a look here.

Last (but not least) let’s add the package which contains the modules from bower. Create a file called bower.json under the chat-app folder and paste this content on it:

{
"name": "chat-app",
"authors": [
"Daniel Pereira"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.6"
}
}

After you have created the file, run the following command:

bower install

This command will install all the dependencies it finds on the bower.json file. In our case the only dependency we need is Bootstrap. Now we’re good to go! Let’s start to create our chat.

Making the first version

On our first version of the chat we just want to make sure Angular 2 is properly set. We’ll load our component in the html page, showing a “Success!” label. Inside the chat-app folder, run this command:

mkdir app && cd app

There’s no secret here, we’re using the same command we used to create the chat-app folder. Our structure until now should look like this:

chat-app
— app
— bower_components
— node_modules
— package.json
— tsconfig.json
— bower.json
— index.html

Inside the app folder, we’ll create the chat-app.component.ts file. The file is named following the name convention suggested by the Angular team (you can read more about it here). After you have created the file, paste the following code:

import {Component} from 'angular2/core';

@Component({
selector : 'chat-app',
template : '<h1>Success!</h1>'
})

export class ChatAppComponent {
}

The code above is a simple component declaration. First we import the Component class from Angular core package. The next step is to declare our component, with two properties in it: selector and template. The selector property defines the tag that we will use to reference this code on HTML. The template property is the value that will be inserted on the tag. In our case, every time Angular finds a chat-app tag, it will append with <h1>Success!</h1> on it.

Now that we have created our first component, we’ll need to show Angular how to start it. We’ll do it calling a function called bootstrap, which is part of the Angular library. Inside the app folder, create a file called boot.ts and paste this:

import {bootstrap} from 'angular2/platform/browser'
import {ChatAppComponent} from './chat-app.component'

bootstrap(ChatAppComponent);

This file is pretty simple. It imports our component using the bootstrap function and then proceeds to call it afterwards.

The next step is to compile the TypeScript, so it can produces a .js file to be executed on the browser. To do it, run this command inside the chat-app folder:

npm run tsc:w

This command will compile the .ts files as defined in the tsconfig.json file. It will also keep watching the files and recompile every time a change is made. You can kill this process now, we’ll come back to it later using a different approach.

On the chat-app folder, create a file called index.html and paste the following code:

<html>
<head>
<title>Live Chat — Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<! — 1. Load libraries ->
<! — IE required polyfills, in this exact order ->
http://node_modules/es6-shim/es6-shim.min.js
http://node_modules/systemjs/dist/system-polyfills.js
http://node_modules/angular2/bundles/angular2-polyfills.js
http://node_modules/systemjs/dist/system.src.js
http://node_modules/rxjs/bundles/Rx.js
http://node_modules/angular2/bundles/angular2.dev.js

<! — 2. Configure SystemJS ->

System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));

</head>
<! — 3. Display the application ->
<body>
<chat-app>Loading…</chat-app>
</body>
</html>

This code is the same from the Angular quick start tutorial, with two differences: the my-app tag is replaced with the chat-app tag we just created and the title is also changed. The index.html file imports the mandatory libraries and boots the system using SystemJs. You can read more about SystemJs on the Angular page if you want.

Now we have our first page ready to run! Go back to the chat-app folder and run the following command:

npm start

This command will execute the start script from our package.json file. We set this script to concurrently compile the Typescript files and to start a server for us.

When you run it a page will open automatically in your default browser and you should see a page with a “Success!” label on it. If it doesn’t open it automatically, the url to access our app is http://localhost:3000

This is it for today. In the next part we’re going to make our app collect the username and display it along with the chat input and the chat display components.

See you there.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: