35,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
This book is intended for those who want to learn how to build hybrid mobile applications using Ionic. It is also ideal for people who want to explore theming for Ionic apps. Prior knowledge of AngularJS is essential to complete this book successfully.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 321
Veröffentlichungsjahr: 2015
Ähnliche
Table of Contents
Learning Ionic
Learning Ionic
Copyright © 2015 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: July 2015
Production reference: 1220715
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-260-3
www.packtpub.com
Credits
Author
Arvind Ravulavaru
Reviewers
Bramus Van Damme
Ian Pridham
Indermohan Singh
Commissioning Editor
Dipika Gaonkar
Acquisition Editor
Vivek Anantharaman
Content Development Editor
Merwyn D'souza
Technical Editor
Shashank Desai
Copy Editors
Stephen Copestake
Relin Hedly
Project Coordinator
Nikhil Nair
Proofreader
Safis Editing
Indexer
Monica Ajmera Mehta
Graphics
Disha Haria
Production Coordinator
Arvindkumar Gupta
Cover Work
Arvindkumar Gupta
Foreword
This book is the result of several months of dedicated work by Arvind Ravulavaru, a dedicated developer and writer, with whom I've had the pleasure of collaborating on several occasions. This book provides a great way to get started with Ionic and provides detailed examples from which even experienced developers can learn.
Arvind takes you through the process of installing everything you need to get started with Ionic. He also shows you how to set up native SDKs. Further, Arvind covers the basics of Ionic, such as Ionic's components, navigation using the UI-router, custom styles, and the APIs provided by Ionic. Thus, readers can build two apps: a bookstore app and a real-time chat application.
For experienced developers, the book explains how to enable native device APIs through Cordova's plugins. You'll learn how to use ngCordova (another project by the Ionic team) and Cordova plugins in an AngularJS syntax. In the chat application, you'll see how to connect to external databases, such as Firebase. You will also see how to keep your data in sync with all devices.
Prior to joining Ionic as a core team member and a developer advocate, I worked for another company, where I created many internal hybrid apps. After evaluating other frameworks, I chose Ionic because it offered the only complete solution for hybrid mobile development. Everything I needed to get going was provided by Ionic. Instead of focusing on how to architect my app, I could focus on just building the app.
Ionic offers a complete ecosystem for hybrid mobile app development, saves costs, and offers a high-performance, beautiful alternative to native development. We released the stable version of Ionic in May and then released alpha versions of three of our platform services this summer. We don't have any plans to slow down; our support for the open source Ionic SDK will always remain strong. At Ionic, I worked with experienced and new developers, traveled all over the world to teach newbies, and researched code with Ionic pros. I'm constantly impressed with how much people love the product and with what a dynamic and positive community we have.
You'll find this book to be a great introduction to Ionic. It will give you a chance to learn some more about the SDK. Thank you for being part of the Ionic community.
Enjoy!
Mike Hartington
Core Team Member, Ionic
About the Author
Arvind Ravulavaru is a full-stack consultant with over 6 years of experience in software development. For the last 2 years, he has been working extensively on JavaScript, both on the server side and the client side. Prior to that, Arvind worked on big data analytics, cloud provisioning, and orchestration. He has good exposure to various databases and has also developed and architected an application that was built using Java and ASP.NET.
A year and a half ago, Arvind started a blog titled The Jackal of JavaScript (http://thejackalofjavascript.com), where he writes about developing full-stack applications using JavaScript alone as the server-side and client-side programming language. He has written articles on various topics, such as DNA analysis, sentiment analysis with JavaScript, programming Raspberry Pi with JavaScript, and building a node-webkit and a WebRTC-based video chat client, to name a few.
Apart from this, Arvind provides training, empowering companies with the latest and greatest technology available in the market. He also conducts start up workshops, where he teaches rapid prototyping with today's amazing tool stack. Arvind also provides information on how to take ideas to the market in a very short span of time.
He always looks for ways to contribute to the open source community, making this world a better place for developers. As a consultant, Arvind always tries to power amazing business ideas with awesome technology solutions (language-agnostic), moving the human race up the evolution chain.
Arvind recently started his own company in Hyderabad, where he is building products in the Internet of Things space. The aim of the company is to build IoT products for the world at an affordable price so that everyone can enjoy technology that powers lives.
You can reach Arvind on his blog at http://thejackalofjavascript.com.
Arvind has also reviewed Data-oriented Development with AngularJS, Manoj Waikar, Packt Publishing.
Acknowledgments
First of all, I would like to thank Steve Jobs for being my inspiration and motivation throughout. Selling something that a person does not need at a fancy price is not an easy job. He has done this time and again, right from Mac books to Apple watches. R.I.P, Mr. Jobs.
I don't think a simple thank you would suffice in appreciating what my family has done for me, especially my mother. They have always been there for me through good and bad times, sharing my happiness and encouraging me whenever I was down. I could not have made it so far without their help and support.
I would like to send out a special thank you to Nicholas Gault and Andrew Nuss for all the learning, support, and encouragement that they have provided me so far.
I would like to thank Udaykanth Rapeti for preaching me these golden words: "create a digital presence if you want to really succeed" and for always being there for me. A special thanks to Karthik Naidu, Pavan Musti, and the gang I worked with at Deloitte. The times could not have been better!
I would like to thank Ali Baig, the self-proclaimed yoda, for all the advice and ideas he keeps sharing with me. Keep them coming! A big shout out to the fresher batch at Accenture and the Cactus gang. I cherish each moment I spent with you guys, learning, playing, and rocking! Go Cactus, go!
I would like to take a moment to thank my first love. You have taught me a lot of things and made me a better person. Our breakup was one of the motivations to keep myself busy in technology, which definitely added to where I am today. Thank you so much for everything.
Writing nine chapters and an appendix is a humongous task. Imagine editing and reviewing the same. My sincere thanks to Merwyn D'souza, the content development editor of the book, and the reviewers, Bramus Van Damme, Ian Pridham, and Indermohan Singh. This book is in a lot better shape because of you guys. I am honored to have worked with Shashank Desai, the technical editor of this book. I am very happy that this is his last book before he moves on as a project manager. Congrats! Also, thanks to Nikhil Nair and everyone from the Packt Publishing team for making this possible.
A special shout out to Hemal Desai for finding me and getting me on board to write this book. This book wouldn't have happened without her.
A big thumbs up to my blog readers. You guys rock!
Last but not least, my respect to the Robin Hoods of the developer community, who develop and share free code!
About the Reviewers
Bramus Van Damme is a web enthusiast from Belgium and has been interested in "all things web" ever since he, as a kid, discovered the Internet back in 1997.
Professionally, after having worked as a web developer for several years at several web agencies, he became a lecturer of web technologies at a technical university in Belgium. Apart from teaching basic HTML, CSS, and JavaScript to students, Bramus also taught them how to write proper SQL statements. As a lecturer, he was also responsible for authoring and maintaining the server-side web scripting (PHP) and web and mobile development specialty courses.
Having worked in the education space for 7 years, he moved on to become a part of the team at Small Town Heroes (Ghent, Belgium) to build groundbreaking solutions and make watching TV more interactive than ever.
Bramus also freelances using the 3RDS moniker (https://www.bram.us/2014/03/26/on-web-development-and-education/). On a regular basis, he can be found attending and speaking at web meetups and conferences. Seeing a nice piece of optimized and secure code can put a smile on his face.
In his spare time, he likes to goof around with web-related technologies, keep his blog (https://www.bram.us/) up to date, and go scuba diving. Being a scout, he has grown to become quite a mapping aficionado. Combined with his technical knowledge, this has led to him to review Google Maps JavaScript API Cookbook, Packt Publishing.
He lives in Vinkt (Belgium) with his son, Finn, and his daughter, Tila. He prefers cats over dogs.
Ian Pridham is a freelance full-stack developer with over 15 years of experience. He is based in London. Ian created the electric vehicle charge point API for the Department of Transport (a government client) and developed the site for SB.TV, the UK's leading online youth broadcaster (a consumer client). This site was featured on Google Chrome's television advertisements. Ian provides consultancy and development services to start-ups with AngularJS/Ionic to rapidly bring ideas to the market. He works as a CTO at OpenPlay, an activity marketplace platform.
Indermohan Singh is an Ionic developer and a passionate budding entrepreneur, running a mobile app development studio in the beautiful city of Ludhiana. He is the founder of Ragakosh, the Indian classical music learning app. Indermohan blogs at http://inders.in and hosts the AngularJS Ludhiana meetup. He is also the developer of Ionic plugins for Sublime Text and Atom Editor. When he is not in front of his laptop, you can find him singing with his tanpura.
I am thankful to my family—my father, mother, and brother for giving me full support during the reviewing process. I also want to thank God for giving me the strength and education that helped me review this wonderful book.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why Subscribe?
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Thanks to Mike Hartington for taking time from his busy schedule, reviewing the book, and providing valuable insights on Ionic.
Knowing is different and doing is different.
Preface
Build mobile hybrid applications with ease using Ionic. Be it simple apps that integrate REST API endpoints or complicated apps that involve native features, Ionic provides a simple API to work with them.
With a basic knowledge of HTML, CSS, and a decent knowledge of AngularJS, one can easily convert a million-dollar idea into an app with a few lines of code.
In this book, we will explore how you can do this.
What this book covers
Chapter 1, Ionic – Powered by AngularJS, introduces you to the power of AngularJS. This is why it is considered a good framework for a hybrid framework, such as Ionic.
Chapter 2, Welcome to Ionic, talks about the Mobile Hybrid framework: Cordova. It shows how Ionic fits into the bigger picture. This chapter also shows you how to install the required software for the development of the Ionic framework.
Chapter 3, Ionic CSS Components and Navigation, tells you how to use Ionic as a CSS framework for your mobile web applications. This chapter also talks about how to integrate Ionic CSS only components with AngularJS, apart from routing in Ionic apps.
Chapter 4, Ionic and SCSS, explores how to theme Ionic apps with the help of built-in SCSS support.
Chapter 5, Ionic Directives and Services, provides information on how to use Ionic's built-in directives and services, which helps to quickly bring your application to life.
Chapter 6, Building a Bookstore App, deals with how you can leverage the knowledge you have gained so far in building an Ionic client for a secured REST API. This chapter walks you through the itsy-bitsy pieces that are needed to develop Ionic apps that will simply consume REST API endpoints.
Chapter 7, Cordova and ngCordova, talks about how you can easily integrate device features, such as camera and Bluetooth, with the help of Cordova and ngCordova in your Ionic apps.
Chapter 8, Building a Messaging App, shows you how you can use all the knowledge that you have gained so far to build a messaging app, where users can register, log in, and chat with each other and share pictures and locations.
Chapter 9, Releasing the Ionic App, focuses on how to generate installers for the apps that you have built with Cordova and Ionic using the Ionic CLI and the PhoneGap build.
Appendix, Additional Topics and Tips, discusses how to efficiently use the Ionic CLI and Ionic cloud services to build, deploy, and manage your Ionic applications.
What you need for this book
To start building Ionic apps, you need to have a basic knowledge of HTML, CSS, JavaScript, and AngularJS. A good knowledge of mobile application development, device native features, and Cordova is preferred.
You will need Node.js, Cordova CLI, and Ionic CLI installed to work with Ionic. If you are planning to add theming support and other third-party libraries, you will need Git and Bower. If you want to work with device features, such as camera or Bluetooth, you need to have their mobile OS set up on your machine.
Who this book is for
This book is intended for those who want to learn how to build hybrid mobile applications using Ionic. It is also ideal for people who want to work with theming Ionic apps, integrating with the REST API, and learning more about device features, such as camera or Bluetooth, using ngCordova.
Prior knowledge of AngularJS is essential to complete this book successfully.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "It wraps setTimeInterval() and returns a promise when you register this service."
A block of code is set as follows:
Any command-line input or output is written as follows:
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "In the popup, you will notice that the Login button uses the positive class for styling."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you. You can access the code, raise issues, chat with the author, and clear your queries at GitHub (https://github.com/learning-ionic).
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: http://www.packtpub.com/sites/default/files/downloads/2603OS_ColoredImages.pdf
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
AngularJS directives
Quoting from the AngularJS documentation.
"At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children."
This is a very useful feature when you want to abstract out the common functionality on your web page. This is similar to what AngularJS has done with its directives, such as the following ones:
Referring to the Search App, which we built earlier, imagine that there are multiple pages in your web application that need this search form. The expected end result is pretty much the same across all pages.
So, instead of replicating the controller and the HTML template where needed, we would abstract this functionality into a custom directive.
You can initialize a new directive on a DOM element by referring to it using an attribute notation, such as <div my-search></div>, or you can create your own tag/element, such as <my-search></my-search>.
This would enable us to write the search functionality only once but use it many times. AngularJS takes care of initializing the directive when it comes into view and destroying the directive when it goes away from the view. Pretty nifty, right?
We will update our Search App by creating a new custom directive called my-search. The sole functionality of this directive would be to render a textbox and a button. When the user clicks on the Search button, we will fetch the results and display them below the search form.
So, let's get started.
As with any AngularJS component, the directives are also bound to a module. In our case, we already have a searchApp module. We will bind a new directive to this module:
The directive is named mySearch in camel case. AngularJS will take care of matching this directive with my-search when used in HTML. We will set a sample text to the template property. We will restrict the directive to be used as an element (E).
Note
Other values that you can restrict in an AngularJS directive are A (attribute), C (class), and M (comment). You can also allow the directive to use all four (ACEM) formats.
