Ionic Framework 101: A Quickstart to Building Mobile Apps

Name: Ionic Framework 101: A Quickstart to Building Mobile Apps
Rating: 4.3 (52 reviews)

A quickstart to learning how to make great looking Android and iOS apps in no time using Ionic Framework.

Created byNic Raboy

Last updated 9/2015

English

What you'll learn

Build Android and iOS applications
Know how to use Ionic Framework for mobile application development

Course content

8 sections • 29 lectures • 2h 41m total length

Introduction1:50
Students will know more about the instructor and his background on developing mobile Android and iOS applications with Ionic Framework.
What is Ionic Framework?3:55
Students will learn about what Ionic Framework is and how it relates to other technologies like Apache Cordova or PhoneGap.
What are we Going to Accomplish in this Course?3:03
Students will learn how to start an Ionic Framework project from scratch and further develop it into a feature-rich mobile application. By the end of the course students will have developed a URL shortening application that uses the free TinyURL RESTful API.
Ionic and our Expectations

Installing Ionic Framework and its Dependencies5:28
Students will learn how to install Ionic Framework and all the dependencies necessary for building applications. Such dependencies include Apache Cordova and the Node Package Manager (NPM).
Installing the Android SDK14:03
Students will download the latest Android SDK as well as any related platform tools necessary for building Android applications.
Creating a New Ionic Project3:58
Students learn how to create a new Ionic Framework project from one of the existing templates using a Terminal or Command Prompt.
Getting Started with a New App

An Overview of the Ionic Framework Available Components4:29
Students will be knowledgeable about what Ionic Framework components exist beyond the scope of this course and how to get information about them.
A Closer Look at the List View Component4:29
Students will learn how to add list items to the Ionic Framework list view component.
Add Swipe Gestures To List View Items4:02
Students will learn how to make list items swipe-able in an Ionic Framework list view component.
Using IonIcons in Your Application2:28
Students will learn how to use the IonIcons font package provided by Ionic Framework to add icons to their project that closely resemble those in standard Android and iOS applications.

Adding AngularJS Controllers for Separating Logic5:42
Students will learn how to design AngularJS controllers to better meet the needs for logic in their Ionic Framework application.
Looping Through Objects and Arrays in the UI7:26
Students will learn how to take JavaScript object or array and loop through the data via the UI portion of their application, displaying each element on the screen.
Navigating to Different Views Using the UI-Router10:13
Students will learn how to add multiple views (screens) to their application and navigate between them in an appropriate fashion.
Understanding $q and the AngularJS Promise5:09
Students will learn how to asynchronously perform tasks and return data based on their success.
Performing RESTful Requests with the $http Service6:21
Students will learn how to make GET and POST HTTP requests to available RESTful APIs.

Manage Data Easier with the ngStorage JavaScript Library7:27
Students will learn that most JavaScript libraries can be included into an Ionic Framework mobile application. For example, students will see how to include the ngStorage JavaScript library into their project for easier management of their local storage data.
Launching External Web Pages with the Apache Cordova InAppBrowser Plugin5:13
Not all data can or should be accessed via an API. Students will learn how to launch the device web browser to view websites external to the application.
Use ngCordova to Wrap Apache Cordova Plugins in AngularJS6:02
Not all Apache Cordova plugins are easy to use with Ionic Framework because they are vanilla JavaScript. Students will learn about how ngCordova makes various Apache Cordova plugins more AngularJS friendly.
Added Functionality with External Plugins

Understanding the TinyURL API2:15
Students will learn how to use the minimalistic TinyURL RESTful API for shortening URLs that can be distributed on social media websites such as Twitter and Facebook.
Creating the URL List View5:48
The URLs we shrink need to be displayed somewhere. Students will take their knowledge of the Ionic Framework list view and put it to use.
Creating a View for Shrinking URLs7:09
Students will learn how to create a basic form with data that gets sent to a function upon submit.
Shrink URLs Defined by the User7:02
Students will know how to take their knowledge on $http RESTful requests and apply it towards a real API. In this case, students will learn how to shrink URLs with the TinyURL API.
Storing Information About the Long and Short URL Data6:50
Students will learn how store API data to prevent having to continuously make requests that use cellular data or use up API request quotas.
Launching Saved URLs in the Web Browser5:35
Students will learn how to validate saved website URLs and then launch them in the device web browser.
Deleting Saved URLs from the List4:24
Students will learn how to make use of the swipe-able list items to implement delete functionality for removing particular URLs from the list.
Building a URL Shortener App

Building the Application for Android and iOS2:51
Students will learn how to take their project and build a version of it for Android as well as iOS (provided they are using a Mac).
Testing the Application Using the Genymotion Android Simulator and iOS Simulator6:27
Students will learn how to simulate the Android version of their application in a simulator superior to what ships with the Android SDK. Students will also learn how to test their application in an iOS simulator.
Debugging the Android Application with ADB7:59
Students will learn how to check for bugs or troubleshoot in the Android version of their Ionic Framework mobile application.
Building, Testing, and Troubleshooting an Ionic Application

Requirements

Must have the free to download Atom editor by GitHub installed for writing application code
Must have a Macintosh computer to build iOS applications as Linux and Windows can only build Android applications
A Macintosh computer is NOT required to participate in this course

Description

This course will teach you how to develop web-hybrid mobile applications for Android and iOS using Ionic Framework. We'll look at what is necessary to configure Ionic Framework on your Windows, Linux or Macintosh computer and develop visually pleasing applications with minimal amounts of code and design skills necessary.

Ionic Framework 101 is designed to be a quickstart for beginners looking to develop mobile applications. As a course goal, we'll create a fully functional URL shortener using the skills we developed through the span of the course.

Who this course is for:

This Ionic Framework course is meant for people with at least some knowledge of HTML5 and JavaScript
This course is NOT meant for people looking to develop Windows Phone or BlackBerry applications

Ionic Framework 101: A Quickstart to Building Mobile Apps

What you'll learn

Explore related topics

Course content

Course Introduction3 lectures • 9min

Getting Started3 lectures • 23min

Available Components & CSS4 lectures • 15min

Functionality with AngularJS5 lectures • 35min

Including Functionality Through External Plugins3 lectures • 19min

Building a URL Shortener App7 lectures • 39min

Preparing the Final Product for Release3 lectures • 17min

Course Conclusion1 lecture • 4min

Requirements

Description

Who this course is for: