Ionic Starter Template

Ionic Starter Template

The Best Ionic v1.x starter template

Free!

(15)
Juan David Nicholls

Juan David Nicholls

Member since 2014

Details

Version:
1.0
Size:
14mb
Ionic:
1.0.1
Platforms:
iOS, Android, Windows Phone
View ID:
22a68333
Released:
4 years ago
Updated:
3 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

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": [
          "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
    //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:
    $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:
    $sqliteService.preloadDataBase(true);

Crosswalk

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 crosswalk@10.39.235.15 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 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

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)

Tools

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

Hey there! You'll need to log in before you can leave a comment here.

Esteban

Esteban   ·   4 years ago

seria buena idea que la estructura fuera por modulos, con ello si se necesita remover alguno solo es quitar la carpeta. ejemplo: /modules/ /home/ home.tpl.html home.sass home.js /about/ about.tpl.html about.sass about.js Saludos!

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Entiendo, ya habría que cambiar las tareas con gulp porque al estar por componentes la estructura básica cambia y habría que hacer que los watch fueran por el tipo de extensión del archivo. Me gustaría poderlo hacer genérico para los 2 casos, pero no se me ocurre como mmm

Esteban

Esteban   ·   4 years ago

Yo tengo un template con la estructura en modules, y el gulp eacuchando solo tipo de archivos, tal vez te pueda ayudar ello

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Perfecto, me los podrías poner en un issue en el repositorio? https://github.com/jdnichollsc/Ionic-Starter-Template Qué piensas sobre agregar una variable en el gulpfile.js para decidir cuales tareas ejecutar, si con esta simple estructura o ya basado en componentes? :D

Esteban

Esteban   ·   4 years ago

seria perferto, perdon por contestarte hasta ahora ando un poco acupado. buena idea la variable con ello tendran para escoger

mustafa samed kasal

mustafa samed kasal   ·   4 years ago

Awesome template! If someone having some issues (getting an error ` env: node\r: No such file or directory`) with running 'ionic run android' command on Mac OSX because of '/hooks/after_prepare/010_add_platform_class.js' this .JS file created on Windows and running on DOS mode. Here is the solution: ``` brew install dos2unix sudo dos2unix hooks/after_prepare/010_add_platform_class.js ```

mustafa samed kasal

mustafa samed kasal   ·   4 years ago

Also on config.xml you used `\` for icon directories. I changed to '/' and everything ok now.

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Maybe is required add "hooks/" to .gitignore file? What do you think? :)

Soldeplata

Soldeplata   ·   4 years ago

Hi Juan David Nicholls. I found a little thing to improve in this template. In landscape mode, home screen has an issue: just look at the video and you will see what it's about. https://youtu.be/UCpelNp8fwM

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Soldeplata, try again! :D

Lazaro Prates Junior

Lazaro Prates Junior   ·   4 years ago

First of all, congratulations for the project. I really like. =D I have a question: Is it possible take off the indentation of templates?

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

It's a pleasure, but I don't understand about the indentation... What do you mean?

Lazaro Prates Junior

Lazaro Prates Junior   ·   4 years ago

Hi Juan Look here: https://postimg.org/image/afd5niol7/ Look like is difficult to read the code because all tags are together

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

This template was compressed by the gulp tasks, you need to read the documentation because you can find the respective code in the directory './app/' Regards

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Victor Montanher

Victor Montanher   ·   4 years ago

the command 'ionic serve' does not update the browser after changes in files at 'app' folder. I need to use 'gulp' command and 'ionic serve' to see the changes in views, controllers... What am I doing wrong?

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

You need to download the updated project from Github. I have some fixes about that https://github.com/jdnichollsc/Ionic-Starter-Template Regards, Nicholls

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pedro

Pedro   ·   3 years ago

Hello, great template! I am trying to use it for a college project. I added some content inside the buttons but whenever i try to scroll down the page goes back up automatically. Gif to show the problem that i have. http://i.gyazo.com/60cc75224eb4ac253ac6a520fce1f5d0.gif Any solution? Thanks in advance.

Juan David Nicholls

Juan David Nicholls   ·   3 years ago

Any doubt on GitHub :) https://github.com/jdnichollsc/Ionic-Starter-Template/issues

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

manish

manish   ·   3 years ago

is it free to use?

Juan David Nicholls

Juan David Nicholls   ·   3 years ago

It's free! Donwload it from Github!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

manish

manish   ·   3 years ago

is it free to use?

Juan David Nicholls

Juan David Nicholls   ·   3 years ago

It's free! Donwload it from Github!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pedro

Pedro   ·   3 years ago

Hello, great template! I am trying to use it for a college project. I added some content inside the buttons but whenever i try to scroll down the page goes back up automatically. Gif to show the problem that i have. http://i.gyazo.com/60cc75224eb4ac253ac6a520fce1f5d0.gif Any solution? Thanks in advance.

Juan David Nicholls

Juan David Nicholls   ·   3 years ago

Any doubt on GitHub :) https://github.com/jdnichollsc/Ionic-Starter-Template/issues

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Victor Montanher

Victor Montanher   ·   4 years ago

the command 'ionic serve' does not update the browser after changes in files at 'app' folder. I need to use 'gulp' command and 'ionic serve' to see the changes in views, controllers... What am I doing wrong?

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

You need to download the updated project from Github. I have some fixes about that https://github.com/jdnichollsc/Ionic-Starter-Template Regards, Nicholls

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Lazaro Prates Junior

Lazaro Prates Junior   ·   4 years ago

First of all, congratulations for the project. I really like. =D I have a question: Is it possible take off the indentation of templates?

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

It's a pleasure, but I don't understand about the indentation... What do you mean?

Lazaro Prates Junior

Lazaro Prates Junior   ·   4 years ago

Hi Juan Look here: https://postimg.org/image/afd5niol7/ Look like is difficult to read the code because all tags are together

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

This template was compressed by the gulp tasks, you need to read the documentation because you can find the respective code in the directory './app/' Regards

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Soldeplata, try again! :D

Soldeplata

Soldeplata   ·   4 years ago

Hi Juan David Nicholls. I found a little thing to improve in this template. In landscape mode, home screen has an issue: just look at the video and you will see what it's about. https://youtu.be/UCpelNp8fwM

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Entiendo, ya habría que cambiar las tareas con gulp porque al estar por componentes la estructura básica cambia y habría que hacer que los watch fueran por el tipo de extensión del archivo. Me gustaría poderlo hacer genérico para los 2 casos, pero no se me ocurre como mmm

mustafa samed kasal

mustafa samed kasal   ·   4 years ago

Also on config.xml you used `\` for icon directories. I changed to '/' and everything ok now.

mustafa samed kasal

mustafa samed kasal   ·   4 years ago

Awesome template! If someone having some issues (getting an error ` env: node\r: No such file or directory`) with running 'ionic run android' command on Mac OSX because of '/hooks/after_prepare/010_add_platform_class.js' this .JS file created on Windows and running on DOS mode. Here is the solution: ``` brew install dos2unix sudo dos2unix hooks/after_prepare/010_add_platform_class.js ```

Esteban

Esteban   ·   4 years ago

seria perferto, perdon por contestarte hasta ahora ando un poco acupado. buena idea la variable con ello tendran para escoger

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Perfecto, me los podrías poner en un issue en el repositorio? https://github.com/jdnichollsc/Ionic-Starter-Template Qué piensas sobre agregar una variable en el gulpfile.js para decidir cuales tareas ejecutar, si con esta simple estructura o ya basado en componentes? :D

Esteban

Esteban   ·   4 years ago

Yo tengo un template con la estructura en modules, y el gulp eacuchando solo tipo de archivos, tal vez te pueda ayudar ello

Esteban

Esteban   ·   4 years ago

seria buena idea que la estructura fuera por modulos, con ello si se necesita remover alguno solo es quitar la carpeta. ejemplo: /modules/ /home/ home.tpl.html home.sass home.js /about/ about.tpl.html about.sass about.js Saludos!

Juan David Nicholls

Juan David Nicholls   ·   4 years ago

Maybe is required add "hooks/" to .gitignore file? What do you think? :)

Hey there! You'll need to log in before you can leave a rating here.

Isaac Hernández   ·     ·   4 years ago

is very good :D

Daniel Teixeira   ·     ·   4 years ago

muito útil!

Manuel Flórez   ·     ·   4 years ago

Excelente!

  ·     ·   4 years ago

¡Excelente trabajo!. Gracias por tu esfuerzo.

camilo   ·     ·   4 years ago

The bible

Camilo Alexander Rodriguez Cuaran   ·     ·   4 years ago

Amazing template!

Johan Elioth Quintana González   ·     ·   4 years ago

Great template, keep going on the improves!

Juan Carlos Silva Yepes   ·     ·   4 years ago

Excellent template. The gulp tasks are very helpful also the distribution of each tier is very organized. This template is perfect for beginners or advanced programmers.

AlejandroMedina   ·     ·   4 years ago

Excellent Template

Vlada Janosevic   ·     ·   4 years ago

Excellent. Thanks

Jose Salazar   ·     ·   4 years ago

cool idea

ridhwan   ·     ·   4 years ago

love this template

Luis Eduardo Oquendo Perez   ·     ·   4 years ago

The best template

Ricardo   ·     ·   4 years ago

Awesome!

Mark Dave Ingalla   ·     ·   4 years ago

keep it up!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Mark Dave Ingalla    ·     ·   4 years ago

keep it up!

Ricardo    ·     ·   4 years ago

Awesome!

Luis Eduardo Oquendo Perez    ·     ·   4 years ago

The best template

ridhwan    ·     ·   4 years ago

love this template

Jose Salazar    ·     ·   4 years ago

cool idea

Vlada Janosevic    ·     ·   4 years ago

Excellent. Thanks

AlejandroMedina    ·     ·   4 years ago

Excellent Template

Daniel Teixeira    ·     ·   4 years ago

muito útil!

Johan Elioth Quintana González    ·     ·   4 years ago

Great template, keep going on the improves!

Camilo Alexander Rodriguez Cuaran    ·     ·   4 years ago

Amazing template!

camilo    ·     ·   4 years ago

The bible

    ·     ·   4 years ago

¡Excelente trabajo!. Gracias por tu esfuerzo.

Manuel Flórez    ·     ·   4 years ago

Excelente!

Isaac Hernández    ·     ·   4 years ago

is very good :D

Juan Carlos Silva Yepes    ·     ·   4 years ago

Excellent template. The gulp tasks are very helpful also the distribution of each tier is very organized. This template is perfect for beginners or advanced programmers.