Go back to the main page

Using Yeoman along with the ng-book

 

 

Stop manually downloading and assembling Javascript, CSS, and HTML files. Use Yeoman for that plus get best practices baked right in.

  1. Install the latest versions of Nodejs, npm, and then yo (Yeoman)
  2. Create a directory for testing and switch into it.
    3.   $ mkdir ~/www/labs && cd $_
  3. Install the Yeoman generator for Angular: generator-angular
    4.   $ npm install -g generator-angular
  4. Bring forth Angular scaffolding with Yeoman.
    5.   $ yo angular
    Since we are just testing book examples don't install SASS or Bootstrap. Hit 'Enter' to select all the defaults in step 3.
  5. Take a look at what Yeoman installed by browsing through the generated directories.
    6. The app/ directory is the central directory.
  6. Run grunt serve.
    7.   $ grunt serve
    Grunt serve will open up this page at localhost port 9000.
  7. Copy the simple data binding example from page 12 to the clipboard.
    8. Get started by using this snippet.
  8. Then paste it into app/views/main.html
    9. You can put the snippet anywhere within app/views/main.html. For this example it is right above the HTML5 Boilerplate section.
  9. Save the file and the Yeoman grunt serve task will automatically reload the page.
    10. Notice after saving app/views/main.html that grunt watch immediately kicks off a browser reload. Nice!.
  10. Go back to the browser and we can see that the simple data binding example is working.
    11. Typing into the input box affirms that Angular is operative.
  11. Enjoy the book and Yeoman!

  • Pushed on 01/13/2014 by Christian