generator-angular-cordova

Yeoman generator for Angular + Ionic + Cordova, let you quickly setup a project with sensible default and best practices

Getting started

• Make sure you have the following installed:

  • yo: npm install -g yo
  • grunt-cli: npm install -g grunt-cli
  • cordova-cli: npm install -g cordova

• Install any SDKs you need for developing platform applications:

  • iOS
  • Android
  • etc...

• Install the generator: npm install -g generator-angular-cordova

• Run: yo angular-cordova

Usage

Once you have ran yo angular-cordova and answered some questions, yeoman should now have scaffolded a cordova, ionic, angular skeleton for you.

Serve to web browser

To deploy as local web server and watch for changes requires the installation of LiveReload browser extension.

grunt serve --platform=ios: prepares and serves the application as a local web server at http://localhost:9000/, watching for changes then preparing/redeploying the web server.

Serve to emulator

grunt emulate: builds and emulates all installed platforms

grunt live-emulate: builds and emulates all installed platforms, watching for changes then building/redeploying the emulator.

Serve to device

grunt device: builds and runs all installed platforms

grunt live-device: builds and runs all installed platforms, watching for changes then building/redeploying.

Usage

Install generator-angular-cordova:

npm install -g generator-angular-cordova

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo angular-cordova, optionally passing an app name:

yo angular-cordova [app-name]

Run grunt for building and grunt serve for preview

Generators

Available generators:

• angular-cordova (aka angular-cordova:app)
• angular-cordova:controller
• angular-cordova:directive
• angular-cordova:filter
• angular-cordova:route
• angular-cordova:service
• angular-cordova:provider
• angular-cordova:factory
• angular-cordova:value
• angular-cordova:constant
• [angular-cordova:decorator] (#decorator)
• angular-cordova:view

Note: Generators are to be run from the root directory of your app.

App

Sets up a new AngularJS app, generating all the boilerplate you need to get started. The app generator also optionally installs Twitter Bootstrap and additional AngularJS modules, such as angular-resource (installed by default).

Example:

yo angular-cordova

Route

Generates a controller and view, and configures a route in app/js/app.js connecting them.

Example:

yo angular-cordova:route myroute

Produces www/js/controller/myroute.js:

angular.module('myMod').controller('MyrouteCtrl', function ($scope) {
  // ...
});

Produces www/views/myroute.html:

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

Controller

Generates a controller in www/js/controller.

Example:

yo angular-cordova:controller user

Produces www/js/controller/user.js:

angular.module('myMod').controller('UserController', function ($scope) {
  // ...
});

Directive

Generates a directive in www/js/directive.

Example:

yo angular-cordova:directive myDirective

Produces www/js/directive/myDirective.js:

angular.module('myMod').directive('myDirective', function () {
  return {
    template: '<div></div>',
    restrict: 'E',
    link: function postLink(scope, element, attrs) {
      element.text('this is the myDirective directive');
    }
  };
});

Filter

Generates a filter in www/js/filter.

Example:

yo angular-cordova:filter myFilter

Produces www/js/filter/myFilter.js:

angular.module('myMod').filter('myFilter', function () {
  return function (input) {
    return 'myFilter filter:' + input;
  };
});

View

Generates an HTML view file in www/views.

Example:

yo angular-cordova:view user

Produces www/views/user.html:

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

Service

Generates an AngularJS service.

Example:

yo angular-cordova:service myService

Produces www/js/service/myService.js:

angular.module('myMod').service('myService', function () {
  // ...
});

You can also do yo angular-cordova:factory, yo angular-cordova:provider, yo angular-cordova:value, and yo angular-cordova:constant for other types of service.

Decorator

Generates an AngularJS service decorator.

Example:

yo angular-cordova:decorator serviceName

Produces www/js/decorators/serviceNameDecorator.js:

angular.module('myMod').config(function ($provide) {
    $provide.decorator('serviceName', function ($delegate) {
      // ...
      return $delegate;
    });
  });

Getting To Know Yeoman

Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced.

If you'd like to get to know Yeoman better and meet some of his friends, Grunt and Bower, check out the complete Getting Started Guide.

License

MIT