CodeCanyon

Ionic 2 App - Angular 2 + Ionic 2 + i18n Full App

Ionic 2 App - Angular 2 + Ionic 2 + i18n Full App


What’s new in version 1.8.0:
Split Pane component integration. Nav-inception integration. Added Wordpress Menus nested navigation support to the side content. Set/Get Facebook Logged-in User to Ionic Storage. Events publish-subscribe style event system integration. Ionic 2 Framework update to 2.3.0. Ionic Native 3.x update (installation only of the active plugins). Ionic 2 app-scripts update to 1.1.4 and ionic-storage to 2.0.0. Several fixes/improvements.
What’s new in version 1.7.0:
Youtube Channels integration with Youtube Channel and Channel Video Components. Order Youtube Videos by date. Ionic 2 Framework update to 2.1.0. Ionic 2 app-scripts update to 1.1.3.
What’s new in version 1.6.0:
Charts integration, New Charts Module and Component (Bar, Line, Radar, Polar, Pie, Bubble, Doughnut, Mixed Charts). Ionic Native Email Composer integration, New Contact Form with Email Composer. Ionic 2 Framework update to 2.0.1 and app-scripts update to 1.1.0. New Tutorial: How to add a Wordpress Menu <id> to the App Sidebar Menu.
What’s new in version 1.5.0:
Wordpress Menus support (WP API Menus integration). Unlimited Menu Levels support. New Wordpress Menus, Wordpress Menu and Wordpress Menu Item Components in the Wordpress Module. In App navigation from Wordpress Menus to Categories, Posts and Pages.
What’s new in version 1.4.0:
Ionic 2 Framework update to 2.0.0
What’s new in version 1.3.0:
New Facebook Connect Module. Facebook Login/Logout. Access to the Facebook Graph API. Ionic 2 Framework update to 2.0.0-rc.5. Ionic 2 app-scripts update to 1.0.0.
What’s new in version 1.2.0:
Wordpress Login / JWT Authentication for WordPress REST API Version 2. New Wordpress Home Component (modern design). New Login Module/Component.
What’s new in version 1.1.0:
WordPress REST API Version 2 Pages integration. RTL Support Documentation.

Features

  • Angular 2 + Ionic 2 + Typescript + i18n Full App (Latest Ionic v2.0.0)
  • Announcing Ionic 2.0.0 Final http://blog.ionic.io/announcing-ionic-2-0-0-final/
  • Professional Module Architecture (20+ Modules) – Module-based Architecture Ionic 2 App as each App Page is a Module (@ngModule). Architecture is following the official Angular 2 Modularity patterns (AppModule, CoreModule, SharedModule, Feature Modules) https://angular.io/docs/ts/latest/guide/ngmodule.html
  • Component declarations/exports in Modules (35+ Components)
  • Placeholder Module as a basis for your new App Modules
  • Multiple Languages (i18n) – An implementation of Angular 2 translate (ng2-translate) with unlimited languages support (global translate pipe support)
    • Introducing a custom Translate Loader for Ionic 2
  • UI Language Switcher – Change the Ionic 2 App Language through the Settings Component (Settings Module)
  • Angular 2 HTTP Requests with Observables
  • Split Pane component integration
  • Nav-inception integration
  • WordPress REST API Version 2 (or WordPress >= 4.7 core REST API) integration https://wordpress.org/plugins/rest-api/ (with Wordpress >=4.7 you don’t need to install the plugin as this is coming in the core)
    • Wordpress Login / JWT Authentication for WP REST API
    • Wordpress Posts
    • Wordpress Favorite Posts (Ionic Storage)
    • Wordpress Post
      • Wordpress Post Preview (Ionic 2 Native InAppBrowser)
      • Wordpress Post Social Share (Ionic 2 Native Social Share)
    • Wordpress Post Comments
    • Wordpress Categories
    • Wordpress Search (Searchbar: ion-searchbar)
    • Wordpress Feature Media (Component)
    • Wordpress Pages
    • Wordpress Menus Support based on the WP API Menus
    • Nav-inception – Wordpress Menus nested navigation support to the side content
  • Facebook Connect (Facebook Connect Module)
    • Facebook Login/Logout
    • Access to the Facebook Graph API
  • Charts (Charts Module)
  • Google Maps (Google Maps Module)
  • Unlimited RSS Feeds with the extra support/feature of Categorized Feeds (Feeds Module)
    • Get Unlimited Atom, RSS, or Media RSS Feeds, Micro Formats and more using the Yahoo Query Language (YQL)
    • Define all your Feed Categories and Feed Sources just by editing a JSON file (assets/data/json/feeds.json)
  • Youtube Videos with Username, Playlist Id or Channel Id (Youtube Module)
    • Angular 2 Trusting safe values (IFrame source) by injecting Dom Sanitizer
  • Contact Form with Email Composer
  • Ionic 2 Storage
    • Favorite implementation with Set/Get/Remove/Clear from Storage (part of the Wordpress module)
  • Ionic Native 3.x
    • @ionic-native/barcode-scanner
    • @ionic-native/core
    • @ionic-native/email-composer
    • @ionic-native/facebook
    • @ionic-native/in-app-browser
    • @ionic-native/social-sharing
    • @ionic-native/splash-screen
    • @ionic-native/status-bar
  • Barcode Scanner
    • This plugin provides cross-platform BarcodeScanner for Cordova / PhoneGap. The following barcode types are currently supported from the plugin: Android: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, PDF417, RSS_EXPANDED – iOS: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, ITF
  • Ionic Components implementations
    • Navigation, Menu, List, Searchbar, Loading Controller, Toast Controller, Infinite Scroll, Item Options, Storage, Datetime, Slides, Tabs
  • Side-menu navigation support – Menu is a side-menu navigation that can be dragged out or toggled to show. The content of a menu will be hidden when the menu is closed.

Ionic 2 + Angular 2 Modules (20+ modules)

Angular 2 + Ionic 2 Modules help organize an application into cohesive blocks of functionality.

An Angular Module is a class adorned with the @NgModule decorator function. @NgModule takes a metadata object that tells Angular how to compile and run module code. It identifies the module’s own components, directives and pipes, making some of them public so external components can use them.

Modules: IonicModule, SharedModule, HomeModule, TabsModule, GoogleMapsModule, WordpressModule, SlidesModule, GridModule, SettingsModule, FeedsModule, YoutubeModule, AboutModule, ContactModule, DatetimeModule, RangesModule, ActionSheetModule, BarcodeScannerModule, PlaceholderModule

Multiple Languages (i18n)

Ionic 2 App comes with Multi Languages support. Best practices and proven techniques are packed together so as to implement a real case scenario providing by default (English/German/French) a great implementation for the Internationalization of your App.
You can translate your App to multiple languages in parallel. The Ionic 2 App comes by design with the en.json, de.json and fr.json files providing you a full translation mechanism.

RTL Support

Ionic 2 and therefore Ionic 2 App comes with RTL support. Just enable the RTL by placing the code this.platform.setDir('rtl', true) in the app.component.ts as you can see below.
this.platform.ready().then(() => { this.platform.setDir('rtl', true); StatusBar.styleDefault(); Splashscreen.hide(); });

Split Pane integration

SplitPane is a component that makes it possible to create multi-view layout. Similar to iPad apps, SplitPane allows UI elements, like Menus, to be displayed as the viewport increases.

If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again. This is especially useful when creating an app that will be served over a browser or deployed through the app store to phones and tablets.

WordPress REST API Version 2 ( or WordPress >= 4.7 core REST API)

Ionic 2 App comes with WordPress REST API Version 2 Integration (/wp-json/wp/v2) https://wordpress.org/plugins/rest-api/ (with Wordpress >=4.7 you don’t need to install the plugin as this is coming in the core):
  • Wordpress Posts
  • Wordpress Favorite Posts (Ionic Storage)
  • Wordpress Post
    • Wordpress Post Preview (Ionic 2 Native InAppBrowser)
    • Wordpress Post Social Share (Ionic 2 Native Social Share)
  • Wordpress Post Comments
  • Wordpress Categories
  • Wordpress Search (Searchbar: ion-searchbar)
  • Wordpress Feature Media (Component)
  • Wordpress Pages
  • Wordpress Menus Support based on the WP API Menus
  • Wordpress Menus nested navigation support to the side content


Wordpress Menus / WP API Menus

Ionic 2 App comes integrated with the WP API Menus https://wordpress.org/plugins/wp-api-menus/ through the Wordpress Menus Component, Wordpress Menu Component and Wordpress MenuItem Component in the Wordpress Module. You have all your Wordpress Menus available in your App with unlimited nested levels support. The WP API Menus extends the WP REST API with new routes pointing to WordPress menus.

Nav-inception integration – Wordpress Menus nested navigation support to the side content

With Ionic 2 App (>=1.8.0) you have the option to add Wordpress Menus nested navigation support to the side content. Please just edit the src/app/app.config.ts file that is located in the app directory and set the wordpressMenusNavigation = true.

Wordpress Login / JWT Authentication for WP REST API

Ionic 2 App (>=1.2.0) comes integrated with the JWT Authentication for WP REST API through the Wordpress Login Component in the Wordpress Module. The JWT Authentication extends the WP REST API using JSON Web Tokens Authentication as an authentication method.
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.



Facebook Login / Access to Graph API

Ionic 2 App comes with Facebook Login / Logout and with a full implementation (Facebook Connect Module / Facebook Connect Component) for accessing the Facebook Graph API.




Charts

Ionic 2 App comes with Charts integration (Chart.js) and it contains also the Charts module that declaring/exposing the Charts Component. You can find also implementations of the Bar, Doughnut, Line, Radar, Polar, Pie, Bubble, Mixed Chart types in the Charts Component.


Unlimited RSS Feeds (with extra support of Categorized Feeds)

Ionic 2 App implements a Feeds Module a based on the Yahoo Query Language (YQL). Yahoo Query Language (YQL) https://developer.yahoo.com/yql/ allows you to access atom, rss, micro formats and more. YQL is an alternative to Google Feed API https://developers.google.com/feed/ as this is officially deprecated.



Youtube Videos (Username, Playlist Id or Channel Id)

Ionic 2 App comes with full Youtube Videos integration based on Username, Playlist Id or Channel Id. Additionally you can share your videos through the Ionic Native Social Sharing. All the Youtube configuration is exposed to the main App Configuration app.config.ts:
export class Config { public youtubeKey = 'AIzaSyClMa-MaKro_m95tb--4LaAorl-NmGPJxc'; public youtubeApiUrl = 'https://www.googleapis.com/youtube/v3/'; public youtubeUsername = 'ColdplayVEVO'; public youtubeChannelId = 'UCRrW0ddrbFnJCbyZqHHv4KQ'; public youtubeResults = 50; }

Contact Form with Email Composer

Ionic 2 App comes with a new Contact Form under the Contact Module/Component. In addition, it comes integrated with the Ionic Native Email Composer in order to send directly this Email. The email recipient (Email To) could be configured to the main App Configuration src/app/app.config.ts.


Google Maps

Ionic 2 App comes with Google Maps integration and it contains also the Google Maps module declaring/exposing Angular 2 components for Google Maps. Please you just need to define your Google Map key into the google-maps/google-maps.module.ts module. The Google Map key should be created here https://developers.google.com/maps/documentation/javascript/get-api-key

Ionic 2 App Tutorials

Installation

#Install Ionic 2 $ npm install -g ionic@latest #Browse the App $ cd ioni2app #Install package.json dependencies $ npm install #Install Cordova/PhoneGap plugins (cordovaPlugins pakage.json branch dependencies) $ ionic state restore #Test your app on multiple screen sizes and platform types by starting a local development server $ ionic serve or $ ionic serve --lab #Build iOS $ ionic platform add ios $ ionic build ios --prod #Build Android $ ionic platform add android $ ionic build android --prod #Deploying/Running on emulator $ ionic run android --prod

Ionic View

You have always the option to try the Ionic 2 App by downloading the Ionic View (http://view.ionic.io/). Then, use the following App Id to fetch a preview of the app: 52d9a6a0

APK

Download Android APK

Ionic 2 + Angular 2 + Typescript UAC: Useful Articles Collection

https://docs.google.com/document/d/1DGka2qg5bacJw_jgVvsXDo-2g7AW0ffjjxNUtGlcEqM

Releases

Ionic 2 App 1.8.0
- Split Pane component integration
- Nav-inception integration
- Added Wordpress Menus nested navigation support to the side content
- Set/Get Facebook Loggedin User to Ionic Storage
- Events publish-subscribe style event system integration
- Ionic 2 Framework update to 2.3.0
- Ionic Native 3.x update (installation only of the active plugins)
- Ionic 2 app-scripts update to 1.1.4 and ionic-storage to 2.0.0
- Several fixes/improvements
Ionic 2 App 1.7.0
- Youtube Channels integration with Youtube Channel and Channel Video Components
- Order Youtube Videos by date
- Ionic 2 Framework update to 2.1.0
- Ionic 2 app-scripts update to 1.1.3
Ionic 2 App 1.6.0
- Charts integration, New Charts Module and Charts Component (Bar, Line, Radar, Polar, Pie, Bubble, Doughnut, Mixed Charts)
- Ionic Native Email Composer integration, New Contact Form with Email Composer
- Ionic 2 Framework update to 2.0.1
- Ionic 2 app-scripts update to 1.1.0
- New Ionic 2 App Tutorial: How to add a Wordpress Menu <id> to the App Sidebar Menu
Ionic 2 App 1.5.0
- Wordpress Menus support (WP API Menus integration)
- Unlimited Menu levels support
- New Wordpress Menus, Wordpress Menu and Wordpress Menu Item Components in the Wordpress Module
- In App navigation from Wordpress Menus to Categories, Posts and Pages 
Ionic 2 App 1.4.0
- Ionic 2 Framework update to 2.0.0
Ionic 2 App 1.3.0
- New Facebook Connect Module
- Facebook Login/Logout
- Access to the Facebook Graph API
- Ionic 2 Framework update to 2.0.0-rc.5
- Ionic 2 app-scripts update to 1.0.0
Ionic 2 App 1.2.0
- Wordpress Login / JWT Authentication for WordPress REST API Version 2.
- New Wordpress Home Component (modern design).
- New Login Module/Component.
Ionic 2 App 1.1.0
- WordPress REST API Version 2 Pages integration
Ionic 2 App 1.0.0
- Initial release
by
by
by
by
by
by