Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Ionic Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
Ionic Cookbook

Ionic Cookbook - Third Edition

By : Singh
4.3 (10)
close
close
Ionic Cookbook

Ionic Cookbook

4.3 (10)
By: 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)
close
close

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.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Ionic Cookbook
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon