While the world is awaiting for Ionic 2 based on Angular 2, I'm going to show you how to use little bit less bleeding edge technologies, but existing and working already today and still much more exciting than old ES5. Really, when you try arrow functions, you won't use ES5 again.
I will use both
generator-gulp-angular and ionic-cli to generate project. First one for ES6 and tests running, second one for js-to-mobile builds.
Step 1: Install generator-gulp-angular
npm install -g yo gulp bower
npm install -g generator-gulp-angular
Step 2: Install Ionic:
npm install -g cordova
npm install -g ionic
Step 3: Generate ionic files
We will start with Ionic, because Ionic will create a folder and will remember name of this folder somewhere inside:
ionic start example
Where example is the name of our project.
We actually don't need whole content of generated folder, but we have to do previous step to save name of folder inside ionic.
Now we will rename it:
mv example example_ionic
Step 4: Generate project folder
Let's create a folder again and this time it will be fulfilled by generator-gulp-angular:
mkdir example
cd example
yo gulp-angular example
On generation steps please select:
1) AngularJS 1.3 (or later version if in your time you have later version)
2) ng-modules: animate, touch, sanitize
3) jQuery: none
4) rest: ng-resource
5) router: ui-router
6) UI-framework: none (we will use Ionic for it)
7) CSS preprocessor - whatever you prefer
8) JS preprocessor: ES6 Babel
9) html template engine - whatever you prefer
Now we have generated project and it's the structure we will use as main.
Step 5: Merge
Let's copy ionic-generated files to our project:
cp ../example_ionic/config.xml ./
cp ../example_ionic/ionic.project ./
cp -R ../example_ionic/plugins ./plugins
cp -R ../example_ionic/hooks ./hooks
From ../example_ionic/package.json copy branch "cordovaPlugins" into your ./package.json.
Step 6: Change AngularJS version to 1.4
If in your time generator-gulp-angular has AngularJS version 1.4 or higher - skip this step.
Otherwise, let's change version of AngularJS and modules to 1.4.
To do this, you need a text editor (or your favorite IDE). Good chance to try new shiny
Visual Studio Code :)
In bower.json, replace all entries of AngularJS 1.3 modules dependencies to 1.4.x:
Hint: VS Code replace shortcut in OS X is alt+cmd+F.
Replace all entries, save your edits and:
bower install
Step 7: Add latest ionic as bower dependency
bower install ionic#~1.x --save
On versions conflicts, select most latest versions and prefix your answers with "!".
Step 8: Add platforms
mkdir www
ionic platform add ios
ionic platform add android
Step 9: Build
In gulpfile.js, change in the options:
dist: 'dist'
to
dist: 'www'
Now try to build your ES6 code:
gulp
You will run this command before each app deployment.
Check if ionic-cli works:
ionic serve
You should see something like this:
It doesn't look like mobile app, so let's use power of Ionic framework to change it!
Please interrupt ionic-cli by Ctrl+C for now.
Step 10: Ionize
In src/index.html, add link to ionic CSS into block "build:css":
<!-- endbower -->
here
<!-- endbuild -->
so it becomes:
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<link href="../bower_components/ionic/release/css/ionic.css" rel="stylesheet">
<!-- endbuild -->
Now add links to JS files into first build:js block, after endbower and before endbuild line, so it becomes:
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<script src="../bower_components/ionic/release/js/ionic.js"></script>
<script src="../bower_components/ionic/release/js/ionic-angular.js"></script>
<!-- endbuild -->
You need only these 2 files, everything else will be added by Gulp tasks.
Now replace
<div ui-view></div>
with
<ion-nav-view></ion-nav-view>
And remove Google Analytics template code.
In src/app/index.js add Ionic as dependency, so list should look like this at this moment:
angular.module('example', ['ionic', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ngResource', 'ui.router'])
To make UI of our app little bit more mobile friendly, let's take content of file ../example_ionic/www/templates/tab-dash.html, generated by ionic and put it into our src/app/main/main.html (replacing all lines).
Let's see what we have in result:
gulp serve
Project has been ionized!
While gulp serve work, every change we make in html/css/js source files will be reflected in the browser, so we don't need to run this task after each change manually - very handy for development.
Step 11: Use the power of ES6
To help you love ES6, I will show you some tricks, how to use it without any pain with AngularJS 1.4.
ControllerAs
ControllerAs it's a very important thing, it's not just handy feature, it makes your code much more clean and especially beautiful with ES6.
So, as a first step, in src/app/index.js replace
controller: 'MainCtrl'
with
controller: 'MainCtrl as Main'
Now in html template you can use Main as reference to your controller and inside controller you can bind properties to "this" instead of $scope. More details about usage of controllerAs you can find in an
article of very smart guys from thoughtram.
Services and Controllers
Services and Controllers can be easily presented as ES6 classes. To not duplicate list of dependencies in $inject, you can add string
'ngInject';
inside function with list of dependencies. In case of class it's constructor.
Example:
class ExampleController {
constructor($timeout) {
'ngInject';
this.$timeout = $timeout;
}
}
export default ExampleController;
Directives, Filters and Resources
But some things are much more simple when we use them as old good functions.
Examples:
Resource:
function SomeLog($resource, Config, Token) {
'ngInject';
return $resource(Config.apiUrl + '/events/:token', {token: Token.get()}, {
count: {
method: 'GET',
url: Config.apiUrl + '/events/count/:token',
isArray: false,
transformResponse: function (data) {
data = JSON.parse(data);
return {'count': data};
}
}
});
}
export default SomeLog;
Directive:
function exmpNavigation($state) {
'ngInject';
return {
restrict: '',
templateUrl: 'components/exmpNavigation/template.html',
controllerAs: 'cNav',
controller: function () {
this.go = function (route) {
$state.go(route);
};
}
};
}
export default exmpNavigation;
Step 12: Mobile App
When your app is interesting enough to be tested on mobile device, create a build.
Don't forget to compile from sources:
gulp
And then we can create the build for iOS:
ionic build ios
and even test it, if you use OS X:
ionic emulate ios
More info about builds, including Android, can be found in
Ionic tutorial.
One more interesting feature Ionic has: Ionic View. It's amazing thing and I recommend you to try it - pretty simple to use and saves tones of time for debug and testing on real devices. To start, just run:
ionic upload
All the power is in your hands (and brain)
Now you can use all the power of generator-gulp-angular, including handy shortcuts for testing (gulp test, gulp protractor), you can write awesome code in ES6 to build best in the universe mobile apps with Ionic, powered by the best AngularJS version yet.
Good luck! :)
