book

Mobile App Development with Ionic 2, 1st Edition

by Chris Griffith

April 2017

Intermediate to advanced

292 pages

6h 27m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who Should Read This BookNavigating This BookOnline ResourcesConventions Used in This BookUsing Code ExamplesO’Reilly SafariAcknowledgments
What Is the Ionic Framework?What’s New in Ionic 2?Comparing Mobile SolutionsNative Mobile ApplicationsMobile Web ApplicationsHybrid Mobile ApplicationsUnderstanding the Ionic StackIonic FrameworkAngularCordovaPrerequisites for Ionic Application DevelopmentSummary
Installing the Ionic FrameworkInstalling Node.jsInstalling GitInstalling the Apache Cordova CLIInstalling Ionic CLIStarting a New Ionic ProjectIonic Project Folder StructurePlatform Tools InstallationsiOSAndroidWindows UniversalSetting EmulatorsiOSAndroidSetting Up Your DevicesiOSAndroidAdding Mobile PlatformsPreviewing on EmulatorPreviewing on DeviceSummary
Define Your Build PlatformsManaging Cordova PluginsIonic GeneratorPreviewing Your ApplicationThe Ionic lab CommandSpecifying an IP Address to UseEmulating Your Ionic AppEmulating iOS DevicesEmulating Android DevicesRunning Ionic App on a DeviceLoggingCLI informationSummary
Why Angular 2?ComponentsInputsTemplatesEventsPipes@ViewChildUnderstanding ES6 and TypeScriptVariablesClassesPromisesObservablesTemplate StringsArrow FunctionsTypesSpecial TypesTyping Functions:voidSummary
The History of Cordova (aka PhoneGap)Apache Cordova versus Adobe PhoneGapA Deep Dive into CordovaConfiguring Your Cordova AppDevice Access (aka Plugins)Interface Components: The Missing PieceWhy Not Cordova?Understanding Web StandardsSummary
HTML StructureIonic ComponentsUnderstanding the SCSS FileUnderstanding TypeScriptSummary
Adding our PlatformsPreviewing Our Ionic2Do AppUnderstanding the index.html FileExploring the app DirectoryUpdating the Page StructureAdding Full-Swipe GestureSimple ThemingProper TypingSaving DataCreating a FireBase accountInstalling Firebase and AngularFire2Ionic Build SystemAdding AngularFire to Our app.module.ts FileUsing Firebase DataUsing Ionic NativeSummary
Bootstrapping Our AppLoading Data via the HTTP ServiceDisplay our DataExtending parklist.tsGenerating New PagesUnderstanding the Ionic 2 Navigation modelPassing Data Between PagesUpdating the Park Details PageAdd a Google MapAdding Additional TypingsAdding Our Content Security PolicyAdjust the CSS to support the Google MapRendering the Google MapAdd Map MarkersMaking the Markers ClickableAdding SearchTheming Our ApplicationVirtual ScrollingCustom List HeadersSummary

Getting StartedExploring the Side Menu TemplateExploring the app.component.ts FileSide Menu OptionsDisplaying the MenuConverting the TemplateMocking Up Our Weather ProviderLaying Out the Weather DataLoading Feedback: Loading Dialogs and Pull to RefreshAdding GeoLocationAccessing Live Weather DataConnecting the Geolocation and Weather ProvidersGetting Other Locations’ WeatherPull to Refresh: Part 2Editing the LocationsDeleting a CityAdding a CityUsing a Geocoding ServiceDynamically Updating the Side MenuIonic EventsObservablesStyling the AppAdd a Weather IconNext StepsSummary
Dealing with CORS IssuesDebugging through an iOS or Android SimulatorAndroidDebugging On-DeviceAndroidiOSDebugging Ionic InitializationAdditional ToolsSummary
Adjusting the config.xml FileApp Icons and Splash ScreensBuilding Your Android APKGenerating the Signing KeySubmitting to the Google Play StoreBuilding Your iOS AppRequest a Distribution CertificateCreate a Distribution Provisioning ProfileCreating the App ListingBuilding the App for ProductionCreating an Archive of the ApplicationUsing TestFlight Beta TestingReleasing to the App StoreSummary
Setting Up Ionic CloudGenerating Your Ionic App IDConfiguring Your ApplicationIonic DeploySetting Up Ionic DeployTesting Ionic DeploySecurity ProfilesCreating a ProfileiOS SetupSupporting iOS Push NotificationsAndroid SetupAndroid Push NotificationsIonic PackagePreparing a Release BuildGetting Build InformationGetting Your Build ResultsDownloading Your BuildUpdating Your Cordova PluginsIonic ViewSupported Plugins Uploading Your AppViewing Your AppIonic CreatorSummary
But What, Exactly, Is a Progressive Web App?The manifest.json FileService WorkersPush NotificationsWhat’s Next?
Components You Should Know AboutSlidesDate-TimePopoverReorder ListDeepLinkerStorageNext StepsIonic ForumsIonic Worldwide Slack ChannelGitHubConclusion
Create a New Ionic 2 ApplicationCreate Your Page StructureUpdate the ThemingReplacing Your Controllers and ViewsReplace Your Factories/ServicesConvert the Application InitializationUpdate the RoutingSwitching to Ionic NativeConclusion
Essential PropertiesPreferencesCommon General PreferencesCommon iOS PreferencesCommon Android PreferencesCommon Windows PreferencesIconsAndroidiOSWindowsSplashscreensAndroidiOSWindowsPluginsFeaturesReference

Content preview from Mobile App Development with Ionic 2, 1st Edition

Chapter 4. Just Enough Angular and TypeScript

With our basic system configured for Ionic development, we can explore another set of foundational technology that Ionic is built atop, Angular. Just as Ionic leverages Apache Cordova to act as the bridge to the native mobile platform, it uses Angular as the underpinnings of its interface layer. Since the beginning, the Ionic Framework has been built on the Angular framework.

Why Angular 2?

Angular 2 is the next version of Google’s incredibly popular MV* framework. This new version of Angular was announced at the ngEurope conference in October 2014. The Angular team revealed that this version of Angular would be a significant revision. In many ways, this new Angular was a completely new framework, sharing only its name and some notional references to the original version. This announcement certainly generated a lot of concern and uncertainty about the future of the framework. This was equally true with the Ionic community and within the Ionic team itself. What were the changes that would be required? How much relearning would existing Ionic developers need to undertake to continue to work with Angular?

But as the shock wore off, it became clearer that this evolution of the Angular framework was for the better. The framework was becoming faster, cleaner, more powerful, and also easier to understand. The Angular 2 team also took another bold gamble and looked at the web to come, not the web that was. So they decided to embrace many ...