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.
- 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@betaAs of the RC release, you can install Ionic 2 like this:
npm install -g ionicIf 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.
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.
The guidance for adding third-party libraries (like lodash) to your project has changed slightly. Here are the steps:
npm install lodash --savenpm install @types/lodash --save-devImport 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent