Starting an AngularJs 1.5 SPA with Yeoman

This Tutorial is specially designed for developers to create a new SPA Project with Angular 1.5 as quickly and efficiently as possible. We will be using Yeoman with Gulp and Bower to give us a good head start.

Prerequisites

The following tools and frameworks will be used during this tutorial:

Npmhttps://nodejs.org/en/
npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers. Npm comes with the NodeJs installation.

Git for Windowshttps://git-scm.com/
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

1 Getting started

We’ll start with installing Yeoman (handles scaffolding of the application), Gulp (takes care of the build process) and Bower (manages the application’s dependencies). We will use Npm to do this, run the following command in a terminal:

$ npm install -g yo gulp bower

We will use Npm also to install the Yeoman generator:

$ npm install -g generator-gulp-angular

2 Generating an application

Now we have installed all the powerful tools and the generator template that we need, we can start with generating our application. First we need a fresh project directory of you choice and run the following magic command:

yo gulp-angular [app-name]

The generator will ask you a couple of questions, you’re free to take what you want.

CHOOSING YOUR REST-RESOURCE

$http – This is the easy and straightforward route. $http is pretty much what you’d expect it to be and since it’s so raw it means that you’ll probably write more code than you will with the alternatives but have the most flexibility and control.

ngResource – ngResource is Angular’s attempt at supplying a higher level of abstraction over $http. It used to be built in and has been separated to an external dependency. It basically supplies you with a relatively easy way to create objects that perform the different CRUD requests transparently. ( Isn’t a real player here.)

Restangular – Restangular is a perfect option for complex operations. It lets you easily attach custom behaviors and interact with your data. It’s promise-based, clean, and feature-rich. However, it might be overkill if your needs are basic

I have chosen the following options for this tutorial:

Sit back and watch yeoman do its magic. It 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.

After all the magic is done, you should have the following structure:

src/app/ directory
The app directory contains your static app. It has your html, css and javascript in it and it’s where you’ll spend most of your time developing.

package.json
The package.json file helps npm to identify our project as well as to manage all of it’s dependencies. It can also contain all sorts of other meta-data relevant to your project.

Gulpfile.js
The Gulpfile is a JavaScript file that is responsible for configuring your project as well as any tasks or plugins that your project requires.

node_modules
This is where all the node modules that your project depends on are stored.

.bowerrc
The .bowerrc file is used to pass general config options to bower.

karma.conf.js
Karma is a testing framework. We’ll use it to run a few tests for our Angular app.

3 Running the application

Congrats! You basically have a working application now.

To see this application in your browser you first need to start the server. you can do this with the following command:

$ gulp serve

This should open your default browser with the generated application:

4 Best practices

Now that we have a working application, I will give you few best practices:

4.1.Follow a style-guide

When working with a team especially a big team you need to think of an style-guide. This is important to maintain readability in your angular code. A nice example of a Code Style guide is: Angular Style Guide by Johnpapa

4.2 Splitting into separate files

Angular generated index.module.js contains all the references to all the modules and imports. Because the application can grow quickly I suggest splitting this core function into 4 smaller pieces:

Change the index.module.js:

import { config } from ‘./index.config’;
import { routerConfig } from ‘./index.route’;
import { runBlock } from ‘./index.run’;
/** Modules **/
import coreModule from ‘./core.module’;
import componentsModule from ‘./components/components.module’;
import mainModule from ‘./main/main.module’;
angular.module(‘angularTutorial’, [
coreModule.name,
componentsModule.name,
mainModule.name
])
.constant(‘moment’, moment)
.config(config)
.config(routerConfig)
.run(runBlock)

Create ./core.module.js

*This Module will contain all the default modules*
export default angular.module(‘angularTutorial.core’, [
‘ngAnimate’,
‘ngCookies’,
‘ngTouch’,
‘ngSanitize’,
‘ngMessages’,
‘ngAria’,
‘ngResource’,
‘ui.router’,
‘ngMaterial’,
‘toastr’
]);

Create ./components/components.module.js

*This Module will contain all the component modules*
/** Services **/
import { GithubContributorService } from ‘./githubContributor/githubContributor.service’;
import { WebDevTecService } from ‘./webDevTec/webDevTec.service’;
/** Directives **/
import { NavbarDirective } from ‘./navbar/navbar.directive’;
import { MalarkeyDirective } from ‘./malarkey/malarkey.directive’;
export default angular.module(‘angularTutorial.components’, [])
.service(‘githubContributor’, GithubContributorService)
.service(‘webDevTec’, WebDevTecService)
.directive(‘malarkey’, MalarkeyDirective)
.directive(‘navbar’, NavbarDirective);

Create ./main/main.module.js

*This Module will contain the Main Module*
import { MainController } from ‘./main.controller’;
export default angular.module(‘angularTutorial.main’, [
])
.controller(‘MainController’, MainController);

This will be the end of my first Angular 1.5 blog post, have fun good luck building you’re own Angular 1.5 Application!

For an example code see:
https://github.com/MaxSassen/AngularTutorial

Leave a comment