Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
275 lines (234 sloc) 13.6 KB

POC to use anuglar2/ionic2 parts with angular1/ionic1

Implementing a really simple todo app with generator-m-ionic v1.6.0

Step 1: Add the typescript parts

install gulp-tsc, gulp-tslint and tslint module

  $ npm install gulp-tsc gulp-tslint tslint --save-dev

Hint: Make sure you have no global typescript installed, otherwise the global library will maybe not match the gulp task

add core-js

 $ bower install core.js --save

install typings module and typings for ionic, angular, jquery, cordova, angular-ui-router, core-js

  $ npm install -g typings
  $ typings install ionic angular jquery cordova angular-ui-router core-js --save --ambient

add tsconfig.json

add tslint.json (most rules are adopted to work similar as the ESLint rules)

  • See tslint.json here in the root for detailed configuration

Step 2: Modify the watch/build process

changes to gulpfile.js

  jsFiles: ['app/.tmp/**/*.js', '!app/bower_components/**/*.js'], // new .tmp path (sourcemaps wont work otherwise)
  tsFiles: ['app/**/*.ts'],

changes to gulp/injecting.js

var typescript = require('gulp-tsc'); // load gulp-tsc
var fs = require('fs'); // load fs

gulp.task('inject-all', ['compile', // add the compile task to inject-all

$.inject( // app/.tmp/**/*.js files
  gulp.src('app/.tmp/**/*.js') // change the path to the new .tmp path
    ignorePath: '../app/.tmp', // add the ignorePath
    relative: true

// build typescript to tmp
gulp.task('compile', function () { // add the compile task
  var tsconfig = JSON.parse(fs.readFileSync('./tsconfig.json'));
  return gulp.src(paths.tsFiles)

changes to gulp/watching.js

// watch for changes in ts, ['compile']); // add the watcher for ts files

changes to gulp/building.js

// add the js temp folder to the clean task
return gulp.src(['.tmp', 'app/.tmp', paths.dist + '/*'])

changes to gulp/linting.js

gulp.task('linting', ['eslint', 'tslint', 'jsonlint']); // add tslint task
gulp.task('linting-throw', ['eslint-throw', 'tslint-throw', 'jsonlint-throw']); // add tslint-throw task

// add the new tslint function with the tasks below

// check app and test for tslint errors
var tslint = function (fail) {
  fail = fail || false;
  return function () {
    return gulp.src(paths.tsFiles)
      .pipe($'prose', {emitError: fail}));

gulp.task('tslint', tslint());
gulp.task('tslint-throw', tslint(true));

changes to .gitignore


Step 3: transform existing .js files to .ts

change the file extension from .js to .ts (yes, thats it) to get typing information add the following 'comment' to your files. (beware to check the path, it should match the typings folder in the root)

/// <reference path="../typings/main.d.ts" />

changes to app.ts

/// <reference path="../typings/main.d.ts" />
'use strict';
angular.module('ToDo', [

changes to main.ts

/// <reference path="../../typings/main.d.ts" />
'use strict';

class Routes {
  constructor (
    private $stateProvider: angular.ui.IStateProvider,
    private $urlRouterProvider: angular.ui.IUrlRouterProvider
  ) {
    // ROUTING with ui.router

    // this state is placed in the <ion-nav-view> in the index.html
    .state('main', {
      url: '/main',
      template: '<ion-view view-title="main"></ion-view>',
      // templateUrl: 'main/templates/<someTemplate>.html',
      // controller: 'SomeCtrl as ctrl'

angular.module('main', [])
.config(($stateProvider, $urlRouterProvider) =>
  new Routes($stateProvider, $urlRouterProvider));

Step 4: Implement the app (see sourcecode)


Generator-M-Ionic v1.6.0

NPM version Coverage Status Build Status Dependency Status Download Month


Dev Coverage Status Dev Build Status Dev Dependency Status

Why you need it

Build mobile Cordova/PhoneGap apps quickly with the tools you love: Yeoman, Gulp, Bower, AngularJS, Ionic & of course Cordova. All in one sexy generator.

What's in the box


Quick Start

  • Quick Start for the experienced developer.
  • Try the demo. Get a quick impression by cloning the sample project generated with the latest version of Generator-M-Ionic.

Get started



App Development


  • ESLint code style checks and setting up your IDE/Editor.
  • Testing with our testing workflows.

Continuous Integration and Delivery

Generator Insights

We've published 3 blog articles on our company blog delivering deep insights into the why and how of the generator:

Questions, Issues? Talk to us!

Do the following:

  1. check out our FAQ and issues see if there already is a solution or answer to that matter.
  2. Join the chat at ask other developers and our core team on gitter if you're not sure how to proceed.
  3. If all fails create a new issue.
  • Important: we and others can help you a lot quicker if you provide a sample repo that we can clone. With step by step instructions on how to reproduce your error.

Want to contribute?

Start by reading our:

  1. Mission Statement
  2. Contribution Guide


Code licensed under MIT. Docs under Apache 2. PhoneGap is a trademark of Adobe.