Esteban
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!
The Best Ionic v1.x starter template
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).
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:
Do you want to see this starter in action? Visit https://jdnichollsc.github.io/Ionic-Starter-Template/ yay!
Do you have a project using this template? Let me know to share it with everyone!
npm install
gulp
ionic serve
to test on the browser (Gulp is running).ionic run android
to test on the device.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. |
bower install ionic-datepicker --save
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
]
}
gulp
or gulp lib
//Using the Modals service in this template
Modals.openModal($scope, 'templates/modals/users.html', 'animated rotateInDownLeft');
$ionicPopup.alert({
title: 'Hello World',
template: 'This is the best template to start with Ionic Framework!',
cssClass: 'animated bounceInDown'
});
This template include an example (pre-populated database), you can test in the browser using Google Chrome or in your Device.
./app/js/queries.js
file to create your queries (Drop tables, create tables, insert data, etc)../www/pre.db
file, you can edit the database using DB Browser for SQLite./www/pre.db
file../app/js/queries.js
file../app/js/services/sqlite.js
file.ionic plugin rm cordova-sqlite-ext --save
./app/js/app.js
file:$sqliteService.preloadDataBase(true);
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 |
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. |
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 |
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 |
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 |
cordova build --release android
keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
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?
Made with <3
Hey there! You'll need to log in before you can leave a comment here.
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!
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
Yo tengo un template con la estructura en modules, y el gulp eacuchando solo tipo de archivos, tal vez te pueda ayudar ello
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
seria perferto, perdon por contestarte hasta ahora ando un poco acupado. buena idea la variable con ello tendran para escoger
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 ```
Also on config.xml you used `\` for icon directories. I changed to '/' and everything ok now.
Maybe is required add "hooks/" to .gitignore file? What do you think? :)
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
Soldeplata, try again! :D
First of all, congratulations for the project. I really like. =D I have a question: Is it possible take off the indentation of templates?
It's a pleasure, but I don't understand about the indentation... What do you mean?
Hi Juan Look here: https://postimg.org/image/afd5niol7/ Look like is difficult to read the code because all tags are together
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
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?
You need to download the updated project from Github. I have some fixes about that https://github.com/jdnichollsc/Ionic-Starter-Template Regards, Nicholls
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.
Any doubt on GitHub :) https://github.com/jdnichollsc/Ionic-Starter-Template/issues
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.
Any doubt on GitHub :) https://github.com/jdnichollsc/Ionic-Starter-Template/issues
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?
You need to download the updated project from Github. I have some fixes about that https://github.com/jdnichollsc/Ionic-Starter-Template Regards, Nicholls
First of all, congratulations for the project. I really like. =D I have a question: Is it possible take off the indentation of templates?
It's a pleasure, but I don't understand about the indentation... What do you mean?
Hi Juan Look here: https://postimg.org/image/afd5niol7/ Look like is difficult to read the code because all tags are together
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
Soldeplata, try again! :D
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
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
Also on config.xml you used `\` for icon directories. I changed to '/' and everything ok now.
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 ```
seria perferto, perdon por contestarte hasta ahora ando un poco acupado. buena idea la variable con ello tendran para escoger
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
Yo tengo un template con la estructura en modules, y el gulp eacuchando solo tipo de archivos, tal vez te pueda ayudar ello
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!
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.
is very good :D
muito útil!
Excelente!
¡Excelente trabajo!. Gracias por tu esfuerzo.
The bible
Amazing template!
Great template, keep going on the improves!
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.
Excellent Template
Excellent. Thanks
cool idea
love this template
The best template
Awesome!
keep it up!
{{ rating.comment }}
{{ rating.comment }}
keep it up!
Awesome!
The best template
love this template
cool idea
Excellent. Thanks
Excellent Template
muito útil!
Great template, keep going on the improves!
Amazing template!
The bible
¡Excelente trabajo!. Gracias por tu esfuerzo.
Excelente!
is very good :D
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.