Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Say "Hello World" to Angular 2

1:10 Angular 2 lesson by

The quickest way to get started with Angular 2 is to use the Angular CLI. The Angular CLI allows you to create new projects and startup a server in just a couple quick commands. This lesson shows how to install the cli, start the server, and make a simple change.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Are you ready to set up your very first Angular 2 application? Let's take a look at bootstrapping a simple application with Angular 2 components.

Avatar
Fabricio

John, thanks for the series. Quick question, is typescript required for Angular 2 or do you just find it convenient for the purpose of the series?

Avatar
Joel

TypeScript isn't required, but I think you'd be crazy not to use it with Angular2. It's very nice. It's also simply ES6, with some type sugar so ¯\_(ツ)_/¯

In reply to Fabricio
Avatar
Aviad

Is there a different from defining a View decorator with template like you did to just simply add a "template" value to the @Component object like this:
@Component({
selector: 'app'
template: 'First angular 2 app!'
})

Avatar
Pablo

Is there a Egghead lesson that shows how to setup a quick Angular2 + TypeScript dev environment?

Avatar
Joel

Is there a different from defining a View decorator with template like you did to just simply add a "template" value to the @Component object like this:
@Component({
selector: 'app'
template: 'First angular 2 app!'
})

No, the @View decorator has been (thankfully) deprecated in favor of the single @Component decorator for defining a component.

In reply to Aviad
Avatar
Super Dave

What editor are you using?

Avatar
Eddie

Did I miss an initial setup lesson? I can't get any of this to work, and I suspect it's because I haven't setup my project the way you have. I don't know what is in your "config.js" file, and I don't know if I've downloaded the correct versions of the dependencies. I just looked at what's in your index.html tried to bower install all of them... When I load my index.html I get a blank page, with no error, no nothing. Is this code downloadable so I can compare? Or is there another lesson before this that explains how you setup your initial index.html and it's dependencies? Thanks!

Avatar
Irvin

Yeah, where is the setup?

Avatar
Joel

Yeah, where is the setup?

The setup is provided in the source code. It "just works". This series is an introduction to the concepts of Angular 2 and doesn't focus on the mechanics of TypeScript. That will be covered in future lessons, for now git clone and investigate further.

In reply to Irvin
Avatar
Irvin

Fair enough. Resuming the course. Thanks.

In reply to Joel
Avatar

hi there. i think it'd be awesome to have each lesson's code examples in Plunker (instead of github). thanks! :)

Avatar
Marian

Hi. Could you please share with us what is the shortcut (or setup) in Webstorm to create the line "import {Component} from "angular2/core"; when you only have "@Component({

})"?

Avatar
John

Hitting "alt+enter" in WebStorm will help you to "fix" code. In this case, automatically import the missing classes. It's not perfect, but it's constantly improving and I'm really excited about what it could potentially be.

In reply to Marian
Avatar
Leon

Hello! Will this video and others in this course get updated soon? To work with the new Angular 2 beta? Btw I cloned the repo and don't see the Hello World folder. I just see src > lessons > 02-first-component as the first folder. Also in Atom there are some warnings about stuff missing in the tsconfig.

Error: Cannot find Angular2/core

Avatar
Craig

I experienced the same thing. Things I did to get this working again from the github repo:
1) created the directory and main.js file manually from the video
2) add this line to app.ts and commented out the rest
import "./lessons/01-hello-world/main";
3) either revert typescript version or add this line to the top of promise.d.ts
declare var Promise: PromiseConstructor;
See this github issue for more infromation:
https://github.com/angular/angular/issues/6468

In reply to Leon
Avatar
John

Thanks for the helpful reply.

I'll go through and update the repo to beta.7. It's mainly the configuration (like switching to using "typings.json" and typings from npm) for the code so there's no more warnings, etc.

In reply to Craig
Avatar
Jaime

One suggestion I would like to provide for the repository, I think I prefer to use branches in the repository instead of folders. In that case we can jump from branches from lesson to lesson and the code will be in the right state.

Avatar
Paul

After seeing this, I feel I've missed about 10 tutorials on setting up Angular2. What are the prerequisites to this course? ES6? Typescript? The prerequisite to your AngularJS course was simply JavaScript and HTML.

In reply to egghead.io
Avatar
MYJAR Frontend

After executing the example as said in github readme, I don't see any webpage.

npm start
> angular2-seed@1.0.0 start /Users/karamba/code/angular2
> webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 8080 --content-base src

 70% 2/2 build moduleshttp://localhost:8080/

When I curl it, I get:

curl -v http://localhost:8080/
*   Trying ::1...
* Connected to localhost (::1) port 8080 (#0)
> GET / HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.43.0
> Accept: */*
> 
* Empty reply from server
* Connection #0 to host localhost left intact
curl: (52) Empty reply from server

I'm using node v5.11.1 and npm 3.8.6. Help :) ?

Avatar
Sujeet Buddiga

can someone provide more leads on how to setup the env

In reply to egghead.io
Avatar
jkr3

you need some js

In reply to Eddie
Avatar
Weng Koon

Can't follow the first video. How to set things up after cloning the github code????

Avatar
Jesse

It might have been good to call attention to the changed delimiters at the end. You replace 'app works!' with Let's get started but if I don't change the quote from ' to ` then I will have errors caused by the ' in Let's

Avatar
Saravanaselvan

Hi John,

I need help in installing angular-cli in Windows 7. I am getting an error like build failed in node-sass. Any idea?

Avatar
Tarek

The web-app is getting stuck on loading... when running ng serve...! please help!
ERROR in ./src/main.ts
Module not found: Error: Can't resolve '@angular/platform-browser-dynamic' in 'C:\angular2\angular2code\src'
@ ./src/main.ts 2:0-75
@ multi main

ERROR in ./src/main.ts
Module not found: Error: Can't resolve '@angular/core' in 'C:\angular2\angular2code\src'
@ ./src/main.ts 3:0-47
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/symbol' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 1:0-28
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/object' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 2:0-28
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/function' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 3:0-30
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/parse-int' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 4:0-31
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/parse-float' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 5:0-33
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/number' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 6:0-28
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/math' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 7:0-26
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/string' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 8:0-28
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/date' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 9:0-26
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/array' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 10:0-27
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/regexp' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 11:0-28
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/map' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 12:0-25
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/set' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 13:0-25
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/reflect' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 14:0-29
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es7/reflect' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 15:0-29
@ ./src/main.ts
@ multi main

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'zone.js/dist/zone' in 'C:\angular2\angular2code\src'
@ ./src/polyfills.ts 16:0-27
@ ./src/main.ts
@ multi main

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve '@angular/core' in 'C:\angular2\angular2code\src\app'
@ ./src/app/app.component.ts 10:0-42
@ ./src/app/index.ts
@ ./src/main.ts
@ multi main

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/core' in 'C:\angular2\angular2code\src\app'
@ ./src/app/app.module.ts 11:0-41
@ ./src/app/index.ts
@ ./src/main.ts
@ multi main

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/platform-browser' in 'C:\angular2\angular2code\src\app'
@ ./src/app/app.module.ts 10:0-58
@ ./src/app/index.ts
@ ./src/main.ts
@ multi main

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/forms' in 'C:\angular2\angular2code\src\app'
@ ./src/app/app.module.ts 12:0-45
@ ./src/app/index.ts
@ ./src/main.ts
@ multi main

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/http' in 'C:\angular2\angular2code\src\app'
@ ./src/app/app.module.ts 13:0-43
@ ./src/app/index.ts
@ ./src/main.ts
@ multi main

ERROR in [default] C:\angular2\angular2code\src\app\app.component.ts:1:26
Cannot find module '@angular/core'.

ERROR in [default] C:\angular2\angular2code\src\app\app.component.ts:5:12
Cannot find name 'require'.

ERROR in [default] C:\angular2\angular2code\src\app\app.component.ts:6:11
Cannot find name 'require'.

ERROR in [default] C:\angular2\angular2code\src\app\app.module.ts:1:30
Cannot find module '@angular/platform-browser'.

ERROR in [default] C:\angular2\angular2code\src\app\app.module.ts:2:25
Cannot find module '@angular/core'.

ERROR in [default] C:\angular2\angular2code\src\app\app.module.ts:3:28
Cannot find module '@angular/forms'.

ERROR in [default] C:\angular2\angular2code\src\app\app.module.ts:4:27
Cannot find module '@angular/http'.

ERROR in [default] C:\angular2\angular2code\src\main.ts:3:39
Cannot find module '@angular/platform-browser-dynamic'.

ERROR in [default] C:\angular2\angular2code\src\main.ts:4:31
Cannot find module '@angular/core'.
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.82 kB 0
webpack: bundle is now VALID.

In reply to egghead.io
Avatar
Tarek

Solved by running npm install!

In reply to Tarek
Avatar
mrsoto

could this kind of huge copy&paste be moderated?

In reply to Tarek
Avatar

i had to run npm install -g angular-cli@latest to get the beta version v1; running npm install -g angular-cli, picked up a pre-release version :(

Avatar
Stephen

Where is an overview or 'Setup' Section for this Tutorial? Using generators is not the best way to introduce a new framework, it removes the new user from the basics in many ways. However in this case additionally, its a little unclear on whats going on and how things are actually being setup? Also, why Typescript here, can't we learn Angular2 without it? Frankly one of the benefits of JavaScript is its untyped form, if we need type checking there are other options, why do we use TypeScript, it seems another step extra since it also needs compiling?

Install the Angular CLI with npm install -g, for globally, angular-cli.

Terminal

$ npm install -g angular-cli

Give that some time to install, and then you'll have a command called ng, where you can say ng new and the name of your project. I'm going to name mine angular2-fundamentals. Once that has run, you can change into that directory, angular2-fundamentals/. Once you're in this directory, if you type ng serve and hit enter, that's the Angular CLI command to start up a server with the project you just installed.

Once this is ready, you'll see that the bundle is now VALID. So this server is available on localhost:4200. So let that run, and you'll see app works.

Browser

app Works

To change this, you can go into your project. Just open it in any editor. This angular 2-fundamentals directory, go into src/app/app.component.ts, and you'll see this app works. You can change this to whatever you want. I'm going to change it to Let's get started!

Hit save, and you'll see the browser will automatically refresh, and you'll see Let's get started!

Browser

Let's get started!
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?