Building an Angular 1.x Ionic Application

52 minutes

Ionic allows you to build cross platform native applications using Angular. In this course we will convert the Eggly AngularJS application into an Ionic mobile application.

pro-course-rss-logo

PRO RSS Feed

Build and Run an Ionic App from Scratch

Convert a Web Application into an Ionic App

P

Build, Emulate, and Debug an Ionic App

P

Device Interaction in an Ionic App with Cordova Plugins

P

Prepare an Ionic App for Ionic Components and Styling

P

Build a Sidebar Layout with Ionic

P

Build a Powerful List with Ionic

P

Create Modals with Ionic

P

Convert a UI Route into an Angular Directive

P
angularjs tutorial about Build and Run an Ionic App from Scratch

Build and Run an Ionic App from Scratch

1:49 angularjs

In this lesson, we learn how to install Ionic and Cordova. We then build an app from scratch using the Ionic CLI and a blank starter template.

angularjs tutorial about Convert a Web Application into an Ionic App

Convert a Web Application into an Ionic App

2:24 angularjs PRO

In this lesson, we are going to demonstrate how easy it is to copy existing Angular code into an Ionic app. It is literally as simple as removing unnecessary code from the Ionic app and pasting in the guts of our Angular application. Along the way, we will update some dependencies and discover a gotcha for including assets from a CDN.

angularjs tutorial about Build, Emulate, and Debug an Ionic App

Build, Emulate, and Debug an Ionic App

2:53 angularjs PRO

In this lesson, we are going to build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

angularjs tutorial about Device Interaction in an Ionic App with Cordova Plugins

Device Interaction in an Ionic App with Cordova Plugins

4:59 angularjs PRO

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.

  • item
  • item
angularjs tutorial about Prepare an Ionic App for Ionic Components and Styling

Prepare an Ionic App for Ionic Components and Styling

2:12 angularjs PRO

In this lesson, we are going to include the necessary assets for the functionality and styles of the Ionic directives we will include in our app.

angularjs tutorial about Build a Sidebar Layout with Ionic

Build a Sidebar Layout with Ionic

8:49 angularjs PRO

In this lesson, we learn how to build a sidebar layout using only Ionic directives. Ionic provides some powerful functionality with very few semantics. Here are all the directives we will learn about:
- ion-side-menus - A container element for side menu(s) and the main visible content.
- ion-side-menu-content - A container for the main visible content, sibling to one or more ionSideMenu directives.
- ion-side-menu - A container for a side menu, sibling to an ionSideMenuContent directive.
- ion-nav-view - Used to render templates in your application. Each template
is part of a state. States are usually mapped to a url, and are defined programatically
using angular-ui-router (see their docs for reference).
- ion-view - A container for view content and any navigational and header bar information. Used as a child of ionNavView.
- ion-nav-bar - If we have an ionNavView directive, we can also create an
ionNavBar, which will create a topbar that updates as the application state changes.
- ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar
from within an ionView.
- ion-content- Provides an easy to use content area that can be configured
to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
- ion-list - The List is a widely used interface element in almost any mobile app, and can include
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- ion-item - Used to create items inside of an ionList.

angularjs tutorial about Build a Powerful List with Ionic

Build a Powerful List with Ionic

12:38 angularjs PRO

In this lesson, we are going to dig into Ionic lists and make use of some awesome list features that Ionic gives us for free. We are going to learn how to use the following Ionic directives:

  • ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar.
  • ion-list - The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
  • ion-item- Used to create items inside of an ionList.
  • ion-delete-button - A child of ionItem, this element allows a developer to show/hide a delete button within an ionItem with ease.
  • ion-reorder-button - A child of ionItem, this element allows a developer to reorder an ionItem within a list easily.
angularjs tutorial about Create Modals with Ionic

Create Modals with Ionic

14:11 angularjs PRO

In this lesson, we learn how to build modals in Ionic. We use the ion-modal-view directive to wrap our “create” and “edit” forms with modal goodness, as well as use the ion-header-bar directive to put a nice bar at the top of our forms. Finally, we use the $ionicModal service to give life to our modals by integrating them with our controllers.

angularjs tutorial about Convert a UI Route into an Angular Directive

Convert a UI Route into an Angular Directive

2:49 angularjs PRO

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

Presented by:

Lukas Ruebbelke

Lukas Ruebbelke is a technology enthusiast and author of AngularJS in Action for Manning Publications. His favorite thing to do is get people as excited about new technology as he is. He is the co-organizer of the Arizona Software Community user group and host of multiple developer events in the Phoenix metro area.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?