Ionic - Part 6

Positioning The Title: IONIC APPS

Some components like titles, tabs behave according to the platform they are built for. For example, on iOS the default display of view title is at the center and to the left in android devices.

This might look like a minor thing at the beginning of app development, but when we want to place some icons in the header(maybe for branding purpose) we might like to place the view title to right or to the center.

To have consistent looks across platforms we can ‘hard set’ the view title location by setting the navBar.alignTitle function of $ionicConfigProvider.

$ionicConfigProvider.navBar.alignTitle() takes 3 values
1. left
2. right
3. center

[youtube https://www.youtube.com/watch?v=Owc6x79OTK8]

YouTube Link: https://www.youtube.com/watch?v=Owc6x79OTK8 [Watch the Video In Full Screen.]

Quick fix to change position of each view:

< ion-view>
< ion-nav-title>
<center>Technotip</center>
< /ion-nav-title>
< ion-content>
< /ion-content>
< /ion-view>

As shown above, you could make use of our good old HTML friend center tag to align the nav title to center! or take some time to play with CSS to achieve the same.

Positioning The Tabs: IONIC APPS

Some components like tabs, titles behave according to the platform they are built for. For example, on iOS the default display of tabs is at the bottom and at top in android devices.

This might look like a minor thing at the beginning of app development, but when we want to place an ad or social sharing icons at the bottom, we might like to place the tabs at the top or visa-versa!

To have consistent looks across platforms we can ‘hard set’ the tabs location by setting the tabs.position function of $ionicConfigProvider.

$ionicConfigProvider.tabs.position() takes 2 values:
1. top
2. bottom

[youtube https://www.youtube.com/watch?v=tXW7Px7A3qo]

YouTube Link: https://www.youtube.com/watch?v=tXW7Px7A3qo [Watch the Video In Full Screen.]

To center the title of header you can make use of following syntax:

< ion-header-bar
  title="headerTitle"
  left-buttons="leftButtons"
  right-buttons="rightButtons"
  type="bar-positive"
  align-title="center">
< /ion-header-bar>

Getting Started With IONIC APP

Let us learn the basics of IONIC today. We know that IONIC 2 is already in its Beta, and is being received well by the developer community. But we do not want to leave behind people using ionic versions below 2.

What is IONIC?
Ionic is a beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
Web technologies like angular, HTML5, CSS.

Topics covered
1. Ionic commands.
2. Ionic templates – tabs, sidemenu, blank.
3. Ionic project folder structure.
4. Basic Dependency plugins.
5. Running our application in web browser.
6. Installing platform android to our project.
7. Building the application.
8. Running our application in android emulator.
9. Running our application in real mobile device.
10. USB debugging, Environment variable setting etc.

Software Versions used for the demo
1. Node: v4.2.6
2. Cordova: 6.0.0
3. Ionic: 1.7.14
4. android : Android 6.0 (API level 23)
5. OS: Demo showed on Windows 10 Operating System.

How to get android sdk installation details on Windows using command prompt?
1. Go to Run, open command prompt by typing cmd
2. Type this command android list targets
And you’ll get the list of all the installation and their basic details.

“ionic info” command

C:\technotip\myApp1>ionic info
 
Your system information:
 
Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v4.2.6

Let’s start with the project

[youtube https://www.youtube.com/watch?v=0YQipkK_hi0]

YouTube Link: https://www.youtube.com/watch?v=0YQipkK_hi0 [Watch the Video In Full Screen.]

Software Installation
1. Install Node.js if you have not already.
2. Install cordova and ionic globally using the following command.

npm install -g cordova ionic

This will take some time to install cordova and ionic. To know more about npm(Node Package Manager), check External Module( NPM ) Install, Update, Remove: Node.js

Ionic Templates
There are 3 pre-designed templates ionic gives us to start the project
1. sidemenu
2. tabs
3. blank

For this tutorial I’ll be demonstrating using tabs template. All the explanation shown in the video applies to other templates too.

Start Project with tabs template

ionic start app_name tabs

All ionic commands start with the keyword ionic. Let us call our application as myApp1, so the command will be

c:/>cd technotip
c:/technotip>ionic start myApp1 tabs

Similarly, for sidemenu

ionic start myApp1 sidemenu

for blank

ionic start myApp1 blank

Downloading the project files
Once we run ionic start myApp1 tabs command, all the necessary files will be downloaded to our project folder(myApp1 folder) from ionic official git repository. Know that it’ll take some time to download these files – depending on your internet connection speed.

Once the files are downloaded, we need to get inside our project folder to execute ionic commands ..

c:/>cd technotip
c:/technotip>cd myApp1
c:/technotip/myApp1>

File structure

plugins folder has plugins on which our project depends on, for some services.
www folder has all our files – like, templates, js files, css files and ionic library files
config.xml file is an important file and we’ll cover it in detail in another video tutorial

android sdk / android studio
Download android studio from Google Developer Site and install it without fail.

(I’m demonstrating for android platform, for iOS, use MAC and replace android keyword with ios in below ionic commands.)

Run the project
1. on browser using the command

ionic serve

use -l option to get additional log information + to launch ionic labs

ionic serve -l

You can enable chrome inspector and check how your app would look inside various devices. Use CTRL+SHIFT+i to open chrome inspector. Then use CTRL+SHIFT+M to open the device view mode.

2. add platform android

ionic platform add android

cordova platform add android

3. Build the project

ionic build android

4. on emulator

ionic emulate android

emulator would take a lot of time to start and display your application. And usually it’s very slow to operate. Simply know this option but never use it for real serious development. For development purpose make sure to check the app using real device.

5. on real mobile device

ionic run android

use -l option to get additional log details + to launch ionic labs

ionic run android -l

Nexus USB Debugging
Connect your mobile phone(preferably nexus device) using USB cable. Turn on ‘Developer’ option and usb debugging option in your phone.
settings – Developer options ( enable it ) – ( scroll down ) – USB debugging ( enable it).

Environment variables
Note: I’m using Windows 10 operating system.

ANDROID_HOME=C:\Users\user_name\AppData\Local\Android\android-sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_45

Check the file paths of the environment variable and change the path depending on the versions installed.

..other commands
1. Get plugin list

cordova plugin list

2. to exit ionic server

CTRL + C

3. whitelist plugin
Whitelist plugin gets installed by default when you create an ionic application. After that insert this piece of code inside head tag of index.html

     <meta http-equiv="Content-Security-Policy" 
           content="default-src *; style-src 'self' 'unsafe-inline'; 
           script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

Troubleshoot
Let us know what problems you’re facing and we’ll try our best to solve it for you ..please give us proper log information, so that we can understand the problem.

Sharing Is Caring ..
Please share this article with your friends/colleagues on your social profile ..thanks
Hope it helps

IONIC APP – Open External Links In Mobile Browser

Ionic apps are developed with angular code, so people start using ng-href to point to URLs which has {{}} variables whose value will be dynamically loaded. With ng-href IONIC treats the links like internal links and hence opens them within the application itself. To solve this, we make use of onclick and window.open() methods.

Note: Am using Windows 7 to illustrate this tutorial.

ionic

In this tutorial I’ll show you the exact code you need to do this effectively: To open the external URL in mobiles browser.

Step 1: You need node.js installed on your computer.
Step 2: Install cordova and ionic

npm install ionic -g

npm install cordova -g

Step 3: Install inappbrowser plugin

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

cordova plugin add org.apache.cordova.inappbrowser

Step 4: Insert the code in your view (html files)

<a class="button button-assertive" 
   ng-href="http:// url .com/{{id}}/discount"
   onclick='window.open(this.href, "_system", "location=yes"); return false;'>
</a>

This way, the variables in the ng-href interpolates and then is being inserted as first parameter to window.open() method.

IONIC APP – Open External Links In Mobile Browser

[youtube https://www.youtube.com/watch?v=tqbmsOn_n1E]

YouTube Link: https://www.youtube.com/watch?v=tqbmsOn_n1E [Watch the Video In Full Screen.]

Loads in the system browser: window.open(‘http://example.com’, ‘_system’);
Loads in the InAppBrowser: window.open(‘http://example.com’, ‘_blank’);
Loads in the InAppBrowser with no location bar: window.open(‘http://example.com’, ‘_blank’, ‘location=no’);
Loads in the Cordova web view: window.open(‘http://example.com’, ‘_self’);