#FeaturedVideo
#ProfileBox
Table of Contents
1 Introduction
Yeoman is a collection of three tools – called Yo, Grunt, and Bower – that allow developers to concentrate on building the functionality of an application, rather than working to build its infrastructure. Yo handles scaffolding of the application, while Grunt takes care of build processes and Bower manages the application’s dependencies.
During development, these tools will do things like create the development environment, automatically reload the browser when changes are saved, handle notification for Angular apps, and make sure packages are up-to-date. When it comes time to deploy, they’ll minify all of the app’s code, optimize images, compile CoffeeScript and Compass files, and package the app for distribution.
Somewhere around 1,000 generators are available for Yeoman, ranging from AngularJS to Jekyll to Chrome extensions. Here, we’ll focus on the AngularJS generator.
2 Getting started
2.1 Installing Yeoman
Yeoman is installed using npm, Node.js’s package manager. npm ships automatically with Node — if you don’t have it, you’ll need to download and install Node first.
To begin, we tell npm to install the yo package globally (using the -g flag) which will allow us to run Yeoman in any directory. Depending on your platform and account configuration, you may need to login as an administrator or run npm install using sudo, though this isn’t considered a best practice.
$ npm install -g yoWe’ll also use npm to install Yeoman’s Angular generator. Again, make sure to specify the -g flag:
npm install -g generator-angular2.2 Generating an application
Yeoman will generate an app in the current working directory, so start with an existing empty directory or create a new one for your app. We’ll call ours ‘hello.’
$ mkdir hello
$ cd hello
Interaction with Yeoman takes place through the yo command. In this case, we want yo to use the angular generator to create an app called hello.
$ yo angular hello
_-----_
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
`---------´ | ladies and gentlemen! |
( _´U`_ ) '--------------------------'
/___A___\
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include Bootstrap and some AngularJS recommended modules.
[?] Would you like to use Sass (with Compass)? (Y/n)
The generator will ask a series of questions to determine how you want the app configured and what packages you’d like to include — would you like to use Sass, for example, or include Bootstrap. Then, it will generate the scaffolding.
Along with the app scaffold, the generator will also create JSON manifest files for Bower and npm packages, a gruntfile with build instructions, and test conf files for unit and end-to-end testing with Karma. We’ll spend most of our time in the ‘app’ directory.
2.3 Basic commands
We’ll use two primary commands with the Angular generator: grunt server and grunt build.
grunt server starts the server task and loads our Angular app in the browser for development. grunt build prepares the app for deployment, minifying code and HTML, compressing images, and concatenating and compressing CSS and JS files. Let’s start by intializing the server:
$ grunt server
Running "server" task
Running "clean:server" (clean) task
Running "concurrent:server" (concurrent) task
Running "coffee:dist" (coffee) task
Done, without errors.
Running "copy:styles" (copy) task
Done, without errors
Running "compass:server" (compass) task
directory .tmp/styles/
create .tmp/styles/main.css (1.548s)
Compilation took 1.549s
Done, without errors.
Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.
Running "connect:livereload" (connect) task
Starting connect web server on 127.0.0.1:9000.
Running "watch" task
Waiting...
During development, Yeoman will always show the latest version of our app in the browser. If we make any modifications and save the files, it will automatically reload the browser window with those changes.
3 Working with the app
Inside the /hello/app directory, we see that Yeoman has generated what looks like a standard index.html file for an Angular app. It has associated the app name with the <body> tag and included the CSS and JS modules that we specified during scaffolding. You’ll also notice a few additional build tags — in the form of HTML comments — that we’ll talk about later.
Yeoman builds the app itself in an app.js file within the /hello/app/scripts subfolder. By default, it includes a single route pointing to the / route which shows the main.html file inside of /hello/app/views and the main.js controller inside /home/app/controllers, which has itself been associated with the ‘hello’ app module and had some basic items set inside its scope.
3.1 Example: Adding a new route
We have a couple of options for expanding our app. We could manually create a new controller and a new route and then include it in the index.html file, or we can use the Yeoman generator to do the work for us.
First, we need to stop the server. Then, within the app’s working directory, we can tell yo to use the angular:route generator to generate a new settings route:
$ yo angular:route settings
invoke angular:controller:/usr/local/share/npm/lib/node_modules/generator-angular/route/index.js
create app/scripts/controllers/settings.js
create test/spec/controllers/settings.js
invoke angular:view:usr/local/share/npm/lib/node_modules/generator-angular/route/index.js
create app/views/settings.html
Looking back at our app, we see the the yo angular generator created a new controller called settings.js, then automatically added it to app.js and index.html. It also created a new settings test.
3.2 Packaging the app for distribution
When we’re ready to deploy the app, we can take advantage of grunt build. This is where the build tags that we saw earlier in index.html come into play.
Any files contained within the build tags will be compressed into a single file — this goes for both CSS and JS. The name of the output file is specified in the tag itself:
<!-- build:js scripts/plugins.js -->Executing grunt build will run the processes we discussed earlier — minifying code and HTML, compressing CSS, and optimizing images — and then package everything inside of a new /hello/dist folder that’s ready for production.
Note that we don’t need to handle manual minification inside of the controllers. We could do it ourselves using the array syntax, but Yeoman’s Angular generator includes a tool called ngmin which takes care of it.
#Signature
The post Using Yeoman with AngularJS appeared first on .