├── .gitignore
├── tips
    ├── img
    │   ├── ionic-lab.png
    │   ├── ionic-snippet-js.gif
    │   ├── ionic-snippet-html.gif
    │   └── ionic-list-item-ellipsis.png
    ├── 11-show-the-ellipsis-text-on-item-list.md
    ├── 21-safe-dom-manipulation.md
    ├── 09-server-apps-with-multiple-screen-sizes.md
    ├── 19-change-ionic-serve-address.md
    ├── 08-ionic-run-is-a-shorthand-command.md
    ├── 15-remove-unnecessary-angularjs-scope-references-to-the-dom.md
    ├── 06-sublime-text-plugin-for-ionic-snippets.md
    ├── 20-remove-view-from-history.md
    ├── 04-avoid-using-window-alert.md
    ├── 03-test-services-from-console.md
    ├── 23-disable-side-menu-swipe-for-a-specific-view.md
    ├── 16-improve-performance-with-one-time-binding.md
    ├── 12-set-the-appropriate-styles-for-different-device-screens.md
    ├── 13-use-ionic-cli-to-manage-platforms-and-plugins.md
    ├── 01-control-an-infinite-scroll-properly.md
    ├── 14-enable-native-scrolling-for-android.md
    ├── 18-manage-ionic-view-lifecycle.md
    ├── 07-add-your-own-color-for-ui.md
    ├── 22-monitor-device-internet-connectivity.md
    ├── 17-cache-views-if-possible.md
    ├── 05-create-a-correct-ios-project-configuration.md
    ├── 10-customize-the-status-bar.md
    └── 02-always-add-crosswalk-for-android.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/tips/img/ionic-lab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tipaday/ionictips/HEAD/tips/img/ionic-lab.png


--------------------------------------------------------------------------------
/tips/img/ionic-snippet-js.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tipaday/ionictips/HEAD/tips/img/ionic-snippet-js.gif


--------------------------------------------------------------------------------
/tips/img/ionic-snippet-html.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tipaday/ionictips/HEAD/tips/img/ionic-snippet-html.gif


--------------------------------------------------------------------------------
/tips/img/ionic-list-item-ellipsis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tipaday/ionictips/HEAD/tips/img/ionic-list-item-ellipsis.png


--------------------------------------------------------------------------------
/tips/11-show-the-ellipsis-text-on-item-list.md:
--------------------------------------------------------------------------------
 1 | ### Show the ellipsis text on item list
 2 | 
 3 | When display long text on list, by default, Ionic will make them hidden by ellipsis.
 4 | 
 5 | ![Ellipsis on long text item list](img/ionic-list-item-ellipsis.png)
 6 | 
 7 | If you want to show them, make it simple by just adding class `item-text-wrap` to the `ion-item`,
 8 | 
 9 | ```
10 | <ion-item class="item-text-wrap"  ...
11 | ```
12 | 
13 | and all the hidden text will be shown.


--------------------------------------------------------------------------------
/tips/21-safe-dom-manipulation.md:
--------------------------------------------------------------------------------
 1 | ### Safe DOM Manipulation
 2 | 
 3 | Because Ionic is built with AngularJS, therefore, we can use the provided **JQlite** for DOM manipulation. However, you should do DOM processing only when DOM is ready, otherwise, it will not work or something unexpected happens.
 4 | 
 5 | ```js
 6 | ionic.DomUtil.ready(function () {
 7 |     // ready
 8 |     var title = angular.element(document.getElementById('title'));
 9 | })
10 | ```
11 | 
12 | This way, views will be safe from unexpected behavior.


--------------------------------------------------------------------------------
/tips/09-server-apps-with-multiple-screen-sizes.md:
--------------------------------------------------------------------------------
 1 | ### Server apps with multiple screen sizes
 2 | 
 3 | While developing apps, you might want to see how apps display across different screen sizes, so using many tabs and changing to many screen sizes is much of work and is difficult to see how it display.
 4 | 
 5 | Fortunately, Ionic CLI provides an option to help developers deal with this situation,
 6 | 
 7 | ```
 8 | $ ionic serve --lab
 9 | or
10 | $ ionic server -l
11 | ```
12 | 
13 | and you will have this,
14 | 
15 | ![Illustration of ionic lab command](img/ionic-lab.png)
16 | 


--------------------------------------------------------------------------------
/tips/19-change-ionic-serve-address.md:
--------------------------------------------------------------------------------
 1 | ### Change Ionic serve address
 2 | 
 3 | By default, Ionic serve address will be set to **localhost**. Somehow, if you want to change to different address that bind to your network, you can use Ionic CLI to pick an address,
 4 | 
 5 | ```
 6 | $ ionic address
 7 | 
 8 | Multiple addresses available.
 9 | Please select which address to use by entering its number from the list below:
10 |  1) 192.168.100.3 (en0)
11 |  2) localhost
12 | Address Selection:  1
13 | ```
14 | 
15 | It seems like this command `ionic address` is not shown on Ionic CLI help list.
16 | 


--------------------------------------------------------------------------------
/tips/08-ionic-run-is-a-shorthand-command.md:
--------------------------------------------------------------------------------
 1 | ### ionic run is a shorthand command
 2 | 
 3 | Everytime you want to build your code and make it run, these steps are taken
 4 | 
 5 | ```
 6 | // to emulate
 7 | $ ionic build && ionic emulate
 8 | 
 9 | // to run on device
10 | $ ionic build && ionic run
11 | ```
12 | 
13 | Forget about it, there is one single command that can help running those steps.
14 | 
15 | ```
16 | $ ionic run
17 | ```
18 | 
19 | What it does is to run a build first, and then detect if there is any connected device to execute, or else, it will try to run on pre-configured emulator.
20 | 
21 | That's it and make it run!
22 | 


--------------------------------------------------------------------------------
/tips/15-remove-unnecessary-angularjs-scope-references-to-the-dom.md:
--------------------------------------------------------------------------------
 1 | ### Remove unnecessary AngularJS scope references to the DOM
 2 | 
 3 | By default, AngularJS just adds some scope references to the DOM, which are used to tools to debug or log tracking, such as Batarang. Those are unnecessary for production applications since it impacts on Ionic app performance. So just remove it when releasing applications.
 4 | 
 5 | ```
 6 | angular.module('yourModule').config(function($compileProvider) {
 7 |     if (/* test if in production */) {
 8 |         $compileProvider.debugInfoEnabled(false);
 9 |     }
10 | });
11 | ```
12 | 
13 | Have fun :)


--------------------------------------------------------------------------------
/tips/06-sublime-text-plugin-for-ionic-snippets.md:
--------------------------------------------------------------------------------
 1 | ### Sublime Text plugin for Ionic snippets
 2 | 
 3 | Repeat typing the same Ionic code is quite tired-some. Well, if you use Sublime Text, there is a plugin I think that quite fit for [Ionic code snippets](https://github.com/PixelDropInc/ionic-snippets-sublime-plugin).
 4 | 
 5 | ![Ionic snippet for HTML](img/ionic-snippet-html.gif)
 6 | 
 7 | ![Ionic snippet for Javascript](img/ionic-snippet-js.gif)
 8 | 
 9 | Visit plugin page for [detailed installation guide](https://github.com/PixelDropInc/ionic-snippets-sublime-plugin#installation).
10 | 
11 | There are more plugins for Sublime Text, but I think this is the best one at current time.
12 | 


--------------------------------------------------------------------------------
/tips/20-remove-view-from-history.md:
--------------------------------------------------------------------------------
 1 | ### Remove views from history
 2 | 
 3 | As you know, view history is managed through `$ionicHistory` service, and sometimes, there is a screen or page we don't want to store on navigation stack, and this is what you do,
 4 | 
 5 | ```
 6 | $ionicHistory.nextViewOptions({
 7 |     disableAnimate: true,
 8 |     disableBack: true
 9 | });
10 | ```
11 | 
12 | Let say there are two screens, start from A and transition to B. We don't want to keep A in history stack, then put the above code in screen A controller when transitioning to screen B (for example, a button click...). This way, at screen B, users can't press *Back* button to return to screen A anymore.
13 | 


--------------------------------------------------------------------------------
/tips/04-avoid-using-window-alert.md:
--------------------------------------------------------------------------------
 1 | ### Avoid using window.alert()
 2 | 
 3 | So you might ask,
 4 | 
 5 | > Why should I not use window.alert()?
 6 | 
 7 | Because it blocks UI and prevent any wait-to-be-done scripts to proper execution. It is also one of the common cause known while developing, that is, any UI click will trigger `window.alert()` [twice in a row](https://github.com/driftyco/ionic/issues/4345#issuecomment-139026496).
 8 | 
 9 | **Sometimes, window.alert() is good while developing apps, if not using it, what are the other options?**
10 | 
11 | Okay, you can use [$window.alert()](https://docs.angularjs.org/api/ng/service/$window).
12 | 
13 | Or even better, use the [$ionicPopup](http://ionicframework.com/docs/api/service/$ionicPopup/).
14 | 
15 | About this, it's all up to you, but that is a recommendation from my experiences.
16 | 
17 | 


--------------------------------------------------------------------------------
/tips/03-test-services-from-console.md:
--------------------------------------------------------------------------------
 1 | ### Test Services from Console
 2 | 
 3 | This is a pretty popular trick among Angular developers.
 4 | 
 5 | From console screen, you can get an instance of the service you want to test.
 6 | 
 7 | ```
 8 | var injector = angular.element(document).injector();
 9 | var service = injector.get('SERVICE_NAME')
10 | ```
11 | 
12 | Replace **SERVICE_NAME** with the name of service you want to test. Also, for quick work on console, you can make it in one line.
13 | 
14 | ```
15 | > angular.element(document).injector().get('SERVICE_NAME')
16 | ```
17 | 
18 | For a more precise selection, you should pick up the element that is directed by **ng-app** attribute.
19 | 
20 | ```
21 | > angular.element('*[ng-app]').injector().get('SERVICE_NAME');
22 | ```
23 | 
24 | Somehow, it might become handy under app development for many Ionic developers, I guess :)
25 | 


--------------------------------------------------------------------------------
/tips/23-disable-side-menu-swipe-for-a-specific-view.md:
--------------------------------------------------------------------------------
 1 | ### Disable side menu swipe for a specific view
 2 | 
 3 | By default, all views based on side menu can be swiped to open the side menu. However, there might have one or several views that you don't want user to swipe out, so how to do it?
 4 | 
 5 | This little snippet will help,
 6 | 
 7 | ```js
 8 | function disableSideMenuSwipe() {
 9 |     $scope.$on('$ionicView.enter', function() {
10 |         $ionicSideMenuDelegate.canDragContent(false);
11 |     });
12 |     $scope.$on('$ionicView.leave', function() {
13 |         $ionicSideMenuDelegate.canDragContent(true);
14 |     });
15 | }
16 | ```
17 | 
18 | So when a view is entered, `$ionicSideMenuDelegate` service will help to disable the drag ability (in other word, **swipe**) and re-enable when leaving. Without reset `canDragContent` to **true**, users can't swipe the side menu, so be aware of this option when use.


--------------------------------------------------------------------------------
/tips/16-improve-performance-with-one-time-binding.md:
--------------------------------------------------------------------------------
 1 | ### Improve performance with one-time binding
 2 | 
 3 | [Introduced in Angular 1.3](https://docs.angularjs.org/guide/expression#one-time-binding), one-time binding saves developers from a lot of performance troubles with data binding,
 4 | 
 5 | > An expression that starts with `::` is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value.
 6 | 
 7 | After populated, the data will be rendered once and removed from the watch list, which means it won't be re-rendered again if there is any change. And it is a good point to implement in Ionic applications in screens that we only want to display data and having no concern over data change.
 8 | 
 9 | ```
10 | <p>{{::firstname}}</p>
11 | <p>{{::lastname}}</p>
12 | 
13 | <ul>
14 |     <li ng-repeat="friend in ::friends_list">{{friend.name}}</li>
15 | </ul>
16 | ```
17 | 
18 | On the bottom line, please review throughout the whole Ionic application to find out, which pages only need to render data once, which pages do not.
19 | 


--------------------------------------------------------------------------------
/tips/12-set-the-appropriate-styles-for-different-device-screens.md:
--------------------------------------------------------------------------------
 1 | ### Set the appropriate styles for different device screens
 2 | 
 3 | While developing mobile applications using Ionic framework, you will need to deal with different screen sizes across devices. Since things are just regular web user interface, so we will need to use `@media` for handling responsive.
 4 | 
 5 | While some properties like `min-width`, `max-width` work for browsers, **they don't work on mobile apps**.
 6 | 
 7 | ```css
 8 | @media only screen and (min-width: 320px) and (max-width: 414px) {
 9 |     // define responsive styles here
10 | }
11 | ```
12 | 
13 | Above example won't response to other styles, you won't see any change.
14 | 
15 | To handle this, we need to use the `device`-related properties, eg. `min-device-width`, `max-device-width`, which helps to detect the **physical dimension of the screen**.
16 | 
17 | ```css
18 | @media only screen and (max-device-width: 480px) {
19 |     // define responsive styles here
20 | }
21 | ```
22 | 
23 | Refer to [media queries list for common devices](https://github.com/petehouston/physical-dimension-breakpoints) for breakpoint settings.
24 | 
25 | Have fun :)
26 | 
27 | 


--------------------------------------------------------------------------------
/tips/13-use-ionic-cli-to-manage-platforms-and-plugins.md:
--------------------------------------------------------------------------------
 1 | ### Use Ionic CLI to manage platforms and plugins
 2 | 
 3 | Ionic framework comes with Ionic CLI tool to help developers managing platforms and plugins. A very common mistake that many people face is that, they just copy projects from somewhere else, and then use them without configuring via Ionic CLI. As a result, their projects will not work.
 4 | 
 5 | To build project for a specific platform, like iOS or Android, this command must be done,
 6 | 
 7 | ```
 8 | $ ionic platform add ios
 9 | 
10 | $ ionic platform add android
11 | ```
12 | 
13 | When grabbing a project somewhere to the local machine, you need to install necessary Cordova plugins before running it,
14 | 
15 | ```
16 | $ ionic state restore
17 | ```
18 | 
19 | All of these platform and plugins information is stored in `package.json` like this,
20 | 
21 | ```
22 | "cordovaPlugins": [
23 |     "cordova-plugin-whitelist@1.0.0",
24 |     "cordova-plugin-inappbrowser@1.0.1",
25 |     "cordova-plugin-splashscreen@2.1.0"
26 | ],
27 | "cordovaPlatforms": [
28 |     "android",
29 |     "ios"
30 | ]
31 | ```
32 | 
33 | This way, all Ionic projects are synced across developers' machines.


--------------------------------------------------------------------------------
/tips/01-control-an-infinite-scroll-properly.md:
--------------------------------------------------------------------------------
 1 | ### Control an infinite scroll properly.
 2 | 
 3 | The [infinite scroll](http://ionicframework.com/docs/api/directive/ionInfiniteScroll/) is usually applied to the ionic list and it is defined by,
 4 | 
 5 | ```
 6 | <ion-infinite-scroll
 7 |     on-infinite="loadMore()"
 8 |     distance="1%">
 9 | </ion-infinite-scroll>
10 | ```
11 | 
12 | The `loadMore()` function will do basically two things,
13 | 
14 | * Job 1: Get data, process and update models accordingly to the view.
15 | * Job 2: Broadcast the `scroll.infiniteScrollComplete` to tell the scroll to stop the loading UI.
16 | 
17 | If **job 2** goes missing, **the loading UI will never closed, it will show up forever**.
18 | 
19 | Another thing to point out, in the condition of having no more data to load, should we show up the loading spinner? Well, that depends on your apps' UX then. Since Ionic uses AngularJS, you can use [ng-if](https://docs.angularjs.org/api/ng/directive/ngIf) to check the condition to load.
20 | 
21 | ```
22 | <ion-infinite-scroll
23 |     ng-if="shouldLoadMore()"
24 |     on-infinite="loadMore()"
25 |     distance="1%">
26 | </ion-infinite-scroll>
27 | ```
28 | 
29 | **Playground**: http://play.ionic.io/app/b5493ff1700e
30 | 
31 | 
32 | 
33 | 


--------------------------------------------------------------------------------
/tips/14-enable-native-scrolling-for-android.md:
--------------------------------------------------------------------------------
 1 | ### Enable Native Scrolling for Android
 2 | 
 3 | There is a really huge performance gain when applying **Native Scrolling** for Android, like when interacting with *Pull-to-Refresh*, *List View* ...
 4 | 
 5 | From Ionic 1.2+, Native Scrolling is enable by default.
 6 | For previous Ionic version, you can enable it by configuring the `$ionicConfigProvider`.
 7 | 
 8 | ```
 9 | $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);
10 | ```
11 | 
12 | Sometimes, there are pages that you don't want to apply Native Scrolling, and to disable it, switch `overflow-scroll` option to `false` on `ion-content` directive of the page,
13 | 
14 | ```
15 | <ion-content overflow-scroll="false">
16 | ```
17 | 
18 | One important to note that **Native Scrolling is not working when running on `collection-repeat`**,
19 | 
20 | > One important caveat is that because of how collection-repeat works, it requires rapidly shifting the scroll content, hijacking the scroll behavior, and recreating the scrollbar. That’s pretty much JS scrolling, so we set it so that collection-repeat will force an ion-content to use JS scrolling.
21 | 
22 | Quote from [Ionic Blog, Native Scrolling in Ionic: A Tale in Rhyme](http://blog.ionic.io/native-scrolling-in-ionic-a-tale-in-rhyme/)


--------------------------------------------------------------------------------
/tips/18-manage-ionic-view-lifecycle.md:
--------------------------------------------------------------------------------
 1 | ### Manage Ionic view lifecycle
 2 | 
 3 | When using AngularJS it is considered a good practice to load your data using the `$viewContentLoaded` event in controllers. When using Ionic SDK, this event is not usable, instead we have access to more specific events. The Ionic view cache comes with 8 new events, for instance `$ionicView.loaded` is triggered once per view being created and added to the DOM while the `$ionicView.enter` event will fire, whether it was the first load or a cached view.
 4 | 
 5 | Using the right event to load your data can improve the usability of the application. Indeed the less HTTP requests you send the better for the usability.
 6 | 
 7 | Here is the complete list of events that you can use with Ionic:
 8 | 
 9 | ```
10 | $scope.$on('$ionicView.loaded', function(){});
11 | $scope.$on('$ionicView.enter', function(){});
12 | $scope.$on('$ionicView.leave', function(){});
13 | $scope.$on('$ionicView.beforeEnter', function(){});
14 | $scope.$on('$ionicView.beforeLeave', function(){});
15 | $scope.$on('$ionicView.afterEnter', function(){});
16 | $scope.$on('$ionicView.afterLeave', function(){});
17 | $scope.$on('$ionicView.unloaded', function(){});
18 | ```
19 | 
20 | Understanding Ionic view lifecycle will help us to handle events and actions more properly.


--------------------------------------------------------------------------------
/tips/07-add-your-own-color-for-ui.md:
--------------------------------------------------------------------------------
 1 | ### Add your own color for UI
 2 | 
 3 | Ionic framework provides a pretty cool list of color for common use. However, if you want to have your own color for UI without do too much work, just override one of base colors defined in `scss/ionic.app.scss`
 4 | 
 5 | First make sure to setup SASS for project,
 6 | 
 7 | ```
 8 | $ ionic setup sass
 9 | ```
10 | 
11 | Open the SASS file, you will see something like this commented,
12 | 
13 | ```
14 | $light:                           #fff !default;
15 | $stable:                          #f8f8f8 !default;
16 | $positive:                        #387ef5 !default;
17 | $calm:                            #11c1f3 !default;
18 | $balanced:                        #33cd5f !default;
19 | $energized:                       #ffc900 !default;
20 | $assertive:                       #ef473a !default;
21 | $royal:                           #886aea !default;
22 | $dark:                            #444 !default;
23 | ```
24 | 
25 | Those are pre-defined colors in Ionic, so we can pick one color to override all correspondent UI components. For example, if we want all **dark**-colored components to be in **#2c3e50**, just add right below the comment paragraph,
26 | 
27 | ```
28 | $dark : #2c3e50 !default;
29 | ```
30 | 
31 | Run `gulp` to rebuild the CSS from SCSS, and now all **dark**-colored components will reflect change with the new color, eg. `bar-dark`, `button-dark`, `toggle-dark` ...
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/tips/22-monitor-device-internet-connectivity.md:
--------------------------------------------------------------------------------
 1 | ### Monitor device internet connectivity
 2 | 
 3 | To check for Internet connection, we will need to use [**cordova-plugin-network-information**](http://ngcordova.com/docs/plugins/network/), to install,
 4 | 
 5 | ```
 6 | $ cordova plugin add cordova-plugin-network-information
 7 | ```
 8 | 
 9 | To monitor, we will bind the event provided by the plugin to the `$rootScope`,
10 | 
11 | ```
12 | // listen for Online event
13 | $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
14 |     // do something when device is ONLINE
15 | });
16 | 
17 | // listen for Offline event
18 | $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
19 |     // do something when device is OFFLINE
20 | });
21 | ```
22 | 
23 | To check for current network status, call `$cordovaNetwork.isOnline()` and `$cordovaNetwork.isOffline()` to know.
24 | 
25 | Additionally, to get the type of network connection, use `getNetwork()`, it will return a **Connection** object with one of the following value.
26 | 
27 | Connection Type | Description
28 | --------------- | -----------
29 | Connection.UNKNOWN | Unknown connection
30 | Connection.ETHERNET | Ethernet connection
31 | Connection.WIFI | WiFi connection
32 | Connection.CELL_2G | Cell 2G connection
33 | Connection.CELL_3G | Cell 3G connection
34 | Connection.CELL_4G | Cell 4G connection
35 | Connection.CELL | Cell generic connection
36 | Connection.NONE | No network connection
37 | 
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/tips/17-cache-views-if-possible.md:
--------------------------------------------------------------------------------
 1 | ### Cache views if possible
 2 | 
 3 | By design, each Ionic screen or page is rendered as an `ion-view` directive. When there are a lot of pages, it apparently slows down during transition from pages to pages due to re-rendering. Lucklily, Ionic provides cache mechanism for views which is enabled by default with 10 views. When enabled it keeps views in the DOM cache with their scope, current state, and scroll position. When navigating you never lose your input or scroll position so you can go back in history without the fear of losing data.
 4 | 
 5 | > Views are cached to improve performance. When a view is navigated away from, its element is
 6 | left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a
 7 | view that is already cached, its scope is reconnected, and the existing element, which was
 8 | left in the DOM, becomes active again. This can be disabled, or the maximum number of cached
 9 | views changed in $ionicConfigProvider, in the view’s $state configuration, or
10 | as an attribute on the view itself.
11 | 
12 | To config number of views to be cached,
13 | 
14 | ```
15 | $ionicConfigProvider.views.maxCache(10);
16 | ```
17 | 
18 | or can be set per platform,
19 | 
20 | ```
21 | $ionicConfigProvider.platform.android.views.maxCache(15);
22 | $ionicConfigProvider.platform.ios.views.maxCache(15);
23 | ```
24 | 
25 | 
26 | To disable cache for a specific view,
27 | 
28 | ```
29 | <ion-view cache-view="false">
30 | ```
31 | 
32 | or you can add `cache` option on `$stateProvider`,
33 | 
34 | ```
35 | $stateProvider.state('state', {
36 |    cache: false,
37 |    ...
38 | });
39 | ```
40 | 
41 | View cache is a must and very important for improving performance on Ionic applications. Please be aware of this while developing your apps.
42 | 


--------------------------------------------------------------------------------
/tips/05-create-a-correct-ios-project-configuration.md:
--------------------------------------------------------------------------------
 1 | ### Create a correct iOS project configuration
 2 | 
 3 | There is one bug in Ionic CLI is that, while creating project via command-line, even if you specify the flag **--appname** for app name and **--id** for app package id, it won't do anything on iOS project config.
 4 | 
 5 | What I mean is this,
 6 | 
 7 | ```
 8 | $ ionic start awesome-app blank --appname "Awesome App" --id "com.tipaday.awesomeapp"
 9 | ```
10 | 
11 | After project creation, checkout the **platforms/ios** directory,
12 | 
13 | * The project name should refect what app name is, and not **HelloCordova**.
14 | * Widget name and id in **HelloCordava** are not updated.
15 | 
16 | ```
17 | <widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
18 |     ...
19 |     <name>HelloCordova</name>
20 |     <description>
21 |         An Ionic Framework and Cordova project.
22 |     </description>
23 |     <author email="you@example.com" href="http://example.com.com/">
24 |       Your Name Here
25 |     </author>
26 | ```
27 | 
28 | **How to fix it**
29 | 
30 | After creating new projects, just remove the platform if it is already added.
31 | 
32 | ```
33 | $ ionic platform rm ios
34 | ```
35 | 
36 | Open the **config.xml** at root directory and update correct information, eg. **name**, **id**, **author**, **description**...
37 | 
38 | then issue the platform command again,
39 | 
40 | ```
41 | $ ionic platform add ios
42 | ```
43 | 
44 | You will see the newly-added iOS project has been updated with the correct name and correct config information.
45 | 
46 | **NOTE: this bug of Ionic CLI happens with v1.7.14 and below.**
47 | 
48 | **For Android projects, the package id is updated correctly automatically on AndroidManifest.xml and res/values.xml; so there is no need to worry about it.**
49 | 
50 | 
51 | 
52 | 


--------------------------------------------------------------------------------
/tips/10-customize-the-status-bar.md:
--------------------------------------------------------------------------------
 1 | ### Customize the status bar
 2 | 
 3 | To customize the status bar, you will have to add a Cordova plugin,
 4 | 
 5 | ```
 6 | $ cordova plugin add cordova-plugin-statusbar
 7 | 
 8 | or
 9 | 
10 | $ cordova plugin add org.apache.cordova.statusbar
11 | ```
12 | 
13 | Those two commands are the same, so don't worry if you see it different across many tutorials out there.
14 | 
15 | Basically, the Cordova plugin will make status bar being available through `window.StatusBar` object. If you spot on any Ionic project template, you will see the following part,
16 | 
17 | ```js
18 | if(window.StatusBar) {
19 |     StatusBar.styleDefault();
20 | }
21 | ```
22 | 
23 | The following methods are available through `window.StatusBar`:
24 | 
25 | ```
26 | * StatusBar.overlaysWebView()
27 | * StatusBar.styleDefault()
28 | * StatusBar.styleLightContent()
29 | * StatusBar.styleBlackTranslucent()
30 | * StatusBar.styleBlackOpaque()
31 | * StatusBar.backgroundColorByName(namedColor)
32 | * StatusBar.backgroundColorByHexString(hexColorString)
33 | * StatusBar.hide()
34 | * StatusBar.show()
35 | ```
36 | 
37 | For the `StatusBar.backgroundColorByName(namedColor)`, you need to provide a name `namedColor` that is pre-defined in the plugin, and they are:
38 | 
39 | ```
40 | "black": "#000000",
41 | "darkGray": "#A9A9A9",
42 | "lightGray": "#D3D3D3",
43 | "white": "#FFFFFF",
44 | "gray": "#808080",
45 | "red": "#FF0000",
46 | "green": "#00FF00",
47 | "blue": "#0000FF",
48 | "cyan": "#00FFFF",
49 | "yellow": "#FFFF00",
50 | "magenta": "#FF00FF",
51 | "orange": "#FFA500",
52 | "purple": "#800080",
53 | "brown": "#A52A2A"
54 | ```
55 | 
56 | For the `StatusBar.backgroundColorByHexString(hexColorString)`, the string must be a valid color hex, eg., `#ff00ff`, `#3a3a3a`, `#40d5e7`... and must have `#` as prefix.
57 | 
58 | To determine if the status bar is visible on app, check it via `StatusBar.isVisible` property, which is a boolean.
59 | 
60 | For the plugin has pretty much methods for uses just to customizing color, there is a `ngCordova` plugin that wraps all of these, `$cordovaStatusbar`. Following methods are supported,
61 | 
62 | ```
63 | $cordovaStatusbar.overlaysWebView(true);
64 | 
65 | // styles: Default : 0, LightContent: 1, BlackTranslucent: 2, BlackOpaque: 3
66 | $cordovaStatusbar.style(1);
67 | 
68 | // supported names: black, darkGray, lightGray, white, gray, red, green,
69 | // blue, cyan, yellow, magenta, orange, purple, brown
70 | $cordovaStatusbar.styleColor('black');
71 | 
72 | $cordovaStatusbar.styleHex('#000');
73 | 
74 | $cordovaStatusbar.hide();
75 | 
76 | $cordovaStatusbar.show();
77 | 
78 | var isVisible = $cordovaStatusbar.isVisible();
79 | ```
80 | 
81 | Visit these links for more information,
82 | 
83 | * [learn.ionic - Customizing the status bar](http://learn.ionicframework.com/formulas/customizing-the-status-bar/)
84 | * [ngCordova - $cordovaStatusbar](http://ngcordova.com/docs/plugins/statusbar/)
85 | 
86 | 
87 | 
88 | 
89 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ionic Tips
 2 | 
 3 | Get one Ionic daily tip everyday. Juice up your Ionic mobile app development.
 4 | 
 5 | [![Ionic Tips](https://img.shields.io/badge/tips-ionic-blue.svg?style=flat-square)](https://github.com/tipaday/ionictips)
 6 | 
 7 | ## Tips List
 8 | 
 9 | - 01 - [Control the infinite scroll properly](tips/01-control-an-infinite-scroll-properly.md)
10 | - 02 - [Always add Crosswalk for Android](tips/02-always-add-crosswalk-for-android.md)
11 | - 03 - [Test services from console](tips/03-test-services-from-console.md)
12 | - 04 - [Avoid using window.alert()](tips/04-avoid-using-window-alert.md)
13 | - 05 - [Create a correct iOS project configuration](tips/05-create-a-correct-ios-project-configuration.md)
14 | - 06 - [Sublime Text plugin for Ionic snippets](tips/06-sublime-text-plugin-for-ionic-snippets.md)
15 | - 07 - [Add your own color for UI](tips/07-add-your-own-color-for-ui.md)
16 | - 08 - [ionic run is a shorthand command](tips/08-ionic-run-is-a-shorthand-command.md)
17 | - 09 - [Serve apps with multiple screen sizes](tips/09-server-apps-with-multiple-screen-sizes.md)
18 | - 10 - [Customize the status bar](tips/10-customize-the-status-bar.md)
19 | - 11 - [Show the ellipsis text on item list](tips/11-show-the-ellipsis-text-on-item-list.md)
20 | - 12 - [Set the appropriate styles for different device screens](tips/12-set-the-appropriate-styles-for-different-device-screens.md)
21 | - 13 - [Use Ionic CLI to manage platforms and plugins](tips/13-use-ionic-cli-to-manage-platforms-and-plugins.md)
22 | - 14 - [Enable Native Scrolling for Android](tips/14-enable-native-scrolling-for-android.md)
23 | - 15 - [Remove unnecessary AngularJS scope references to the DOM](tips/15-remove-unnecessary-angularjs-scope-references-to-the-dom.md)
24 | - 16 - [Improve performance with one-time binding](tips/16-improve-performance-with-one-time-binding.md)
25 | - 17 - [Cache views if possible](tips/17-cache-views-if-possible.md)
26 | - 18 - [Manage Ionic view lifecycle](tips/18-manage-ionic-view-lifecycle.md)
27 | - 19 - [Change Ionic serve address](tips/19-change-ionic-serve-address.md)
28 | - 20 - [Remove view from history](tips/20-remove-view-from-history.md)
29 | - 21 - [Safe DOM manipulation](tips/21-safe-dom-manipulation.md)
30 | - 22 - [Monitor device Internet connectivity](tips/22-monitor-device-internet-connectivity.md)
31 | - 23 - [Disable side menu swipe for a specific view](tips/23-disable-side-menu-swipe-for-a-specific-view.md)
32 | 
33 | ## Contribution Guide
34 | 
35 | Feel free to fork and [make a pull request](https://github.com/tipaday/ionictips/pulls) for tips you'd like to share
36 | 
37 | ## Credits
38 | 
39 | I'd like to give thanks to the following projects, developers for their awesome sharing about Angular and Ionic development tips and tricks.
40 | 
41 | * Ionic Team ([blog](blog.ionic.io), [official documentation](http://ionicframework.com/docs))
42 | * [ngCordova](http://ngcordova.com/docs/plugins/network/)
43 | * [Julien Renaux](http://julienrenaux.fr/2015/08/24/ultimate-angularjs-and-ionic-performance-cheat-sheet/)
44 | 


--------------------------------------------------------------------------------
/tips/02-always-add-crosswalk-for-android.md:
--------------------------------------------------------------------------------
 1 | ### Always add crosswalk for Android
 2 | 
 3 | As you know, Ionic is a hybrid platform that runs and depends heavily on native `WebView` on Android; however, there are so many Android version, and each version is shipped with different version of `WebView` that work differently, which makes app development on Android more difficult.
 4 | 
 5 | For that reason, [the Crosswalk project](https://crosswalk-project.org/) is initiated and under heavy development to provide the latest modern and stable Chromium browser for all Android devices, a web runtime actually. Some advantages quoted from the project website,
 6 | 
 7 | * Get consistent, predictable behavior by reducing Android device fragmentation.
 8 | * Use the latest web innovations and APIs. Provide a feature rich experience on all Android 4.0+ devices.
 9 | * Easily debug with Chrome DevTools.
10 | * Improve the performance of your HTML, CSS, and JavaScript.
11 | 
12 | It's great, isn't it? Less troubles when dealing with inefficiency on Android devices. [Ionic official documentation](http://ionicframework.com/docs/cli/browsers.html) also suggests to add Crosswalk browser for Android, so you should do it.
13 | 
14 | To see the list of available browser:
15 | 
16 | ```
17 | $ ionic browser list
18 | 
19 | iOS - Browsers Listing:
20 | 
21 | Not Available Yet - WKWebView
22 | Not Available Yet - UIWebView
23 | 
24 | 
25 | Android - Browsers Listing:
26 | 
27 | 
28 | Available - Crosswalk - ionic browser add crosswalk
29 |          Version 8.37.189.14 Published
30 |          Version 9.38.208.10 Published
31 |          Version 10.39.235.15 Published
32 |          Version 11.40.277.7 Published
33 |          Version 12.41.296.5 Published
34 | (beta)   Version 13.42.319.6 Published
35 | (canary) Version 14.42.334.0 Published
36 | 
37 | Available - Crosswalk-lite - ionic browser add crosswalk-lite
38 | (canary) Version 10.39.234.1 Published
39 | (canary) Version 10.39.236.1 Published
40 | 
41 | Available - Browser (default) - ionic browser revert android
42 | Not Available Yet - GeckoView
43 | ```
44 | 
45 | At the current time, only Android is supported so just add for Android. As you can see on my result above, there are several Crosswalk version available. To add Crosswalk, issue this command,
46 | 
47 | ```
48 | $ ionic browser add crosswalk
49 | ```
50 | 
51 | By not specifying any version, Ionic will take the oldest version, which is **8.37.189.14** in my case. You can also specify a Crosswalk version,
52 | 
53 | ```
54 | $ ionic browser add crosswalk@12.41.296.5
55 | ```
56 | 
57 | To remove Crosswalk,
58 | 
59 | ```
60 | $ ionic browser revert android
61 | ```
62 | 
63 | or,
64 | 
65 | ```
66 | $ ionic browser rm crosswalk
67 | ```
68 | 
69 | The two commands do the same thing for Android.
70 | 
71 | To conclude, **always add Crosswalk browser for your Android apps**.
72 | 
73 | For more information about Crosswalk project, check out the following pages:
74 | 
75 | * [Ionic CLI Browser](http://ionicframework.com/docs/cli/browsers.html)
76 | * [The Crosswalk Project](https://crosswalk-project.org/)
77 | * [Intel Developer - Why use Crosswalk?](https://software.intel.com/en-us/xdk/docs/why-use-crosswalk-for-android-builds)
78 | 
79 | 
80 | 
81 | 


--------------------------------------------------------------------------------