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.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 rc.4)
  • Professional Module Architecture (15+ 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 (30+ 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
  • WordPress REST API Version 2 Integration https://wordpress.org/plugins/rest-api/ (Wordpress Module)
    • 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
  • 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 or Playlist Id (Youtube Module)
    • Angular 2 Trusting safe values (IFrame source) by injecting Dom Sanitizer
  • Ionic 2 Storage
    • Favorite implementation with Set/Get/Remove/Clear from Storage (part of the Wordpress module)
  • Ionic 2 Native
    • InAppBrowser
    • Social Sharing
    • Barcode Scanner
  • 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 (15+ 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(); });

WordPress REST API Version 2

Ionic 2 App comes with WordPress REST API Version 2 Integration (/wp-json/wp/v2) https://wordpress.org/plugins/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 Login / JWT Authentication for WP REST API

The 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.



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 with Username or Playlist Id

Ionic 2 App comes with full Youtube Videos integration. 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 youtubeResults = 50; }

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

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 #Build Android $ ionic platform add android $ ionic build android #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.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