Setup Yeoman and Angular

Yeoman and Angular

Note: I'm going to assume you already have Node.js setup. Also, N is a great version controller for Node.

Git Repo for this Tutorial is here: https://github.com/tskaggs/wooapp

Intro to Yeoman

Yeoman.io is a "web scaffolding tool" that's used to build generators for many different languages and frameworks. They have generators for React, Ionic and many more. Definitely browse and see what they offer!

Some people think using a generator is cheating or lazy, but I disagree. I think using a generator helps propel the project from nothing to something workable within minutes. If you want to build your codebase from the ground up, go for it. I just think it's a waste of time. I'm all about not rebuilding the wheel.

Now that you have an understanding of Yeoman, let's go ahead and get Angular up and running!

Angular Install

The Yeoman AngularJS Generator is amazing and gives you a working Angular app in minutes with Grunt or Gulp, SASS, Bootstrap, and testing with Karma. Not to mention the scaffolding, that we'll get to in a later post.

The Yeoman AngularJS Generator also has great documentation but I'll show how to get things going. I'll be taking commands straight from the Github README, just FYI.

Setup Environment
npm install -g grunt grunt-cli bower yo generator-karma generator-angular

This will install everything you need but I like using SASS for my styling, so let's install a ruby gem too!

gem install compass

Cool! Now we build!

Generate Angular App

Now let's make a directory and go in it.

mkdir my-new-project && cd $_

GENERATE TIME! 'wooapp' is the name of the app you want to build. We'll call this app 'wooapp' for now.

yo angular wooapp

Once you start the generator, you'll see this output.

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js
    create app/styles/main.scss
    ......more things happen

Hey! Now we're done! Let's run it!

grunt serve

Then you should see an output and a new tab open in your browser and should reload, thanks to grunt-contrib-connect.

Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Running "wiredep:sass" (wiredep) task

Running "concurrent:server" (concurrent) task

Running "compass:server" (compass) task
directory .tmp/styles
    write .tmp/styles/main.css (7.243s)
    write .tmp/styles/main.css.map

Done, without errors.


Execution Time (2016-08-08 12:17:23 UTC-6)
loading tasks   232ms  ▇▇ 3%
compass:server   8.6s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 97%
Total 8.9s

Running "postcss:server" (postcss) task
>> 1 processed stylesheet created.
>> 1 sourcemap created.

Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...

You should now see the open tab and the Angular app showing.
sceenshotofwooapp

Excellent! You now have your first Yeoman Generated Angular App. Next we'll install ui-router, play with some views, and update Bootstrap via SASS.

In the mean time, checkout the repo https://github.com/tskaggs/wooapp.