Name: WebStorm - Setting Up Angular 2
Uploaded: 2016-01-12T17:23:02-06:00
Description: WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

https://app.egghead.io/api/v1/lessons/angular-2-webstorm-setting-up-angular-2/subtitles

WebStorm - Setting Up Angular 2

[00:00] Head over to GitHub at angular/angular2-seed. Grab this link right here. I'll copy it to the clip board.

[00:07] When you open up WebStorm, you can go to check out version control, choose Git. Go ahead and paste the link in here. Name it whatever. Clone it. Then, choose to open the directory.

[00:20] Then, in this directory, right-click on the package.json. Say run npm install. This assumes you have node installed already. I'm not going to add any of these files to Git, so I'll click OK. The npm install might take a while. Just wait for it.

[00:36] Then, WebStorm will begin indexing everything over here. Wait for that to finish. Then, right-click on package.json again. Go to Show NPM Scripts. Double-click on Start.

[00:46] Then, it will start loading up for you. If you're going to use this, come in here and break it out into windowed mode. Drag the windows somewhere else like another monitor.

[00:56] We already started it up. Let's jump to it. Right-click in Jump to Source so we can see which port this is on. Looks like it's on port 8080. If I hop over into the browser and go to the local host 8080, you can see we have an Angular app up and running. If I go into source app, seed app, you can see it's loading this template here which is this one.

[01:18] I'll just change home to away. Hit Save. You can see it changed this to away. It automatically reloaded for me.

[01:26] The final couple note is, I click OK for this. I'll let editor config override WebStorm's style. Editor config is this file here which tries to format files consistently across editors. WebStorm supports these options.

[01:40] In TypeScript, it asks us if we want to compile TypeScript to JavaScript. We'll say, "No" because this task that's running in the background that we already started is compiling the TypeScript for us, so we don't need WebStorm to do that for us.

WebStorm - Setting Up Angular 2

Share this video with your friends