Ionic Starter Template

Ionic Starter Template

The Best Ionic v1.x starter template

$0.00

Juan David Nicholls

Juan David Nicholls

Member since 2014

Details

Version:
1.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
4 years ago
Category:
Starters
Tags:
Gulp, Sass, Bower, Animate.css, SQLite,

The Best Ionic v1.x starter template

Ionic Framework + Gulp

Reinventing the wheel, again! Sorry Ionic Team... but there are many noobs learning on Youtube!

Are you a noob? Use this template.

Are you a master? Shut up and use this template! Talk is cheap, show me the code (Pull Request).

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

Projects using this template

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).
    • ionic run android to test on the device.
  5. Modify this template and create your hybrid mobile app.

Template Structure

PathExplanation
`./app/img/`Images in your app.
`./app/js/`Scripts (Controllers, Services, Directives, etc).
`./app/scss/`The styles of your app using Sass.
`./app/templates/`Views in your app. (Only html files)
`./app/index.html`The init page.
`./www/css/`Other css styles like **[Animate.css](https://daneden.github.io/animate.css/)**, etc.
`./www/lib`Download scripts using bower.

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 herejavascript //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.

Cordova SQLite

  • 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

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);

Crosswalk

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

CommandAction
`ionic browser list`Show all the browsers available by platform
`ionic browser rm crosswalk`Remove a browser
`ionic browser add crosswalk`Install the Chromium browser for Android
`ionic browser add [email protected]`Specifies a version of Chromium
`ionic browser add crosswalk-lite`Install the Crosswalk lite version
`ionic browser revert android`Remove any custom browser that was installed for the platform by replacing it with the system default browser

npm commands

CommandAction
`npm i ionic cordova bower gulp -g`Install Ionic, Cordova, Bower and Gulp packages globally
`npm cache clean`Remove the cache to force update the packages. Useful to solve npm issues using the CLI.

Ionic commands

CommandAction
`ionic login`To get logged in the CLI and use the Ionic services
`ionic upload`Upload your app to Ionic repository and debug remotely (Your clients) using the useful **[Ionic View App](http://view.ionic.io/)**
`ionic serve`Test on the browser
`ionic serve --lab`Test on the browser iOS and Android version
`ionic lib update`Update Ionic library files
`ionic resources`Generate icons and splash screens. The images are located in `./resources/` directory. More info **[here](http://ionicframework.com/docs/cli/icon-splashscreen.html)**.
`ionic resources --icon`Generate only the icons. `icon.png`, `icon.psd` or `icon.ai` is located in `./resources/` directory
`ionic resources --splash`Generate only the splash screens. `splash.png`, `splash.psd` or `splash.ai` is located in `./resources/` directory
`ionic resources ios --icon`Generate icons per platform

Cordova commands

CommandAction
cordova platform add `android`Add the platform to build your app. `android - ios - windows`
cordova platform rm `android`Remove the platform
cordova plugin add `git_url` --saveAdd a plugin to use native capabilities. `Native Devs are your friends`
cordova plugin listSee the plugins that you're using. Find more **[here!](https://cordova.apache.org/plugins/)**
cordova plugin rm `plugin_name` --saveRemove a plugin
cordova build windows -- --appx=8.1-win --archs="x86"Build the app to Windows (Open the Solution `platforms/windows/*.sln` on **[Visual Studio](https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx)**)

Tools

NameDescription
**[Visual Studio Code](https://code.visualstudio.com/)**Build and debug your app using a [extension](https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools)
**[GapDebug](https://www.genuitec.com/products/gapdebug/)**Only debug in the device
**[GenyMotion](https://www.genymotion.com/)**Better Android Emulation

Visual Studio Code commands and shortcuts

Command/ShortcutAction
`code .`Open the editor
`F1`Open the `Command Palette`
`Ctrl + Shift + N`Open other Visual Studio Code instance
`Ctrl + }`Toogle comment code

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

Your code is mine!

Personal comments

  • Ionic, seriously? The cache is the best... but, How is possible to know if a specific view is cached? (From a directive)
  • Microsoft, seriously? Help to improve existing cordova plugins instead of create new plugins only for Windows platform!
  • Apple, seriously? Thanks for nothing! I need a MAC or the help of a friend to build for iOS... Are we playing Who Wants to be a Millionaire?

Happy coding

Made with <3