Mobile App with Ionic, ES6, AngularJS 1.4

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! :)