Tag Archives: Ionic Tutorials
Hide back button in ionic AngularJs
Hide back button in ionic AngularJs : Sometimes we need to hide the back button on some pages. We can use $ionicNavBarDelegate service and showBackButton() function to show and hide the back button.
Hide back button in ionic AngularJs
You disable the back button in ionic as below –
Hide back button in ionic AngularJs Example
.controller('MainCtrl', function($scope, $location, $ionicNavBarDelegate) {
var path = $location.path();
if (path.indexOf('edit') != -1){
$ionicNavBarDelegate.showBackButton(false);
}
else{
$ionicNavBarDelegate.showBackButton(true);
}
})
|
The above example will hide the back button where the page index of ‘edit’ is not equal to -1 ie it will hide the back button except the edit page. So you can add other condition to show and hide the back button.
- $ionicNavBarDelegate.showBackButton(false) – This will hide the back button.
- $ionicNavBarDelegate.showBackButton(false) – This will show the back button.
Reload Ionic View
Reload Ionic View : In ionic views are cached to provide the good performance to the users. Sometimes we need to reload the views. Here in this tutorial we are going to explain how you can reload the views in ionic framework.
Reload Ionic View
You can avoid the view cache using the followings ways –
- Disable ion-view cache using the following method –
This will disable view cache.
- If you want to refresh the view use ion-refresher – http://tutorialsplane.com/ionic-ion-refresher/
The above method will help you in disabling view cache and reloading it for updated content.
Ionic Change Background Color of List Item
Ionic Change Background Color of List Item : We sometimes need to customize the ionic list item’s style such as background color, text color etc. You can add your own css to add the new style or you can override the default style. Here in this tutorial we are going to explain how to add styles in ionic list items with example and demo.
Ionic Change Background Color of List Item
You can add the background color of list Item using the following methods –
Ionic Change Background Color : Using Default Colors
If you run the above example it will produce the following output-
Ionic Change list item Background Color : Using Custom Styles
If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –
Ionic List Change Background Color on Hover
More Examples
Let us have more examples to customize the ionic lists-
Ionic Change font Color
If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –
The above example will change the font color of the list items in the ionic.
Ionic Side Menus
Ionic Side Menus (Delegate $ionicSideMenuDelegate): Ionic Side Menus are basically container which contains the main content and slide menu(s). You can add the menu in left or side. $ionicSideMenuDelegate service is used for menus. Here in this tutorial we are going to explain how to create slide menus with example and demo.
Ionic Side Menus
Side menus contains following components –
- ion-side-menus
- ion-side-menu-content
- ion-side-menu
- expose-aside-when
- menu-toggle
- menu-close
- $ionicSideMenuDelegate
Let us create a simple left menu and then we will go through each components. First we will import the service $ionicSideMenuDelegate in controller to use the menus functions. Let us first create js part and them the html part this simple menu.
Ionic Slide Menu : Controller Js Part
Ionic Slide Menus: Example
|
|
In controller part we have imported the service $ionicScrollDelegate and created a function toggleLeft which binds the toggle event to the menus.
Ionic Slide Menu : Html Part
Now let us create the html part contains the simple menu and body part as below –
ion-side-menus contains the menu and main content both. ion-side-menu-content contains the main content of the application. ion-header-bar creates header part. Header has the button with “burger icon” and the attribute directive menu-toggle=”left” which binds the menu toggle left functionality.
If you run the above example it will produce the following output –
Learn More About Ionic Menus
Let us learn in details about ionic menus.
ion-side-menus
To create side menu parent element <ion-side-menus> is required. It has at least two child elements –
– 1 . <ion-side-menu> – It contains the side menus.
– 2 . <ion-side-menu-content> – It is used for main content which is positioned at the center.
Here is structure for <ion-side-menus> and it’s elements-
ion-side-menus: Ionic Side Menu Bar Toggle Example
|
|
You can create left or right menu using the above ion-side-menu.
Options
- enable-menu-with-back-views[boolean (optional)] – It is basically used to decide whether to enable the side menu when the back button is showing. If you set it false the side menu
toggle will be hidden and user will not be able to use it. It will be visible when user will go to home page ie root page. - delegate-handle[string(optional)]– $ionicScrollDelegate is used to indentify the side menus.
ion-side-menu-content
This is child of ion-side-menus. This main content part of the application which displays the main content to users.
ion-side-menu-content: Ionic Side Menu Bar
|
Options
- drag-content[boolean(optional)]: Used to set content dragging enabled or disabled. Default is set true.
- edge-drag-threshold[number(optional)]: Used to set the threshold distance to ie. distance from the top of the screen in pixel.
ion-side-menu
This is child of ion-side-menus and sibling of ion-side-menu-content directive. This is main side menu part.
ion-side-menu : Ionic Side Menu Bar Example
|
|
This contains the menu items of the side menu.
Options
- side[string] : Used to assign Left or Right Side.
- is-enabled(optional): Used to enable or disable the menu.
- width[optinal]: Width of side menu in pixel. Default is 275px.
expose-aside-when
This is used to show and hide side menu landscape and portrait mode. You can set expose-aside-when=”large” to hide the menu. It hides the menu when viewport width is less than 786px and always shows when viewport width is more than the 786px.
expose-aside-when : Ionic Side bar show in portrait mode Example
|
|
Ionic Infinite Scroll
Ionic Infinite Scroll – ionInfiniteScroll directive allows you to call a function when user reaches at the bottom of the page. The ionInfiniteScroll is basically child of ionContent or ionScroll. on-infinite is used to call the function on scroll event when user reaches at the bootom of the page. Here in this tutorial we are going to explain how to call the function on on-infinite on infinite scroll.
Ionic Infinite Scroll
Here is very basic and simple example of ionInfiniteScroll
Ionic Infinite Scroll : Html Part
Ionic Infinite Scroll:
|
Let us create javascript part with controller and function to call the function when user scrolls on the bootm of the screen.
Ionic Infinite Scroll : Controller Part
The controller part contains the following function to load the data from server-
Ionic Infinite Scroll Controller Example
.controller('MainCtrl', function($scope, $http) {
$scope.items = [];
$scope.loadMoreData = function() {
$http.get('url_to_load content').then(function(resp) {
$scope.items = resp.item;// json format replace with your data format returned from server
$scope.$broadcast('scroll.infiniteScrollComplete');
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
});
};
});
|
The above example loads data from server when you scroll to the bottom of the screen. The above example will produce the output something like this –
Options
- on-infinite [expression] – Used to call when the scroller reaches at the bottom of screen.
- distance [optional(string)]– The distance from bottom when the function shoud be called Default distance is 1%.
- spinner [optional(string)] – The ionSpinner to show when loading.
- icon [optional(string)] – This is used to specify the icon to show while loading.
- immediate-check [optional(boolean)] – This is used to check the infinite scroll bounds immediately on load.
Ionic Scroll
Ionic Scroll : This is used to create scrollable container for content.
Ionic Scroll
Here is simple example of ionic scroll –
The above example will produce the output something like this –
API
delegate-handle [optional(string)]– Used to identify this scrollView with $ionicScrollDelegate.
direction [optional(string)]– Direction of scroll. ‘x’ or ‘y’ or ‘xy’. Default is ‘y’.
locking [optional(boolean)] – Used to lock screen in one direction. This is useful to set to false when zoomed in or scrolling in two directions. Default value is set true.
paging [optional(boolean)]– If you want to scroll with paging.
on-refresh [optional(expression)]– Called when pull-to-refresh.
on-scroll [optional(expression)]– Called when user scrolls.
scrollbar-x [optional(boolean)]– Used to show the horizontal scrollbar. Default value is true.
scrollbar-y [optional(boolean)]– Used to show the vertical scrollbar. Default value true.
zooming [optional(boolean)]– Used to support pinch-to-zoom
min-zoom [optional(integer)]– Used to set the smallest zoom allowed. The default value is 0.5.
max-zoom [optional(integer)]– Used to set the largest zoom allowed. The default value is 3.
has-bouncing [optional(integer)]– Used to allow scrolling to bounce past the edges of the content. This is set true in ios and false in android.
AngularJS ng-click to go to another page in Ionic framework
AngularJS ng-click to go to another page in Ionic framework : We sometimes need ng-click to load another page in ionic framework. Here in this tutorial we are going to create a simple function which will accept the path of the page and will load the page. For this we need the controller service $location. In this this tutorial we will exlplain this with example and online demo.
AngularJS ng-click to go to another page in Ionic framework
You can create the controller function simply as –
Controller part : Js
If you will run the above example it will produce the output like this -
Ionic run a controller function on view open/shown
Ionic run a controller function on view open/shown : We sometimes need to call a controller when the view is loded or open/shown. You can load the controller on the ion-nav-view load and it’s function. Here in this tutorial we are going to explain how to load and call a different controller function whenever the view is loaded ie. open/shown.
Ionic run a controller function on view open/shown
Here are the steps to run a controller function on ion view open-
ion-nav-view Part
Add the controller name you want to load and call it’s function as below
Ionic run a controller function on view open/shown:
|
|
Now let us define the controller and it’s function as below-
Controller Part
Ionic run a controller function on view open/shown:
.controller('myController', function($scope) {
$scope.testFunction = function() {
//Your Code Goes Here
};
});
|
The above controller will be loaded and function testFunction will be called.
Ionic clear view cache on close : afterLeave –
Ionic clear view cache on close : afterLeave –
$scope.$on("$ionicView.afterLeave", function () {
$ionicHistory.clearCache();
});
|
The above example will clear ionic view cache each time it is closed.
Ionic change ion-view header color
Ionic change ion-view header color : Sometimes you need to change the default ion-view header color in ionic framework. You can use ion-nav-bar in each view and add the ionic inbuilt color css or add you custom css to change the ion-view header color. Here in this tutorial we are going to explain how to change the ion-view color in ionic framework with example and demo.
Ionic change ion-view header color
Add the ion-nav-bar to each ion-view and add the color css in this. Here is an example for this –
The above example will change the default ion-view header color.
If you will run the above example it will produce the following output-
More About
Let us do more customization.
Add Custom Color
If you want to add your custom color add a class and add the css for this –
The above example will change the default ion-view header color.
If you will run the above example it will produce the following output-
