All Projects → jdnichollsc → Ionic Starter Template

jdnichollsc / Ionic Starter Template

Licence: mit
Reinventing the wheel, again! Sorry Ionic Team... but there are many newbies learning on Youtube!

Programming Languages

184084 projects - #8 most used programming language
455 projects

Projects that are alternatives of or similar to Ionic Starter Template

Ionic Magic Chat with Angular Elastic, Autolinker.js and more!
Stars: ✭ 66 (-68.27%)
Mutual labels:  angularjs, apps, mobile-app, android-application, ios-app, hybrid-apps, android-app
🌈Flutter App:🎊「今日份的X」(每天推荐一个:图片、诗歌、名言、音乐、乐评、高等数学、两种配色、化学方程式、Github Repo、知乎问题、文章)
Stars: ✭ 128 (-38.46%)
Mutual labels:  android-app, ios-app, app, android-application
App Privacy Policy Generator
A simple web app to generate a generic privacy policy for your Android/iOS apps
Stars: ✭ 2,278 (+995.19%)
Mutual labels:  android-app, ios-app, app, android-application
A News Application 🗞️ built under 24 hours ⏰. It is built 🚧 with React Native ⚛️. 🚀 and 3 cups of Chai ☕
Stars: ✭ 28 (-86.54%)
Mutual labels:  mobile-app, ios-app, android-app
Stars: ✭ 57 (-72.6%)
Mutual labels:  android-application, ios-app, android-app
Xcloud Beta Unofficial App for the Nvidia Shield Android TV. Playing Xbox Cloud Gaming directly on the box Nvidia Shield tv in the best way.
Stars: ✭ 93 (-55.29%)
Mutual labels:  app, android-application, android-app
No description or website provided.
Stars: ✭ 15 (-92.79%)
Mutual labels:  sqlite, android-application, ios-app
Gas Oil Mixture Mobile
Mobile app for calculation of gasoline/oil ratio for 2 stroke engines built with React Native.
Stars: ✭ 61 (-70.67%)
Mutual labels:  android-app, ios-app, mobile-app
GitHub client for Android based on the abandoned official app
Stars: ✭ 2,756 (+1225%)
Mutual labels:  android-app, app, android-application
a one-page homescreen with a news feed
Stars: ✭ 163 (-21.63%)
Mutual labels:  android-app, app, android-application
Portfolio one Page Template
Free responsive one page portfolio template
Stars: ✭ 106 (-49.04%)
Mutual labels:  gulp, template, html5
Retos mensuales de la comunidad MoureDev para crear pequeñas aplicaciones en base a requisitos
Stars: ✭ 153 (-26.44%)
Mutual labels:  android-application, ios-app, android-app
Busbookingui Android
Check out the new style for App Design aims for the Bus Booking Service...😉😀😁😎
Stars: ✭ 105 (-49.52%)
Mutual labels:  android-app, android-application, template
Mvvm Reddit
A companion project for our blog post on better Android software development using MVVM with RxJava.
Stars: ✭ 106 (-49.04%)
Mutual labels:  android-app, mobile-app, android-application
An app that is a one-stop destination for all the CS enthusiasts, providing resources like Information scrapping techniques, best YT channels, courses available free-of-cost, etc. & knowledge about every domain and field that exists on the Internet related to Computer Science along with News, Jobs, and Internships opportunities in these domains …
Stars: ✭ 44 (-78.85%)
Mutual labels:  app, android-application, android-app
Simple addition game made with Flutter for Mobile and Web using BLOC pattern
Stars: ✭ 16 (-92.31%)
Mutual labels:  mobile-app, android-application, ios-app
Android example to show how to use Room to access SQLite database on device for reading and writing data. This example also shows how to use LiveData and ViewModel with Room to build reactive, well performing and easy to maintain applications.
Stars: ✭ 36 (-82.69%)
Mutual labels:  android-app, sqlite, android-application
A beautiful xkcd viewer app written with Flutter
Stars: ✭ 60 (-71.15%)
Mutual labels:  mobile-app, android-application, android-app
log for articles and info in android for every developer
Stars: ✭ 13 (-93.75%)
Mutual labels:  mobile-app, android-application, android-app
One Vue
仿韩寒「ONE · 一个」,基于vue2.0+混合式开发的一款跨终端、高性能、用户体验高的移动端App! 学习Vue的同学可以看下,感谢 Star 和 Fork!!
Stars: ✭ 93 (-55.29%)
Mutual labels:  android-app, ios-app, app

An advanced Ionic v1.x template

Ionic Framework + Gulp


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.


Do you want to see this starter in action? Visit yay!

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

Projects using this template

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


  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

Path Explanation
./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, 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:
"preen": {
	//... More libraries
	"ionic-datepicker": [
		//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
//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:
	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

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:
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:
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:
var query = "SELECT * FROM Users WHERE Name LIKE '%?%'";
return $q.when($sqliteService.getItems(query, ['Juan']));
  • Execute a SQL query:
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:

Ionic Tips

  • Ionic View LifeCycle: More here
$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:
$state.go($state.current, {}, {reload: true});
  • Disable the back option before to navigate to other state:
    disableBack: true,
    disableAnimate : true,
    historyRoot  : true
  • Clear the cache:
  • Clear the history:
  • Change the direction before to navigate to other state:
  • Navigate to other state:
  • Disable the drag to open the side menu:
  • Check the current platform
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)
<div data-tap-disabled="true">
    <div id="google-map"></div>
  • Using Ionic gestures (Events) with options from Angular Directives
$ionicGesture.on('hold', function (e) {
}, element, { hold_threshold: 20 });
ionic.trigger("hold", { target: document.getElementsByClassName("item")[0] });
ionic.DomUtil.requestAnimationFrame(callback); //Calls requestAnimationFrame, or a polyfill if not available.
ionic.DomUtil.getPositionInParent(element);    //Find an element’s scroll offset within its container.
ionic.DomUtil.blurAll();                       //Blurs any currently focused input element.
  • Execute when device is ready

Global configuration:

  • Enable the native scrolling (Enable or Disable jsScrolling):
  • Set the Maximum number of view elements to cache in the DOM:
  • Select the position of the tabs
  • Center align the title in the navBar:
  • Disable swipeback on iOS:
  • Set the back button text to empty:
  • Change global Ionic gestures options:
ionic.Gestures.gestures.Hold.defaults.hold_threshold = 20;
  • Platform Customization

    Platform CSS Class
    Browser platform-browser
    Cordova platform-cordova
    Webview platform-webview
    iOS platform-ios
    iPad platform-ipad
    Android platform-android
    Windows Phone platform-windowsphone
    • Dynamically Loading Templates
    .state('tab', {
      templateUrl: function() {
        if (ionic.Platform.isAndroid()) {
            return  "templates/home-android.html";
        return "templates/home.html";


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

Command Action
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

Command Action
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

Command Action
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
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.
ionic resources --icon Generate only the icons. icon.png, icon.psd or is located in ./resources/ directory
ionic resources --splash Generate only the splash screens. splash.png, splash.psd or is located in ./resources/ directory
ionic resources ios --icon Generate icons per platform

Cordova commands

Command Action
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 --save Add a plugin to use native capabilities. Native Devs are your friends
cordova plugin list See the plugins that you're using. Find more here!
cordova plugin rm plugin_name --save Remove 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)


Name Description
Visual Studio Code Build and debug your app using a extension
GapDebug Only debug in the device
GenyMotion Better Android Emulation

Visual Studio Code commands and shortcuts

Command/Shortcut Action
code . Open the editor from CLI
F1 Open the Command Palette
Ctrl + Shift + N Open other Visual Studio Code instance
Ctrl + } Toogle comment code
Ctrl + ñ Open the Integrated Terminal

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


Your code is mine!


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

Happy coding

Made with <3

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].