如何设置开发环境，例如egghead.io视频

Question

I want to setup a environment on my machine to learn AngularJS. I saw in the videos of egghead.io where he keeps typing AngularJS code and when it refreshes through a server and displays the changes in realtime in the browser. How to do that? I see WebStrom logo in the videos but that's it.

Answer 1

You will need a server to setup your files. The videos you saw might have used browser-reload plugin which watches the files for changes and refreshes the page as soon as there's a change in any of the files. You can use yeoman (and one of the generators) for project setup (for scaffolding basically). You will need to install NodeJS first which will install NPM (node package manager) with it. Then you can install YEOMAN and use the generator respectively. My recommendation would be generator-gulp-angular . See the readme for the instructions, but basically you'll have to run these commands in command prompt after you've installed NodeJS properly.

npm install -g yo gulp bower

the above command installs yeoman,gulp and bower respectively

npm install -g generator-gulp-angular

the above command installs the gulp-angular yeoman generator

Then you can create a directory, say 'testDir' and navigate into it. Ie

cd testDir

Then run

yo gulp-angular

You'll be asked to select desired technologies. Once you're done, you can run the following command to see it working (with live reload)

gulp serve

Answer 2

not sure what video you're talking about but it sounds like he/she has a gulp or grunt task that is watching for changes and then livereloading your browser. It could be either

• gulp-livereload ( https://www.npmjs.com/package/gulp-livereload )

or

• browsersync ( https://www.browsersync.io/ )