Ionic 2 Mobile App using Angular 2 and TypeScript Tutorial
Wall Script
Wall Script
Tuesday, January 17, 2017

Ionic 2 Mobile App using Angular 2 and TypeScript Tutorial

Ionic is an open-source front-end SDK framework made for building hybrid mobile apps on cross platforms. Ionic is used for developing hybrid mobile apps using web technologies like HTML 5, CSS, Cordova and Sass, it is made of AngularJS 2. Both ionic and AngularJS provides some pre- built in components, which allows us to easily develop mobile apps. Here is the demo for creating mobile app using AngularJS and typescript on ionic V2 framework. The demo used here is my 9lessons.info blog as a mobile app. Follow this tutorial to easily build mobile app.

Ionic Angular 2 typscript tutorial





This Ionic application will explain you, how to parse your blog feed.

Install NodeJS
You need node.js to create a development server, download and install the latest version.

Installing Ionic and Cordova
You will find these instructions in Ionic Framework installation document..
$ npm install -g cordova ionic

$ ionic start --v2 YourAppName tabs

$ cd YourAppName

$ npm install

$ ionic serve

Open your web browser and launch your application at http://localhost:8100.


Now open your project folder with code editors like Atom, Visual Code etc. You will find the following file structure, now we are going work with src folder.


Create New Pages
Now I am going to create two new different pages called Feed and News, go to project folder scr->pages and create folder with empty files in following way


feed.ts
Feed component this is the controller class for displaying blog feed, here imported angular core component and ionic nav controller for page navigations.
import { Component } from '@angular/core';
import { NavControllerfrom 'ionic-angular';

@Component({
selector: 'page-feed',
templateUrl: 'feed.html'
})
export class FeedPage {

constructor(public navCtrl: NavController) {

}

}

feed.html
Ionic standard component tags, you find more about this in Ionic component documentation
<ion-header>
  <ion-navbar>
    <ion-title>Feed Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Feed Content Part</h2>
</ion-content>

Create the same for news.ts and news.html and modify class name and templateUrl.


Modify Tab Controls
Connect news modules to tab controller src->pages->tabs

tabs.ts
import { Componentfrom '@angular/core';
import { HomePagefrom '../home/home';
import { AboutPagefrom '../about/about';
import { ContactPagefrom '../contact/contact';

@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
constructor() {

}
}

to

tabs.ts
Imported FeedPage and NewsPage components.
import { Componentfrom '@angular/core';
import { FeedPagefrom '../feed/feed';
import { NewsPagefrom '../news/news';
import { AboutPagefrom '../about/about';

@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Rootany = FeedPage;
tab2Rootany = NewsPage;
tab3Rootany = AboutPage;
constructor() {

}
}

Go to Ionic icons document, choose your icons.

tabs.html
Replace tabIcon values with new icon names.
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="about"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

to

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Feed" tabIcon="egg"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="News" tabIcon="paper"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="About" tabIcon="contact"></ion-tab>
</ion-tabs>

app.module.ts
You have to import newly created component in app module, go to
src->app->app.module.ts and modify in following way.
import { NgModule, ErrorHandlerfrom '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandlerfrom 'ionic-angular';
import { MyAppfrom './app.component';
import { AboutPagefrom '../pages/about/about';
import { NewsPagefrom '../pages/news/news';
import { FeedPagefrom '../pages/feed/feed';
import { TabsPagefrom '../pages/tabs/tabs';

@NgModule({
declarations: [
  MyApp,
  AboutPage,
  NewsPage,
  FeedPage,
  TabsPage
],
imports: [
  IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
   MyApp,
  AboutPage,
  NewsPage,
  FeedPage,
  TabsPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Now you will find the new changes




Blog Feed API
My blog is powered by Google blogger. If you launch this following URL, you will find feed API data in JSON format.

http://www.9lessons.info/feeds/posts/default/-/php?max-results=10&alt=json

Note: If you are a Google blogger user, replace www.9lessons.info with your blogspot address.


No Access Control Allow Origin
If you access Google URLs from application, you will get following XMLHttpRequest No 'Access-Control-Allow-Origin' error.
Access Control Error

PHP Blog Feed
CURL access to allow X-Frame-Options using .htaccess.

index.php
Code contains PHP curl functionality to access JSON data.
<?php
if($_GET['category'] && $_GET['limit']){
$category = $_GET['category'];
$limit = $_GET['limit'];
$url ="http://www.9lessons.info/feeds/posts/default/-/".$tag."?max-results=".$limit."&alt=json";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_TIMEOUT, 12);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$result = curl_exec($ch);
curl_close ($ch);
echo $result;
}
?>

.htaccess
Apache configuration file.
RewriteEngine On

Header always unset X-Frame-Options

RewriteRule ^([a-zA-Z0-9_%-]+)$ index.php?category=$1
RewriteRule ^([a-zA-Z0-9_%-]+)/$ index.php? category =$1

RewriteRule ^([a-zA-Z0-9_-]+)/([0-9]+)$ index.php?category =$1&limit=$2
RewriteRule ^([a-zA-Z0-9_-]+)/([0-9]+)/$ index.php?category =$1&limit=$2


Create a feed HTTP Ajax service
Create a services folder in scr->app



feed.service.ts
This is an angular Injectable component with RxJS and HTTP, you can import this where ever you want to access HTTP request.
import { Injectablefrom "@angular/core";
import { Httpfrom '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class FeedService {
http: any;
feedURL: String;

constructor(http: Http) {
this.http = http;
this.feedURL = 'http://demos.9lessons.info/blogfeed/';
}

getPosts(category, limit) {
return this.http.get(this.feedURL + category + '/' + limit).map(res => res.json());
}
}

I have hosted the phpblogfeed project at demos.9lessons.info, you can access 9lessons.info JSON data at http://demos.9lessons.info/blogfeed/php/10

JSON

app.component.ts
Now modify application main component file and include FeedService in component providers.
import { Componentfrom '@angular/core';
import { Platformfrom 'ionic-angular';
import { StatusBar, Splashscreenfrom 'ionic-native';
import { FeedServicefrom './services/feed.service';
import { TabsPagefrom '../pages/tabs/tabs';

@Component({
templateUrl: 'app.html',
providers: [FeedService]
})
export class MyApp {
rootPage = TabsPage;

constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}


Using Feed Service
Importing FeedService component into feed page.

feed.ts
Go to src/pages/feed/feed.ts and import FeedService and access getPosts function by passing category and limit values. Service response assigning to articles variable.
import { Componentfrom '@angular/core';
import { NavControllerfrom 'ionic-angular';
import { FeedServicefrom '../../app/services/feed.service';

@Component({
  selector: 'page-feed',
  templateUrl: 'feed.html'
})
export class FeedPage {
  articles: any;
  categoryany;
  limitany;
  constructor(public navCtrl: NavController, private feedService: FeedService) {

  }

  ngOnInit() {
    this.getPosts('php', 10);
  }

  getPosts(category,limit){
     this.feedService.getPosts(category, limit).subscribe(response => {
      console.log(response.responseData.feed.entries); // Blog Data
      this.articles = response.responseData.feed.entries;
    })
  }

}

ngOnInit function triggers on page load, here I am setting default category and limit values and calling this.getPosts('php', 10)

feed.html
Rendering response data to the HTML template, using angular *ngFor parsing the JSON data.
<ion-header>
  <ion-navbar>
    <ion-title>Feed Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Feed Page</h2>
  <div *ngFor="let article of articles">
  <div>{{article.title.$t}}</div>
  </div>
</ion-content>


feed.html
Applying ionic card template
<ion-card *ngFor="let article of articles">
    <ion-item class="item-text-wrap">
      <h2 class="wrap">{{article.title}}</h2>
    </ion-item>

    <ion-card-content>
      <p  [innerHTML]="article.content.$t">
      </p>
      <div class="date">{{article.published.$t | date}}</div>
    </ion-card-content>
<--- Tags HTML --- >
 <ion-row>
   <ion-col>
      <a class="tag" *ngFor="let tag of article.category" >
       {{tag.term}}
      </a>
   </ion-col>
  </ion-row>
</ion-card>



Blogger feed contains HTML tags data, need to filter first image banner and 50 words from feed content.

helper.service.ts
Create a helper injectable component, here getImage() function filtering the first image banner using regular expression. The function getContentSnippet() split the first 50 words.
import { Injectablefrom "@angular/core";
@Injectable()
export class Helper {
    constructor() {
    }

    getImage(content) {
        var myRegexp = new RegExp(/<img.*?src="(.*?)"/);
        var match = myRegexp.exec(content);
        if (match){
            return match[1];
         }
    }

  getContentSnippet(str) {
        return str.split(/\s+/).slice(0, 50).join(" ")+"...";
    }

}

app.component.ts
Update application main component providers lists with new Helper service.
import { Componentfrom '@angular/core';
import { Platformfrom 'ionic-angular';
import { StatusBar, Splashscreenfrom 'ionic-native';
import { FeedServicefrom './services/feed.service';
import { Helperfrom './services/helper.service';
import { TabsPagefrom '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html',
    providers: [FeedService, Helper]
})
export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

feed.html
Final Feed.html
<ion-header>
  <ion-navbar>
    <ion-title>Feed Page</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-card *ngFor="let article of articles">
    <ion-item class="item-text-wrap">
      <h2 class="wrap">{{article.title}}</h2>
    </ion-item>
<img src="{{getImage(article.content)}}" *ngIf="getImage(article.content)">
    <ion-card-content>
      <p [innerHTML]="getContentSnippet(article.content.$t)">
      </p>
      <div class="date">{{article.publishedDate | date}}</div>
    </ion-card-content>
<--- Tags HTML --- >
 <ion-row>
   <ion-col>
      <a class="tag" *ngFor="let tag of article.categories" >
       {{tag.term}}
      </a>
   </ion-col>
  </ion-row>
</ion-card>
</ion-content>

Part One Result


Final Demo Code

Part Two will soon on my next tutorial.
web notification

16 comments:

  1. will you integrate it with mongodb?

    ReplyDelete
  2. Replies
    1. Visual Code with VSCode Icons theme and Atom Dark Color theme. You can download these from Visual Code Market Place.

      Delete
  3. im always reading ur blog... to much inspiration i get in ur blog .. thanks for sharing

    ReplyDelete
  4. Hello Sir, This article is awesome as always,

    one question i want to ask you and that is,

    are you still making 700K per month from this blog ?

    here is the article saying that you are making 700K per month, yes you are got featured on "BusinessInsider" that is not a small thing..

    http://www.businessinsider.in/These-are-the-richest-bloggers-in-India-Most-of-them-earnRs-10-lakh-plus-a-month/Srinivas-Tamada/slideshow/56628958.cms

    ReplyDelete
  5. Hi. How to convert the IOS app format or android app format in Visual Studio Code?

    ReplyDelete
  6. Build iOS code, execute with XCode

    $ ionic build ios

    Build Android file and open with Android SDK
    $ ionic build android

    ReplyDelete
  7. when upload the next part? you are amazing!!

    ReplyDelete
  8. Hi Sir,
    Actually you said use the link on our blogger page like feeds/posts/default/-/php?max-results=10&alt=json, in your page show the key values of entry. but that same link perform in my blog retrieved except entry value. is there any settings change in our blog page, please clarify.
    best Regards

    ReplyDelete

mailxengine Youtueb channel
Make in India
X