Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
68 lines (55 sloc) 2.59 KB


As you develop your app you'll want to add additional components. That's where the sub-generators come in.

AngularJS module

Important: While we are particularly proud of this feature, please note that using modules is only useful in large projects. We recommend that you only use them, if you know why you want to use them in your project. In our experience for most projects using one module is just fine.

  1. yo m-ionic:module <moduleName> - create a new module
  2. choose your template: sidemenu, tabs or blank
  3. add your module to the app/app.js:
'use strict';
angular.module('myProject', [
  // your modules
  1. restart your gulp watch task
  2. in your browser, depending on the template you chose, navigate to http://localhost:9000/#
  • /<module-name-in-kebap-case> for blank templates
  • /<module-name-in-kebap-case>/list for sidemenu and tabs templates
  1. Done! - see your new module in action!

AngularJS Components

AngularJS Components can be handily generated with the following command:

yo m-ionic:component <componentName>

This generates the following four files:

  • a component.js file
  • a component.html file
  • a component.scss file
  • a component.spec.js file


To include your component somewhere in your app, use the following syntax:

  content="'some content via attribute'">
  Some <span class="green">transcluded</span> content

Note: You should probably restart your gulp watch task.

More details on AngularJS Components can be found here:

Other AngularJS building blocks

A handy and fast way to create different angular components, handling all the boilerplate and test file generation for you. The <moduleName> is optional and defaults to the main module when left blank

yo m-ionic:constant <constantName> <moduleName>
yo m-ionic:controller <controllerName> <moduleName>
yo m-ionic:directive <directiveName> <moduleName>
yo m-ionic:filter <filterName> <moduleName>
yo m-ionic:pair <pairName> <moduleName> # creates controller & template
yo m-ionic:template <templateName> <moduleName>
yo m-ionic:service <serviceName> <moduleName>

If you have gulp watch running, gulp will automatically inject your new files into your application and they will be available right away.