Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Getting Started with Ionic
Getting Started with Ionic

Getting Started with Ionic: Get up and running with developing effective Hybrid Mobile Apps with Ionic

eBook
€13.98 €19.99
Paperback
€24.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Getting Started with Ionic

Chapter 2. Setting up the Environment the Right Way

In this chapter we will learn how to set up our development environment and build a dummy app to verify the correct setup. This chapter also defines the possible and popular issues faced during setup so that you do not face any bottlenecks during the process. The instructions are separated for Windows OS, generic Linux OS, and Mac OS.

As we have discussed, Ionic has evolved into an ecosystem from a basic framework. It is very important that we set up our development tools the right way to leverage the full potential of this ecosystem.

We will be setting up a lot of software just for developing Mobile Apps, but if we want to use the power of developing for multiple platform apps using a single codebase, we have to do this. Any Native App is always built using the Native Development tools and hence we have to install and set up a Native Mobile development environment for all the platforms.

Apart from the build tools of native environments...

Setting up Native Mobile development environments

Native Mobile development environments are specific to your operating system and hence there will be separate instructions for installing on Windows/Mac/Linux. The native environment SDKs are heavy so would require fast Internet speed to download. You need to be on a good network to be able to download it.

For iOS

These days iOS Apps are built for iPhone, iPad and iWatch devices. Objective-C is the primary language used to develop iOS Native Apps. Xcode is Apple's IDE (integrated development environment), which includes a graphical user interface and many other features. iOS SDK is required along with Xcode as it provides additional tools, compilers, and frameworks to build iOS Apps for phones, tablets, and smartwear devices (iWatch).

Note

For developing or building iOS Apps, a Macintosh machine is strictly required so if you do not have a Mac, please skip this section. Mac machines should have OS X 10.9.4 or later.

In order to download...

Ionic development environment

Ionic Framework is based on Apache Cordova, which takes care of build and plugin management. Apache Cordova CLI uses the NodeJS package manager called NPM for dependency management.

Installing NodeJS

NodeJS is a JavaScript-based server-side environment to build backend systems. NodeJS has an efficient package manager that takes care of installing and maintaining a central repository of packages, version management, and dependency management. NPM has become the default dependency manager for a lot of other frameworks apart from NodeJS. Ionic Framework also leveraged this successful package manager so we have to install it for Hybrid App development.

In order to install NodeJS, download the binary for the respective OS—Windows, Linux, or Mac OS from https://nodejs.org/download/.

On a Mac or Linux, you can use a package manager such as brew to install NodeJS:

$ brew install node

After the node installation is complete, please type in the following commands to...

Basic Ionic CLI commands

Ionic commands help you smoothly create a new project and test it easily while you are developing it. The first command you should learn to execute is the ionic info command. This would help you to know all about your system environment that you have set up so far. If there are any errors, you can debug and resolve them before beginning the development.

The command and a sample output is given here:

$ ionic info
Your system information:
OS: Mac OS X Yosemite
Node Version: v0.12.4
Cordova CLI: 5.1.1
Ionic CLI Version: 1.6.2
Xcode version: Xcode 6.4 Build version 6E35b
ios-sim version: 3.1.1
ios-deploy version: 1.7.0

Another quick utility command is to go to the Ionic docs for a specific topic:

$ ionic docs <TOPIC>

Please go through the commands in this section in order to understand the steps required to build a dummy app to test the environment.

The next command to learn is to start a new project. Ionic has multiple flags/options along with this command to set...

Building a dummy app

After successfully setting up the environment correctly, you must be excited to build your first app. In this section of the chapter, we will use the commands to learn how to create a sample Ionic-based Hybrid App and build it to run on an actual device or emulator:

  1. We will create the initial project using the Ionic start command and name our project MyFirstApp. The output will be as illustrated in the following screenshot:
    Building a dummy app
  2. After the successful creation of your project with the default Ionic template, go to your project folder using the command $ cd MyFirstApp.

    Now, as we are in an Ionic project folder, we can run Ionic project-specific CLI commands. Any platform can be added to the project to build the specific app:

    $ ionic platform add android
    

    We will add an Android platform as it will work on all machines, such as Windows, Linux, or Mac. Ionic will download Android-specific default resources such as icons and splash screens, and also add some important plugins by default...

Popular issues faced and solutions

The development environment set up for Ionic Hybrid App development is a lengthy and cumbersome process. It is evident that you may face some issues in installing and setting up all these systems. This section mentions the most common and popular issues faced along with their solutions so that you do not get stuck somewhere:

  • Permission issue [Mac or Linux]: A lot of the time, the user you are logged in as does not have permission to alter files and directories while creating projects. This problem can occur in npm install commands and Ionic start commands.
    • Solution: Use a sudo keyword before any command to run in privileged mode.
  • Unable to find npm global modules: If you have installed a global npm package using -g flag but are unable to use it, you may need to add the npm directory to your path in order to invoke globally installed modules.
    • Solution: Add the npm directory location to your path. On Windows, npm can usually be found at C:\Users\username\AppData...

Setting up Native Mobile development environments


Native Mobile development environments are specific to your operating system and hence there will be separate instructions for installing on Windows/Mac/Linux. The native environment SDKs are heavy so would require fast Internet speed to download. You need to be on a good network to be able to download it.

For iOS

These days iOS Apps are built for iPhone, iPad and iWatch devices. Objective-C is the primary language used to develop iOS Native Apps. Xcode is Apple's IDE (integrated development environment), which includes a graphical user interface and many other features. iOS SDK is required along with Xcode as it provides additional tools, compilers, and frameworks to build iOS Apps for phones, tablets, and smartwear devices (iWatch).

Note

For developing or building iOS Apps, a Macintosh machine is strictly required so if you do not have a Mac, please skip this section. Mac machines should have OS X 10.9.4 or later.

In order to download the latest...

Ionic development environment


Ionic Framework is based on Apache Cordova, which takes care of build and plugin management. Apache Cordova CLI uses the NodeJS package manager called NPM for dependency management.

Installing NodeJS

NodeJS is a JavaScript-based server-side environment to build backend systems. NodeJS has an efficient package manager that takes care of installing and maintaining a central repository of packages, version management, and dependency management. NPM has become the default dependency manager for a lot of other frameworks apart from NodeJS. Ionic Framework also leveraged this successful package manager so we have to install it for Hybrid App development.

In order to install NodeJS, download the binary for the respective OS—Windows, Linux, or Mac OS from https://nodejs.org/download/.

On a Mac or Linux, you can use a package manager such as brew to install NodeJS:

$ brew install node

After the node installation is complete, please type in the following commands to test...

Basic Ionic CLI commands


Ionic commands help you smoothly create a new project and test it easily while you are developing it. The first command you should learn to execute is the ionic info command. This would help you to know all about your system environment that you have set up so far. If there are any errors, you can debug and resolve them before beginning the development.

The command and a sample output is given here:

$ ionic info
Your system information:
OS: Mac OS X Yosemite
Node Version: v0.12.4
Cordova CLI: 5.1.1
Ionic CLI Version: 1.6.2
Xcode version: Xcode 6.4 Build version 6E35b
ios-sim version: 3.1.1
ios-deploy version: 1.7.0

Another quick utility command is to go to the Ionic docs for a specific topic:

$ ionic docs <TOPIC>

Please go through the commands in this section in order to understand the steps required to build a dummy app to test the environment.

The next command to learn is to start a new project. Ionic has multiple flags/options along with this command to set...

Left arrow icon Right arrow icon

Key benefits

  • 1. Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS
  • 2. Build mobile applications with a native UI and interactions with device APIs using popular web technologies such as HTML, CSS, and JavaScript
  • 3. Create an e-commerce mobile app using tutorials and code samples

Description

Hybrid Apps are a promising choice in mobile app development to achieve cost effectiveness and rapid development. However, they were not preferred over native apps until few years back due to a poor performance and bad user experience, but everything has changed with the release of Ionic. It has evolved as the most popular choice for Hybrid Mobile App development as it tends to match the native experience and provides robust components/tools to build apps. Getting Started with Ionic equips any web developer with the basic knowledge needed to use modern web technologies to build amazing hybrid mobile apps using Ionic. This fast-paced, practical book explains all the important concepts of AngularJS and Cordova Framework required to develop apps, then gives you a brief introduction to hybrid mobile applications. It will guide you through setting up the environment to develop mobile apps, and through the multiple options and features available in Ionic so you can use them in your mobile apps. Features such as the Side Menu, Tabs, Touch Interactions, and native features such as Bar Code, Camera, and Geolocations are all covered.. Finally, we’ll show you how to use Cordova plugins and publish your apps.

Who is this book for?

This book is ideal for any web developer who wants to enter into the world of mobile app development but has no clue where to start. Ionic is an ideal starting point and provides a smooth learning curve to help you build hybrid apps using web technologies and to develop native apps for iOS and Android, you do not need to know multiple languages. This book will also be useful for Hybrid App developers who have not found the perfect framework to ensure users get a rich experience from your apps.

What you will learn

  • 1. Get to know about Hybrid Apps and AngularJS
  • 2. Set up a development environment to build Hybrid Apps
  • 3. Navigate around the components and routing in Ionic
  • 4. Use different Ionic directives for a mobile-specific experience
  • 5. Integrate an Ionic App with backend web services
  • 6. Work with plugins to include native functionality in your hybrid apps
  • 7. Test your apps on real devices
  • 8. Build an e-commerce app for iOS and Android from scratch

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jan 18, 2016
Length: 168 pages
Edition : 1st
Language : English
ISBN-13 : 9781784399948
Vendor :
Drifty
Category :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Jan 18, 2016
Length: 168 pages
Edition : 1st
Language : English
ISBN-13 : 9781784399948
Vendor :
Drifty
Category :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 98.97
Getting Started with Ionic
€24.99
Learning Ionic
€36.99
Ionic Cookbook
€36.99
Total 98.97 Stars icon

Table of Contents

10 Chapters
1. All About Hybrid Mobile Apps and Ionic Framework Chevron down icon Chevron up icon
2. Setting up the Environment the Right Way Chevron down icon Chevron up icon
3. Start Building Your First Ionic App Chevron down icon Chevron up icon
4. Navigation and Routing in an Ionic App Chevron down icon Chevron up icon
5. Accessorizing Your App with Ionic Components Chevron down icon Chevron up icon
6. Integrating App with Backend Services Chevron down icon Chevron up icon
7. Testing App on Real Devices Chevron down icon Chevron up icon
8. Working with Cordova Plugins – ngCordova Chevron down icon Chevron up icon
9. Future of Ionic Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Rahul Khanna Feb 11, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book has all it needs for a web developer to learn about Hybrid Mobile Apps, AngularJS and Ionic Framework to start building engaging mobile apps.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.