Reinventing the wheel, again! Sorry Ionic Team... but there are many newbies learning on Youtube!
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!
Automatically deployed to GitHub Pages using Gulp - Check the last task into gulpfile.js
|
|
:---: |:---: |:---: |
Do you have a project using this template? Let me know to share it with everyone!
npm install
gulp
ionic serveto test on the browser (Gulp is running by default).
ionic run android --livereloadto 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.jsonfrom
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 ] }
gulpor
gulp lib
javascript //Using the Modals service in this template Modals.openModal($scope, 'templates/modals/users.html', 'animated rotateInDownLeft');
javascript $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.jsfile to create your queries (Drop tables, create tables, insert data, etc).
./www/pre.dbfile, you can edit the database using DB Browser for SQLite
javascript var query = "SELECT * FROM Users WHERE Name LIKE '%?%'"; return $q.when($sqliteService.getFirstItem(query, ['Juan']));
javascript var query = "SELECT * FROM Users WHERE Name LIKE '%?%'"; return $q.when($sqliteService.getFirstOrDefaultItem(query, ['Juan']));
javascript var query = "SELECT * FROM Users WHERE Name LIKE '%?%'"; return $q.when($sqliteService.getItems(query, ['Juan']));
javascript var query = "DELETE FROM Users WHERE Name LIKE '%?%'"; return $q.when($sqliteService.executeSql(query, ['Juan']));
./www/pre.dbfile.
./app/js/queries.jsfile.
./app/js/services/sqlite.jsfile.
ionic plugin rm cordova-sqlite-ext --save
./app/js/app.jsfile:
javascript $sqliteService.preloadDataBase(true);
javascript $scope.$on('$ionicView.beforeEnter', function(){ alert("Before to enter to the view"); }); $scope.$on('$ionicView.afterEnter', function(){ alert("After to enter to the view"); });
javascript $state.go($state.current, {}, {reload: true});
javascript $ionicHistory.nextViewOptions({ disableBack: true, disableAnimate : true, historyRoot : true });
javascript $ionicHistory.clearCache();
javascript $ionicHistory.clearHistory();
javascript $ionicViewSwitcher.nextDirection('back');
javascript $state.go("app.login");
javascript $ionicSideMenuDelegate.canDragContent(false);
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)**html
* Using Ionic gestures (Events) with options from Angular Directivesjavascript $ionicGesture.on('hold', function (e) { //Code... }, element, { hold_threshold: 20 });
* Ionic trigger **[events](https://ionicframework.com/docs/v1/api/utility/ionic.EventController/)**javascript ionic.trigger("hold", { target: document.getElementsByClassName("item")[0] });
* Dom manipulation **[utilities](https://ionicframework.com/docs/v1/api/utility/ionic.DomUtil/)**javascript 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 readyjavascript ionic.Platform.ready(function(){ //Code... }); ```
javascript $ionicConfigProvider.scrolling.jsScrolling(false);
javascript $ionicConfigProvider.views.maxCache(5);
javascript $ionicConfigProvider.tabs.position('top'); $ionicConfigProvider.tabs.position('bottom');
javascript $ionicConfigProvider.navBar.alignTitle('center');
javascript $ionicConfigProvider.views.swipeBackEnabled(false);
javascript $ionicConfigProvider.backButton.previousTitleText(false).text('');
javascript ionic.Gestures.gestures.Hold.defaults.hold_threshold = 20;
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 |
javascript .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
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.psdor
icon.aiis located in
./resources/directory
ionic resources --splash| Generate only the splash screens.
splash.png,
splash.psdor
splash.aiis 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/*.slnon 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 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
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
I believe in Unicorns 🦄 Support me, if you do too.
Made with <3