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!
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.
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!
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.
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.