Say "Hello World" to Angular 2

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?

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

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>' })

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

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.

What editor are you using?

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!

Yeah, where is the setup?

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.

Fair enough. Resuming the course. Thanks.

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

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

})"?

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.

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

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

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.

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.

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

you need some js

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

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

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?

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

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?

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.

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

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

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.