This course is (slightly) out of date.
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.
- Installation
- Project Structure
- Buttons
- Theme Colors
- Lifecycle Events
- Incorporating Third-Party Libraries - lodash
- Custom CSS
- Storage
- SQLite
- Mapping
- Miscellaneous
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.
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.
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 {}
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.
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.
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.
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';
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.
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.
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.
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.
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.