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:
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:
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:
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:
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:
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';
-
-
-
-
-
-
-
- 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!
Read more articles on AngularJS: