#The Best Ionic v1.x starter template
Reinventing the wheel, again! Sorry Ionic Team... but there are many noobs learning in Youtube!
Are you a noob? Use this template.
Are you a master? Shut up! and use this template... the code only is accepted (pull request).
#Instructions
- Donwload this template.
- Execute the command
npm install - Run Ionic:
ionic serveto test on the browser (Gulp is running).ionic run androidto test on the device.
- 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.jsonfromwww/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:
gulporgulp lib - That's all, folks!!
#NPM commands
| Command | Action |
|---|---|
npm i ionic cordova bower -g |
Install Ionic, Cordova and Bower 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 |
#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 |
#Sign to Android (Commands)
cordova build --release androidkeytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_namezipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
#Links
- Market place
- Facebook group
- Codepen
- Spanish Presentation
- Ionic CLI
- Ionic Framework Examples
- Ionic Services
#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 but I'm poor like my colleagues at the beginning
Made with <3
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent