Ionic 2 Course

This course is (slightly) out of date.

The latest version of the code (for 3.13.2 release) can be downloaded at this link here.

This repository contains all the information you need to get your code up-to-date.

The course was built using the final beta for Ionic 2. There were a few key changes when Ionic 2 released the first RC which are documented here. All of the code for the course runs fine if you are using that final beta. The required tweaks are documented below for RC and beyond. Also, Pluralsight Plus subscribers can download a complete code sample of the course which has been updated for the latest Ionic 2 release.

Table of Contents

1. Installation
2. Project Structure
3. Buttons
4. Theme Colors
5. Lifecycle Events
6. Incorporating Third-Party Libraries - lodash
7. Custom CSS
8. Storage
9. SQLite
10. Mapping
11. Miscellaneous

Installation

In the course, Ionic 2 was installed with:

npm install -g ionic@beta

As of the RC release, you can install Ionic 2 like this:

npm install -g ionic

If there is any doubt, see the Installing Ionic section of the Ionic 2 docs.

Project Structure

As of the RC release, the project structure is slightly different than what you'll see in the course. With @NgModule being introduced, the top level folder for your source code is now called src instead of app. All of the files related to the root app component (in conjunction with NgModule) are now stored in of sub-folder of src called app. The assets directory has also been moved into src as a sub-directory.

Important Note on NgModule:

Now that the RC release uses NgModule, each new page you create must be added the declarations and entryComponents properties in the app.module.ts file. For example:

@NgModule({
  declarations: [
    MyApp,
    GamePage,
    MapPage,
    MyTeamsPage,
    StandingsPage,
    TeamDetailPage,
    TeamHomePage,
    TeamsPage,
    TournamentsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    GamePage,
    MapPage,
    MyTeamsPage,
    StandingsPage,
    TeamDetailPage,
    TeamHomePage,
    TeamsPage,
    TournamentsPage
  ],
  providers: []
})
export class AppModule {}

Buttons

Previously (as you see in the course), we could just refer to a button like this:

<button>Test</button>

Now we need to use ion-button attribute like this:

<button ion-button>Test</button>

The icon-only attribute is also required for "icon only" buttons.

Also, Floating Action Buttons (FAB) are now a distinct element. See FABs section of docs for details.

See New Behavior of Button section in Ionic 2 RC change log for more info.

Theme Colors

Previously we could add theme colors like "primary" adding the attribute directly like this:

<ion-tabs primary>

Now we use a color attribute. This makes dynamic scenarios easier.

<ion-tabs color="primary">

There are numerous components this applies to (e.g., buttons, badges, tabs, etc.).

See Component Colors in Ionic 2 RC0 change log for more info.

Lifecycle Events

A few Lifecycle Events were renamed. Mostly importantly, ionViewLoaded was renamed to ionViewDidLoad.

See Lifecycle Events Renamed section of Ionic 2 RC0 change log for more info.

Angular 2 HttpModule

Related to Angular 2 (not directly an Ionic change): In a previous version of Angular (i.e., the one used when recording the course), the import statement that was used was:

import { HTTP_PROVIDERS } from '@angular/http';

and specified in the list of providers.

This has been changed to:

import { HttpModule } from '@angular/http';

and specified in the list of imports.

Incorporate Lodash

The guidance for adding third-party libraries (like lodash) to your project has changed slightly. Here are the steps:

npm install lodash --save

npm install @types/lodash --save-dev

Import statement at top of files now now look like this:

import _ from 'lodash';

Custom CSS

For any components where you want custom styling, you should add a selector attribute to scope your CSS:

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

Also, you do not need to add an @import to the app.core.scss file any more.

See step #15 in the Steps to Upgrade section of the Ionic 2 RC change log.

Storage

In the RC release, storage was moved out of the core Ionic framework into a separate library called @ionic/storage. For the most part, the concepts are the same. The code samples in the course downloads have been updated for its usage.

Basic usage is shown in the Storage section of the Ionic 2 RC change log.

SQLite

The SqlStorage component was removed between the final Ionic 2 beta and the Ionic 2 RC release. Please see the sql-storage directory for an example of how the implement the user-settings.service.ts (shown in the course) using the Ionic Native SQLite plugin directly.

Mapping

Incorporating Angular 2 Google Maps (AGM) into an Ionic 2 app has changed slightly since the Ionic beta. Please see this blog post on how to incorporate AGM into the latest version of Ionic 2.

Additionally, here is a Github repository with the full working code just for Ionic 2 and AGM.

Miscellaneous

Item Divider

Side note: there is a bug in the RC release where the color attribute applied to an <ion-item-divider> doens't work. This issue has been identified and is being address by the Ionic team in issue #8376.