Implementing a really simple todo app with generator-m-ionic v1.6.0
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
- See tsconfig.json here in the root for detailed configuration
add tslint.json (most rules are adopted to work similar as the ESLint rules)
- See tslint.json here in the root for detailed configuration
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)
.pipe(typescript(tsconfig.compilerOptions))
.pipe(gulp.dest('app/.tmp/'));
});changes to gulp/watching.js
// watch for changes in ts
gulp.watch(paths.tsFiles, ['compile']); // add the watcher for ts fileschanges 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($.tslint())
.pipe($.tslint.report('prose', {emitError: fail}));
};
};
gulp.task('tslint', tslint());
gulp.task('tslint-throw', tslint(true));changes to .gitignore
#typescript
/typings/
/app/.tmp/
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', [
'ionic',
'ngCordova',
'ui.router',
'main'
]);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.$urlRouterProvider.otherwise('/main');
this.$stateProvider
// 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));Links:
- ionic typescript blog
- ionic typescript repo
- angularjs with typescript
- more on components
- further reading (not covered by the POC)
- thoughtram on ES6 in angularjs
- thoughtram on ng-upgrade
- ng-forward
- ng-metadata
Development:
Build mobile Cordova/PhoneGap apps quickly with the tools you love: Yeoman, Gulp, Bower, AngularJS, Ionic & of course Cordova. All in one sexy generator.
- More on: Why you need it
- More on: What's in the box
- 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.
Generation
- Using Ionic's CSS or SASS?
- Sub-generators for adding new components.
App Development
- Developing on Windows, what you need to know.
- Git integration, see how it's done.
- SASS integration in our module concept.
- Bower Component Usage in our module concept.
- Gulp defaults, spare power users some tedious typing on the command line.
Quality
Continuous Integration and Delivery
- App Icons and splash screens, a simple setup or different sets for different builds - all is possible.
- Use Environments manage different API Endpoints and much more with just a single parameter.
- Build Vars, inject vars into your app at build time.
- Programmatically change the
config.xml, an essential part for a successful continuous integration setup. Add environments and build vars for a full blown continuous integration use case!
We've published 3 blog articles on our company blog delivering deep insights into the why and how of the generator:
- September 2015: Generator-M-Ionic and the search for the holy grail
- rather technical comparison between the generator and similar tools as well as technical insights to the decisions and motivation behind the generator
- September 2015: Generator-M-Ionic: HTML5 mobile app development evolved
- provides insight to the technology choices and ecosystem and the benefits of using the generator
- March 2015: Generator-M: the state of HTML5 mobile app development at M-Way
- the origins of the generator development and company strategy
Do the following:
- check out our FAQ and issues see if there already is a solution or answer to that matter.
ask other developers and our core team on gitter if you're not sure how to proceed.
- 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.
Start by reading our:
Code licensed under MIT. Docs under Apache 2. PhoneGap is a trademark of Adobe.