An advanced Ionic v1.x template

Introduction

You need to obfuscate your code and reduce the size of your mobile applications. With this project you can work with Gulp in the best way, allowing improve your development workflow. This project seeks to improve the following tasks:

• Design your application with a maintainable code using Sass and writing less code using Autoprefixer. Concatenate and Minify styles in a stylesheet.
• Concatenate and Uglify javascript files using Source maps to debug the code easily.
• Compress images to reduce the size of your application.
• Compress html templates, respecting your structure.
• Clean unnecessary files downloaded with Bower.
• Use CSS animations with Animate.css.
• Use SQLite with a service pattern. You can use Pre-filled databases.

Demo

Do you want to see this starter in action? Visit https://jdnichollsc.github.io/Ionic-Starter-Template/ yay!

Automatically deployed to GitHub Pages using Gulp - Check the last task into gulpfile.js

| | :---: |:---: |:---: |

Projects using this template

• Hartford Fashion Week - Created by Matthew Seremet
• PokéDex GO - Community
• IonPhaser
• Ionic ElastiChat
• Ionic Drag and Drop
• Game of Drones

Do you have a project using this template? Let me know to share it with everyone!

Instructions

1. Download this template.
2. Execute the command

   npm install

3. Execute the command

   gulp

4. Run Ionic:

   • ionic serve

     to test on the browser (Gulp is running by default).

   • ionic run android --livereload

     to test on the device.
5. Modify this template and create your hybrid mobile app.
6. Check the John Papa's Angular Style Guide.

Template Structure

./app/img/

./app/js/

./app/scss/

./app/templates/

./app/index.html

./www/css/

./www/lib

Using bower to download libraries (npm preen included)

• Download the script. Eg:

  bower install ionic-datepicker --save

• Add the path of the files that you will use in

  bower.json

  from

  www/lib

  . Eg:

  javascript
  "preen": {
  //... More libraries
  "ionic-datepicker": [
      "dist/*.js"
      //Other files and folders will be deleted to reduce the size of your app
  ]
  }
  

• Run gulp in the CLI. Eg:

  gulp

  or

  gulp lib

• That's all, folks!!

Animate elements using Animate.css

• Do you want to animate Modals? This template have an example. More examples here

  javascript
  //Using the Modals service in this template
  Modals.openModal($scope, 'templates/modals/users.html', 'animated rotateInDownLeft');
  

• Do you want to animate Popups and other elements? See an example:

  javascript
  $ionicPopup.alert({
  title: 'Hello World',
  template: 'This is the best template to start with Ionic Framework!',
  cssClass: 'animated bounceInDown'
  });
  

SQLite databases on Android, iOS and Windows (Using cordova-sqlite-ext plugin)

This template include an example (pre-populated database), you can test in the browser using Google Chrome or in your Device.

• Debug in the browser: Test using the

  ./app/js/queries.js

  file to create your queries (Drop tables, create tables, insert data, etc).
• Debug in the device: Test using the

  ./www/pre.db

  file, you can edit the database using DB Browser for SQLite

SQLite examples using Angular Services

• Returns the first element in a sequence that satisfies a specified condition, throws an exception if no matching element is found in source:

  javascript
  var query = "SELECT * FROM Users WHERE Name LIKE '%?%'";
  return $q.when($sqliteService.getFirstItem(query, ['Juan']));
  

• Returns the first element of a sequence that satisfies a specified condition, or a default value if the sequence contains no elements:

  javascript
  var query = "SELECT * FROM Users WHERE Name LIKE '%?%'";
  return $q.when($sqliteService.getFirstOrDefaultItem(query, ['Juan']));
  

• Returns all the elements of a sequence that satisfies a specified condition:

  javascript
  var query = "SELECT * FROM Users WHERE Name LIKE '%?%'";
  return $q.when($sqliteService.getItems(query, ['Juan']));
  

• Execute a SQL query:

  javascript
  var query = "DELETE FROM Users WHERE Name LIKE '%?%'";
  return $q.when($sqliteService.executeSql(query, ['Juan']));
  

Note: If you don't want to use SQLite, you must perform the following steps:

1. Remove

   ./www/pre.db

   file.
2. Remove

   ./app/js/queries.js

   file.
3. Remove

   ./app/js/services/sqlite.js

   file.
4. Uninstall the plugin using the CLI:

   ionic plugin rm cordova-sqlite-ext --save

5. Remove the following line from

   ./app/js/app.js

   file:

   javascript
   $sqliteService.preloadDataBase(true);
   

Ionic Tips

• Ionic View LifeCycle: More here

  javascript
  $scope.$on('$ionicView.beforeEnter', function(){
  alert("Before to enter to the view");
  });
  $scope.$on('$ionicView.afterEnter', function(){
  alert("After to enter to the view");
  });
  

• Reload the current state:

  javascript
  $state.go($state.current, {}, {reload: true});
  

• Disable the back option before to navigate to other state:

  javascript
  $ionicHistory.nextViewOptions({
  disableBack: true,
  disableAnimate : true,
  historyRoot  : true
  });
  

• Clear the cache:

  javascript
  $ionicHistory.clearCache();
  

• Clear the history:

  javascript
  $ionicHistory.clearHistory();
  

• Change the direction before to navigate to other state:

  javascript
  $ionicViewSwitcher.nextDirection('back');
  

• Navigate to other state:

  javascript
  $state.go("app.login");
  

• Disable the drag to open the side menu:

  javascript
  $ionicSideMenuDelegate.canDragContent(false);
  

• Check the current platform ```javascript var deviceInformation = ionic.Platform.device();

var isWebView = ionic.Platform.isWebView(); var isIPad = ionic.Platform.isIPad(); var isIOS = ionic.Platform.isIOS(); var isAndroid = ionic.Platform.isAndroid(); var isWindowsPhone = ionic.Platform.isWindowsPhone();

var currentPlatform = ionic.Platform.platform(); var currentPlatformVersion = ionic.Platform.version();

* Disabling the tap system **(To disable the tap for an element and all of its children elements)**

* Using Ionic gestures (Events) with options from Angular Directives

* Ionic trigger **[events](https://ionicframework.com/docs/v1/api/utility/ionic.EventController/)**

* Dom manipulation **[utilities](https://ionicframework.com/docs/v1/api/utility/ionic.DomUtil/)**

* Execute when device is ready

Global configuration:

• Enable the native scrolling (Enable or Disable jsScrolling):

  javascript
  $ionicConfigProvider.scrolling.jsScrolling(false);
  

• Set the Maximum number of view elements to cache in the DOM:

  javascript
  $ionicConfigProvider.views.maxCache(5);
  

• Select the position of the tabs

  javascript
  $ionicConfigProvider.tabs.position('top');
  $ionicConfigProvider.tabs.position('bottom');
  

• Center align the title in the navBar:

  javascript
  $ionicConfigProvider.navBar.alignTitle('center');
  

• Disable swipeback on iOS:

  javascript
  $ionicConfigProvider.views.swipeBackEnabled(false);
  

• Set the back button text to empty:

  javascript
  $ionicConfigProvider.backButton.previousTitleText(false).text('');
  

• Change global Ionic gestures options:

  javascript
  ionic.Gestures.gestures.Hold.defaults.hold_threshold = 20;
  

• Platform Customization

• Dynamically Loading Templates

  javascript
  .state('tab', {
  templateUrl: function() {
    if (ionic.Platform.isAndroid()) {
        return  "templates/home-android.html";
    }
    return "templates/home.html";
  }
  });
  

Crosswalk

Improve the performance of your HTML, CSS, and JavaScript if is required.

ionic browser list

ionic browser rm crosswalk

ionic browser add crosswalk

ionic browser add [email protected]

ionic browser add crosswalk-lite

ionic browser revert android

npm commands

npm i ionic cordova bower gulp -g

npm cache clean

Ionic commands

ionic login

ionic upload

ionic serve

ionic serve --lab

ionic lib update

ionic resources

./resources/

ionic resources --icon

icon.png

icon.psd

icon.ai

./resources/

ionic resources --splash

splash.png

splash.psd

splash.ai

./resources/

ionic resources ios --icon

Cordova commands

android

android - ios - windows

android

git_url

Native Devs are your friends

plugin_name

platforms/windows/*.sln

Tools

Visual Studio Code commands and shortcuts

code .

F1

Command Palette

Ctrl + Shift + N

Ctrl + }

Ctrl + ñ

Sign to Android (Commands)

1. cordova build --release android

2. keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

3. jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

4. zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

Links

• Market place
• Facebook group
• Codepen
• Spanish Presentation
• Ionic CLI
• Ionic Framework Examples
• Ionic Services

Supporting

I believe in Unicorns 🦄 Support me, if you do too.

Happy coding

Made with <3