Angular Project Setup Using Yeoman

Problem Statement

As per my experience with people, it always has been a challenge to decide the right folder structure for your front-end applications which can be globally accepted. Especially, if I talk about AngularJS project, people are confused between two structures:

Option one

Create different folders for controllers, directives, filters and views and keep all controllers, directives, filters and views in respective folder. Folder structure looks as shown below:

Folder

Option two

Create separate folders for each component or feature. And keep all controllers, directives, views etc within the folder created for respective features/components. It would make related codes easy to find in one place. In this case, the folder structure looks like:

Folder

Apart from folder structure confusion, there are other challenges regarding creating distribution-ready package by minifying JS, CSS and HTML files. We may need to write Grunt code from scratch for each project depending on the folder structure. Or we may need to find some online tools which can help minifying files.

Solution

The solution is Yeoman which can solve all the above problems. It helps to setup new projects by following best practices which has been accepted globally. It also provides tools to create production ready packages using the command line. We will discuss this in more detail.

What is Yeoman?

Yeoman is a tool which helps us to scaffold a complete new project or add libraries, APIs or add useful parts to the project by using its generators. Yeoman Generators are also called plugins. As stated in the official site of Yeoman:

“Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.”

Prerequisites

Yeoman requires some prerequisites installed before installing the Yeoman generators. Prerequisites are:

NodeJS
Node Package Manager (npm)

If NodeJS is not installed, please go to the official site of NodeJS and install it. It is not necessary to know or learn NodeJS. But NodeJS must be installed in the system. Once you install NodeJS, npm comes bundled with NodJS. To check if both NodeJS and npm is installed in the system or not, run below command in command prompt:

node --version && npm --version

Above command will show the versions of NodeJS and npm if these are installed in the system.

Tools required for Yeoman

Yeoman workflow inclues three tools to improve the productivity:

Scaffolding tool yo
Grunt (or Gulp) to build, preview or test the prject. In our case, we will be using Grunt
And the package manager Bower to manage dependencies

Installation and Configuration

Create project folder

All the global installations are done with the above commands. Now it's time to create a project main folder. Either we can create manually using Windows or create folder in command prompt. After folder creation either way, now move the root of the the main project folder.

Install yo globally

Now let us start with the installation process. Run below command in command prompt to install yo using npm:

npm install -g yo

In case of Mac, it may require to add ‘sudo’ at the beginning of the above command:

sudo npm install -g yo

I faced some other challenges when I tried to install yo globally (-g stands to install yo globally in your system). I got below error message in command prompt:

prompt

To fix this, I added --unsafe-perm in the above command, it started installation. So, after adding, the command looks like:

sudo npm install -g --unsafe-perm yo

Install angular generators globally

Yeoman generators can be installed using Node Package Manager (npm). So let us install generators for angular and karma by running below command in command prompt:

npm install -global generator-angular generator-karma

We can install a specific version of angular by appending a version number to angular with @ sign in the above command. In this case command will look like:

npm install -global [email protected] generator-karma

This will start installing a generator for angular and karma globally.

Scaffold a new Angular Project

Scaffolding a new project means generating files/folders based on the requirement. Now run the below command to create the required files and folders required for a Angular Project. This will:

Create folder structure for app, libraries etc.

Include <script> and css tags in the head of the index.html
Create Javascript files adding code for angular modules and few controllers

yo angular

After pressing enter it will ask for few inputs as shown below:

inputs

I am selecting “No”, “No” and then “Yes” as I don’t want to use Gulp and SAAS in this project. But for Bootstrap, I selected “Yes” as I want to include Bootstrap library in this project.

Next prompt is to select “Which modules would you like to include?” In this case, I pressed “Enter” as all the required modules are already selected by default. If you want to select/deselect any module this can be done by using arrow and space keys.

After pressing the enter key, it will take few minutes to install all required modules and libraries.

After running the above command your folder structure should look like:

folder

This is the basic folder/file structure gets created within the project root folder.

Launch the app in Browser

Run the below command in command prompt:

grunt serve:dist

This command will execute the Grunt tasks (configured in Gruntfile.js) to build the app. This will create a minified and optimized build in dist folder. And after the grunt process, app will be launched in a local server with a default port 9000. This port is also configured in Gruntfile.js which can be changed as per need.

Available Other Angular Generators

Like “yo angular” there are other generators available to create controllers, directives and filters etc. For Example, below is a command to create a Controller:

yo angular:controller MyController

This will create a JavaScript file in “app/scripts/controllers” folder with a name “mycontroller.js”. And adds basic code for controller inside the file:

'use strict';
/**
* @ngdoc function
* @name sample2App.controller:MycontrollerCtrl
* @description
* # MycontrollerCtrl
* Controller of the sample2App
*/
angular.module('sample2App').controller('MycontrollerCtrl', function()
{
this.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma'];
});

Like Controller, other generators are:

Directive

yo angular:directive myDirective

Filter

yo angular:filter myFilter

View

yo angular:view user

Service

yo angular:service myService

Decorator

yo angular:decorator serviceName

For more on Yeoman, please visit the official site of Yeoman.

Thanks!