Scribd
Upload
41 views

CAP918-Multiplatform Mobile App

This document contains code for a multi-platform mobile app created with Ionic and Angular. It includes code for pages, modules, services, and a service worker. The app fetches posts from Reddit APIs and displays them in different categories that can be selected by the user. On selection of a post, more details are shown on an individual page.

Uploaded by

Jovan Sandhu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

CAP918-Multiplatform Mobile App

This document contains code for a multi-platform mobile app created with Ionic and Angular. It includes code for pages, modules, services, and a service worker. The app fetches posts from Reddit APIs and displays them in different categories that can be selected by the user. On selection of a post, more details are shown on an individual page.

Uploaded by

Jovan Sandhu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

CAP918- Multiplatform Mobile App

Name- Jovan Sandhu Registration No.-11900342


Section-D1901

Assignment 2

Ionic Project
Code-
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">


<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">

<!-- cordova.js required for cordova apps -->


<script src="cordova.js"></script>

<!-- un-comment this code to enable service worker


<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->

<link href="build/main.css" rel="stylesheet">

</head>
<body>

<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>

<!-- The polyfills js is generated during the build process -->


<script src="build/polyfills.js"></script>

<!-- The bundle js is generated during the build process -->


<script src="build/main.js"></script>
</body>
</html>

App.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from
'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { RedditsPage } from '../pages/reddits/reddits';
import { SettingsPage } from '../pages/settings/settings';
import {DetailsPage} from '../pages/details/details';
import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
declarations: [
MyApp,
AboutPage,
RedditsPage,
SettingsPage,
DetailsPage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
RedditsPage,
SettingsPage,
DetailsPage,
TabsPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
App.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import {RedditService} from './services/reddit.service';
import { TabsPage } from '../pages/tabs/tabs';

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

constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}

Page.html
<ion-header>
<ion-navbar color="primary">
<ion-title>
{{item.title}}
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<ion-card>
<img src="{{item.preview.images[0].source.url}}"/>
<ion-card-content>
<ion-card-title>
{{item.title}}
</ion-card-title>
<ion-list>
<ion-item>
<ion-icon name="person" item-left></ion-icon>
Author
<ion-note item-right>
{{item.author}}
</ion-note>
</ion-item>

<ion-item>
<ion-icon name="thumbs-up" item-left></ion-icon>
Score
<ion-note item-right>
{{item.score}}
</ion-note>
</ion-item>

<ion-item>
<ion-icon name="chatboxes" item-left></ion-icon>
Comments
<ion-note item-right>
{{item.num_comments}}
</ion-note>
</ion-item>
</ion-list>
<a ion-button block target="_blank"
href="http://reddit.com/{{item.permalink}}">View On Reddit</a>
</ion-card-content>
</ion-card>
</ion-content>

<ion-header>
<ion-navbar color="primary">
<ion-title>
IonReddit
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
<ion-item>
<ion-label fixed>Category</ion-label>
<ion-select (ionChange)="changeCategory()"
[(ngModel)]="category" name="category">
<ion-option value="sports">Sports</ion-option>
<ion-option value="food">Food</ion-option>
<ion-option value="news">News</ion-option>
<ion-option value="music">Music</ion-option>
<ion-option value="funny">Funny</ion-option>
<ion-option value="gaming">Gaming</ion-option>
<ion-option value="art">Art</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-item *ngFor="let item of items">
<ion-thumbnail *ngIf="item.data.thumbnail" item-left>
<img src="{{item.data.thumbnail}}">
</ion-thumbnail>
<h2>{{item.data.title}}</h2>
<p>
<ion-icon
name="thumbs-up">{{item.data.score}}</ion-icon>&nbsp;&nbsp;
<ion-icon
name="chatboxes">{{item.data.num_comments}}</ion-icon>
</p>
<button ion-button clear item-right
(click)="viewItem(item.data)">View</button>
</ion-item>
</ion-list>
</ion-content>

Seviceworker.js
// tick this to make the cache invalidate and update
const CACHE_VERSION = 1;
const CURRENT_CACHES = {
'read-through': 'read-through-cache-v' + CACHE_VERSION
};

self.addEventListener('activate', (event) => {


// Delete all caches that aren't named in CURRENT_CACHES.
// While there is only one cache in this example, the same logic will
handle the case where
// there are multiple versioned caches.
const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => {
return CURRENT_CACHES[key];
});

event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (expectedCacheNames.indexOf(cacheName) === -1) {
// If this cache name isn't present in the array of
"expected" cache names, then delete it.
console.log('Deleting out of date cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});

self.addEventListener('fetch', (event) => {

event.respondWith(
caches.open(CURRENT_CACHES['read-through']).then((cache) => {
return cache.match(event.request).then((response) => {
if (response) {
// If there is an entry in the cache for event.request, then
response will be defined
// and we can just return it.

return response;
}

// Otherwise, if there is no entry in the cache for


event.request, response will be
// undefined, and we need to fetch() the resource.
console.log(' No response for %s found in cache. ' +
'About to fetch from network...', event.request.url);

// (see https://fetch.spec.whatwg.org/#dom-request-clone)
return fetch(event.request.clone()).then((response) => {
if (response.status < 400 && response.type === 'basic') {
// We need to call .clone() on the response object to save
a copy of it to the cache.
// (https://fetch.spec.whatwg.org/#dom-request-clone)
cache.put(event.request, response.clone());
}

// Return the original response object, which will be used to


fulfill the resource request.
return response;
});
}).catch((error) => {
.
console.error(' Read-through caching failed:', error);

throw error;
});
})
);
});

Service.ts
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class RedditService{
http:any;
baseUrl: String;

constructor(http:Http){
this.http = http;
this.baseUrl = 'https://www.reddit.com/r';
}

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

You might also like