Create AngularJs App With Yeoman, Grunt And Bower

AngularJs app with Yeoman

Overview

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.

Yeoman is a client-side stack that contains three tools and frameworks to help developers quickly build beautiful and scalable web applications. These tools include support for linting, testing, minification and more.

The Yeoman workflow is comprised of three core tools for improving your productivity and satisfaction when building a web app. These tools are:

  • yo - the scaffolding tool from Yeoman. Yo is used to generate things, from other generators to files and more.
  • A package manager, such as bower or npm. Bower is used for dependency management, downloading and installing .js components. 
  • A build tool, such as Grunt or Gulp. Grunt is used for task management such as building, previewing and testing.

Each of these projects are independently maintained by their respective communities, but work well together as a part of a prescriptive workflow for keeping you effective. Let’s walk through what these binaries can do.

Prerequisites

To get the most out of this tutorial we recommend you have the following skills and resources available:

  • A terminal and basic knowledge of the command line
  • NodeJS and NPM installed
  • Fundamental JS, CSS and HTML knowledge

You can check if you have Node and npm installed by typing:

AngularJs app with Yeoman

If you need to upgrade or install Node, the easiest way is to use an installer for your platform. Download the .msi for Windows or .pkg for Mac from the NodeJS website.

The npm package manager is bundled with Node, although you might need to update it. Some Node versions ship with rather old versions of npm. You can update npm using this command:

AngularJs app with Yeoman

You can check if you have Git installed by typing:

AngularJs app with Yeoman

If you don't have Git, grab the installers from the git website.

Step 1: Setting up yeoman dev environment toolset

Step 2: Create the fresh project

Step 3: Creating Views, Routes, and Controllers with angular:route

Step 4: Test & Run the project

Step 1: Setting up yeoman dev environment toolset

Installation is pretty straight forward, since the official build script does all of the hard work for you.

I. Install Yeoman

Once you’ve got Node installed, install the Yeoman toolset:

AngularJs app with Yeoman

As simply as that, we now have a powerful set of tools at our disposal. I’ll explain each one as we use it.

II. Install web-app Generator.

To scaffold a web application and before development we need to install a generator. Since we are going to use the AngularJS framework, let’s install the Yeoman AngularJS generator-webapp generator:

AngularJs app with Yeoman

For documentation and how to create custom generators please visit the wiki.

III. Confirm installation.

It is a good idea to check that everything is installed as expected by running commonly used Yeoman commands like yo, bower, and grunt with the --version flag as follows:

AngularJs app with Yeoman

Running the above should output three separate version numbers:

  • Yeoman
  • Bower 
  • Grunt CLI (the command-line interface for Grunt)

Step 2: Create the fresh project

I. Creating the Project.

Let’s create the directory where our project will be stored. 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 'myngapp'. Create a myngapp folder for all your codelab work:

AngularJs app with Yeoman

Note: Generators are to be run from the root directory of your application. Yeoman uses .yo-rc.json to determine the root of your project. This allows users to run yo n command from anywhere inside the project directory and have them applied from the correct location.

II. Creating the Application structure

Creating the initial directory contents and structure for our application is very easy, just execute the following command:

AngularJs app with Yeoman

This results in the following:

myngapp/

├── app
│ ├── 404.html
│ ├── favicon.ico
│ ├── index.html
│ ├── robots.txt
│ ├── components
│ │ ├── angular
│ │ ├── ...
│ ├── scripts
│ │ ├── app.js
│ │ ├── controllers
│ │ │ └── main.js
│ ├── styles
│ │ └── main.css
│ └── views
│ └── main.html
├── component.json
├── Gruntfile.js
├── karma.conf.js
├── karma-e2e.conf.js
├── package.json

In myngapp, we have:

app: a parent directory for our web application
index.html: the base html file for our AngularJS app
404.html, favicon.ico, and robots.txt: commonly used web files so you don’t have to create them yourself
scripts: our own JS files
app.js: our main AngularJS application code
controllers: our AngularJS controllers
styles: our CSS files
views: a place for our AngularJS templates
bower_components, bower.json: our JavaScript/web dependencies, installed by Bower
Gruntfile.js, package.json, and node_modules: configuration and dependencies required by our Grunt tasks
test: a scaffolded out test runner and the unit tests for the project, including boilerplate tests for our controllers.

III. Access generators via the Yeoman menu

Run yo again to see your generators:

AngularJs app with Yeoman

If you have a few generators installed, you'll be able to interactively choose from them. Highlight Run the Angular generator. Hit enter to run the generator.

Interaction with Yeoman takes place through the yo command. In this case, we want yo to use the AngularJS generator to create an app called myngapp.

The generator will ask you a couple of questions. You can answer yes to include Twitter’s bootstrap. Also answer yes to include ngResource. The rest we won’t need for now so answer no.

Sit back (for a few seconds) and watch the generator do its magic. Yeoman will create your files and folders, then it will run bower install (more on this in a moment) and npm install to fetch any dependencies and lastly it’ll perform any mandatory configuration.

AngularJs app with Yeoman

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.

Step 3: Creating Views, Routes, and Controllers with angular:route

Let’s add a few more things to our project before we start get on to some actual development. Generates a controller and view, and configures a route in app/scripts/app.js connecting them. Adding a new route, view and controller to your application is easy with this single command:

I. View

Generates an HTML view file in app/views.

AngularJs app with Yeoman

Produces app/views/user.html:

<p>This is the user view</p>

II. Routes

This command will make changes like:

  • Produces a home.js controller skeleton in the app/scripts/controllers folder.
  • Produces a home.js test spec skeleton in the test/specs/controllers folder.
  • Adds the home.html template to the app/views folder. 
  • Hooks up the home route in the main app module (app/scripts/app.js file).
  • Adds the home.js script include tag to your main app view index.html file.

Explicitly provide route URI

Below code will produces controller and view as above and adds a route to app/scripts/app.js with URI my/route.

AngularJs app with Yeoman

III. Controller
Generates a controller in app/scripts/controllers using below example command:

AngularJs app with Yeoman

Above command will produces app/scripts/controllers/user.js.

AngularJs app with Yeoman

IV. Filter

Filters are used for formatting data displayed to the user. Generates a filter in app/scripts/filters. See below example code:
 

AngularJs app with Yeoman

Above code will produces app/scripts/filters/myFilter.js with below code:

AngularJs app with Yeoman

V. Directive

With directives, you can extend HTML to add declarative syntax to your views. Generates a directive in app/scripts/directives via this example code:

AngularJs app with Yeoman

Above code will produces app/scripts/directives/myDirective.js like:

AngularJs app with Yeoman

VI. Services

For generates an AngularJS service then follow this example code:

AngularJs app with Yeoman

Above code will produces app/scripts/services/myService.js with code like:

AngularJs app with Yeoman

We can also do yo angular:factory, yo angular:provider, yo angular:value, and yo angular:constant for other types of services.

Step 3: Test & Run the project

I. Test the project Now our AngularJS app is ready to unit test with grunt. And for that we use command:

AngularJs app with Yeoman

Grunt takes care of running all of our tests using Karma by execute the above command. The test suite for the driver details controller should be fairly similar to the one we just saw. I recommend you try to figure it out for yourself as an exercise (or you can just take a look here, if you’re not up to it).

II. Run the project

After success unit testing, our is ready for run in browser. Our browser should open up to a welcome page ready for development. To start the local web server run the following command:

AngularJs app with Yeoman

The main aspects we will be tinkering with in the Gruntfile are tasks. The aim is to be able to easily run either the end-to-end tests (e2e) or all of the unit tests.

More about Bower

Bower is a package manager. Which is help us to find and install CSS frameworks, javascript libraries and AngularJS plugins with just a few simple commands. We can check what packages we have already installed by running this command from within the myTodo project directory created earlier.

Basically, bower is just another package manager. It is installed with npm (which is a separate package manager). Installing through bower will utilize your bower.json and Installing through npm will utilize your package.json.

Yeoman used bower (as package manager) to install Bootstrap for us earlier, but that was just the Bootstrap CSS. We want all the nifty Javascript widgets as well. You can install Bower as a global package with NPM.

AngularJs app with Yeoman

Interactively create a bower.json with:

AngularJs app with Yeoman

Packages are defined by a manifest file bower.json. This is similar to Node’s package.json.

I. Check for which modules are in projects by Bower

We can check which packages we have already installed by running this command from within the our AngularJS project directory created before:

AngularJs app with Yeoman

II. Search for related modules are available

To verify that there are available for our requirement, use Bower to search. For example search for app-router module:

AngularJs app with Yeoman

This command return result like:

AngularJs app with Yeoman

This command return result like:

AngularJs app with Yeoman

III. Maintain package dependencies

After install package we need to maintain this package dependencies by using bower install --save will add to your project’s bower.json dependencies array. This command add dependency to our bower.json config file. Installed packages will be placed in the bower_components directory. It is suggested to not commit that one to your VCS (just as with the node_modules directory).

AngularJs app with Yeoman

For example:We try with jquery-ui package for maintain as dependencies like: 

AngularJs app with Yeoman

The --save parameter flag tells bower to add this to our bower.json file as a dependency. This command result like:

AngularJs app with Yeoman

To uninstall a package simply use.

AngularJs app with Yeoman

This command will produce result like:

AngularJs app with Yeoman

This command also remove this package from bower_components folder and entry from bower.js as well.

When we run $ yo angular earlier in this codelab the generator scaffolded a test directory in the root of the mytodo folder, created a karma.conf.js file, and pulled in the Node modules for Karma. We’ll be editing a Jasmine script to describe our tests soon but let’s see how we can run tests first. The AngularJS generator has two included test frameworks: ngScenario and Jasmine.

Grunt as a task runner can do most of that mundane work with our zero effort. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier our job becomes. But all after we configured it through a Gruntfile.

Grunt runs on top of the Node.js platform and is distributed through the npm repository. It comes as two different tools grunt-cli which is the Grunt Command-line interface & grunt module. grunt-cli is installed globally while grunt is installed on a per-project basis.

SO grunt-cli need to installed globally:

AngularJs app with Yeoman

And after that we need to route into our AngularJS app and use Grunt and execute.

AngularJs app with Yeoman

I ended up installing all grunt dependencies manually.

AngularJs app with Yeoman

Note: you can install all of the dependencies in the photo above in one go with npm install.

Finally I ran the grunt command and it worked!

Run $ grunt test, you'll see some warnings in the Yeoman console. Don’t worry, that’s to be expected right now since our tests are currently failing for two reasons. Let's fix that.

AngularJs app with Yeoman

This command will result: 

AngularJs app with Yeoman