The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Say "Hello World" to Angular 2

Say "Hello World" to Angular 2

1:10
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.
Watch this lesson now
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 :) ?

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