CAP918-Multiplatform Mobile App

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">


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

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

<ion-app></ion-app>


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


<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
{{item.score}}
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="chatboxes" item-left></ion-icon>
Comments
{{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>
<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());
}
}

CAP918-Multiplatform Mobile App

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CAP918-Multiplatform Mobile App

Uploaded by

Copyright:

Available Formats

CAP918- Multiplatform Mobile App

Name- Jovan Sandhu Registration No.-11900342

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

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

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

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

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

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

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

You might also like