Book Image

Ionic Cookbook - Third Edition

By : Indermohan Singh
Book Image

Ionic Cookbook - Third Edition

By: Indermohan Singh

Overview of this book

Ionic is the preferred choice for JavaScript developers to develop real-time hybrid applications. This book will get you started with Ionic 3.9 and help you create Angular 5 components that interact with templates. You will work with Ionic components and find out how to share data efficiently between them. You'll discover how to make the best use of the REST API to handle back-end services and then move on to animating your application to make it look pretty. You then learn to add in a local push notification in order to test the app. Then you'll work with Cordova to support native functionalities on both iOS and Android. From there, you'll get to grips with using the default themes for each platform and customizing your own. We then take you through the advanced Ionic features like lazy loading, deep linking, localizing ionic apps etc. Finally, you'll see how best to deploy your app to different platforms. This book will solve all your Ionic-related issues through dedicated recipes that will help you get the best out of Ionic.
Table of Contents (12 chapters)

Creating a HelloWorld app via Ionic Creator

Another way to start your app code base is to use Ionic Creator. This is a great interface builder to accelerate your app development with the drag and drop style. You can quickly take the existing components and position them to visualize how it should look in the app via a web-based interface. Most common components, such as buttons, images, and checkboxes are available.

Ionic Creator allows the user to export everything as a project with all .html, .css, and .js files. You should be able to edit content in the /app folder to build on top of the interface.

Getting ready

How to do it...

  1. Create a new project called myApp:
  1. Validate, to ensure that you see the following screen:
  1. The center area is your app interface. The left side gives you a list of pages. Each page is a single route. You also have access to a number of UI components that you would normally have to code by hand in an HTML file. The panel on the right shows the properties of any selected component.
  2. You're free to do whatever you need to do here by dropping components to the center screen. If you need to create a new page, you have to click on the Add Page in the Pages panel. Each page is represented as a link, which is basically a route in Angular UI-Router's definition. To navigate to another page (for example, after clicking a button), you can just change the link property and point to that page.
  3. There is an edit button on top, where you can toggle back and forth between the edit mode and preview mode. It's very useful to see how your app will look and behave.
  4. Once completed, click the export button at the top of the navigation bar. You have the following four options:
    • Use the Ionic CLI tool to get the code
    • Download the project as a ZIP file
    • Export it to native code (similar to PhoneGap Build), as shown:
    • Export it to the preview mode using the Creator app

The best way to learn Ionic Creator is to play with it.

There's more...

To switch to the preview mode, where you can see the UI in a device simulator, click on the switch button in the top right to enable Test, as illustrated:

In this mode, you should be able to interact with the components in the web browser as if they're actually deployed on the device.

If you break something, it's very simple to start a new project. It's a great tool to use for prototyping and to get the initial template or project scaffolding. You should continue coding in your regular IDE for the rest of the app. Ionic Creator doesn't do everything for you yet. For example, if you want to access specific Cordova plugin features, you have to write that code separately.

Also, if you want to tweak the interface outside of what is allowed within Ionic Creator, it will also require specific modifications to the .html and .css files.