All India

Ionic Framework Q&A

Which of the following statement is not true about the IONIC framework? –  It is built on top of Cascading, Scalding, C++ and  nodeJS

Many components in Ionic purposely have both padding and margin reset set to zero. Developers can easily control padding and margins throughout the app.

The padding utility classes add a default 10px between the outer box of the element and its inner content.

Other utility classes like padding-vertical, padding-top, padding-right, … can be used as needed.

Which of the following tags display a button with rounded corners? Both

<div class=”bar bar-header bar-positive”>

  <button class=”button icon ion-navicon”>
</button>
  <h1 class=”title”>Awesome Music App   </h1>
</div>

<div class="bar bar-footer bar-calm">
    <button class="button icon ion-share">
     Share with Friends  
     </button>
     <button class="button icon ion-gear-a">
Settings  
    </button>
</div>
<div class = "tabs tabs-icon-top tabs-assertive">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
Home
   </a> 
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
       Favorites
   </a>
</div>



<div class = "row">
    <div class = "col">row1 col1</div>
</div>
<div class = "row">
    <div class = "col col-75">row2 col1</div>
    <div class = "col">row2 col 2</div>
 </div>
Responsive Grid

Responsive classes can be used to turn each column in a row into its own row at certain breakpoints. This is useful when columns do not fit well in the available area.

Classes for defining when the columns should break into stack of rows:

.responsive-sm – Smaller than landscape phone

.responsive-md – Smaller than portrait tablet

.responsive-lg – Smaller than landscape tablet

Example:

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Which CSS component is ideal for creating top navigation for a mobile app? – Tabs

Cards can contain ____. All

Components in iconic by default have both padding of 0 or 5 pixels – 10 pixels is wrong

Adding which of the following classes to the content, makes space for the header. –

Which of the following is a slide-up pane that lets the user choose from a set of options? – Action Sheet

Which of the following directives can help in using Ionic custom Scroll View, or the built in overflow scrolling of the browse?  Content

Which of the following directives can be used to enable the “pull to refresh” functionality?  refresher

Testing an Ionic App in a Browser

Start the local development server by navigating to the project directory and running the command below in the CLI.

> ionic serve

If connected to a network, you can choose to host the app

  • In a port in your IP
  • In your local host

Hosting the app in IP, allows users to test from other devices by invoking the server IP address with the port.

Once the command is executed, it will automatically open the app in the browser.

Benefits of Ionic Serve:

  • Useful for testing on desktop and device browsers
  • Starts Live Reload of app for file changes, helping monitor changes in the file system.
Running App in Emulator

Open the terminal/windows explorer.

Go inside the TestApp directory and type the emulator command to launch the app.

Once the app is launched, click on different tabs to see if the app is working perfectly.

>ionic emulate ios
OR
>ionic emulate android

Note: Optionally, device name can be provided in this command. If not provided, it will automatically open the app in the latest device iOS/Android Device.

In Ionic CLI, which of the follow commands can be used to automatically monitor changes in the file system? Ionic serve

CLI is an extension of _________.  Node

What is the command for running an app in IOS emulator? ionic emulate ios

CLI is based on _____. Ionic (Wrong)

Ionic Resources

Ionic Resources is a really cool tool for automatically generating all the splash screens and icons for your apps.

Save icons, splashscreens to resources folder of Ionic Project, add platform and run the resource tool using:

ionic resources

This single command, resizes and crops all images to accommodate different screen sizes and saves them to resources/android or resources/ios folders.

Ionic View makes it easy to share your Ionic apps with other developers in the organization and testers around the world, without complicated Beta provisioning.

Ionic Framework is light and performant, with most essential components and mobile UI paradigms. If you are looking for anything beyond this, Ionic Market is the place you need to go.

Ionic Market facilitates an open exchange of Ionic starter apps, themes, and plugins to jumpstart app development.

Ionic Creator is a Rapid Mobile App Builder with simple draganddrop components, that can help any one to build an App at jet speed.

Going beyond prototying, you can add your own code, export clean, standards compliant Ionic projects, and even iOS and Android builds ready to submit to the App Stores.

A collection of over 70 native AngularJS extensions on top of the Cordova API that makesit easy to build, test, and deploy Cordova mobile apps with AngularJS.

ngCordova offers plugins for features like:

  • Camera
  • Touch ID
  • Authorization
  • Push Notification
  • Geolocation
  • Progress Indicator

Which of the following can be used for Rapid Prototyping? – ionic Creator

Which tool can be used to create icons and splash screens for all supported devices? Ionic resources

Leave a Reply