Say "Hello World" to Angular 2

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 6 years ago
Updated a year ago

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.

[00:00] Install the Angular CLI with npm install -g, for globally, 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 angular 2-fundamentals. Once that has run, you can change into that directory, angular 2-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.

[00:34] 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. 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!'

[01:04] Hit save, and you'll see the browser will automatically refresh, and you'll see Let's get started!

Fabricio
Fabricio
~ 6 years ago

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?

Joel Hooks
Joel Hooks
~ 6 years ago

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 ¯\_(ツ)_/¯

Aviad Shikloshi
Aviad Shikloshi
~ 6 years ago

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: '<h1>First angular 2 app!</h1>' })

Pablo
Pablo
~ 6 years ago

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

Joel Hooks
Joel Hooks
~ 6 years ago

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: '<h1>First angular 2 app!</h1>' })

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

Super Dave
Super Dave
~ 6 years ago

What editor are you using?

Eddie Appell
Eddie Appell
~ 6 years ago

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!

Irvin Waldman
Irvin Waldman
~ 6 years ago

Yeah, where is the setup?

Joel Hooks
Joel Hooks
~ 6 years ago

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.

Irvin Waldman
Irvin Waldman
~ 6 years ago

Fair enough. Resuming the course. Thanks.

~ 6 years ago

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

Marian Zburlea
Marian Zburlea
~ 6 years ago

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({

})"?

John Lindquist
John Lindquistinstructor
~ 6 years ago

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.

Leon
Leon
~ 6 years ago

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

Craig McKeachie
Craig McKeachie
~ 6 years ago

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
John Lindquist
John Lindquistinstructor
~ 6 years ago

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.

Jaime Vega
Jaime Vega
~ 6 years ago

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.

MYJAR Frontend
MYJAR Frontend
~ 5 years ago

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 :) ?

jkr3
jkr3
~ 5 years ago

you need some js

Weng Koon Wong
Weng Koon Wong
~ 5 years ago

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

Jesse
Jesse
~ 5 years ago

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

Saravanaselvan
Saravanaselvan
~ 5 years ago

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?

~ 5 years ago

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 :(

Stephen
Stephen
~ 5 years ago

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?

amit
amit
~ 5 years ago

do we need angular-cli ? is there example without that ? I am facing lots of issue when and after installation. flowing message ng use angular2-test As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release, which will only support Node 6.9 and greater. This package will be officially deprecated shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

The specified command use is invalid. For available options, see ng help.

amit
amit
~ 5 years ago

working fine for me, i just follow this link https://github.com/angular/angular-cli.

Vu
Vu
~ 4 years ago

John, what is the software you use to have the laptop's status on the bottom of terminal screen?

Test Instructor
Test Instructor
~ 4 years ago
sun21170
sun21170
~ 3 years ago

I had to use npm install -g @angular/cli to install angular cli instead of npm install -g angular-cli, else I got quite a few warnings about some packages being deprecated.