Ionic App

From 5ef465dab66d20100630bba6a42f47c243aa476a Mon Sep 17 00:00:00 2001 From: Kumar Priyansh Date: Sun, 9 Sep 2018 08:19:27 +0530 Subject: Files Upload via GIT --- src/app/app.component.ts | 22 +++++++++++ src/app/app.html | 1 + src/app/app.module.ts | 40 +++++++++++++++++++ src/app/app.scss | 16 ++++++++ src/app/main.ts | 5 +++ src/assets/icon/favicon.ico | Bin 0 -> 1981 bytes src/assets/imgs/logo.png | Bin 0 -> 39757 bytes src/index.html | 49 +++++++++++++++++++++++ src/manifest.json | 13 ++++++ src/pages/about/about.html | 17 ++++++++ src/pages/about/about.scss | 3 ++ src/pages/about/about.ts | 14 +++++++ src/pages/contact/contact.html | 19 +++++++++ src/pages/contact/contact.scss | 3 ++ src/pages/contact/contact.ts | 14 +++++++ src/pages/home/home.html | 18 +++++++++ src/pages/home/home.scss | 32 +++++++++++++++ src/pages/home/home.ts | 40 +++++++++++++++++++ src/pages/tabs/tabs.html | 5 +++ src/pages/tabs/tabs.ts | 19 +++++++++ src/service-worker.js | 31 +++++++++++++++ src/theme/variables.scss | 88 +++++++++++++++++++++++++++++++++++++++++ 22 files changed, 449 insertions(+) create mode 100644 src/app/app.component.ts create mode 100644 src/app/app.html create mode 100644 src/app/app.module.ts create mode 100644 src/app/app.scss create mode 100644 src/app/main.ts create mode 100644 src/assets/icon/favicon.ico create mode 100644 src/assets/imgs/logo.png create mode 100644 src/index.html create mode 100644 src/manifest.json create mode 100644 src/pages/about/about.html create mode 100644 src/pages/about/about.scss create mode 100644 src/pages/about/about.ts create mode 100644 src/pages/contact/contact.html create mode 100644 src/pages/contact/contact.scss create mode 100644 src/pages/contact/contact.ts create mode 100644 src/pages/home/home.html create mode 100644 src/pages/home/home.scss create mode 100644 src/pages/home/home.ts create mode 100644 src/pages/tabs/tabs.html create mode 100644 src/pages/tabs/tabs.ts create mode 100644 src/service-worker.js create mode 100644 src/theme/variables.scss (limited to 'src') diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 0000000..a28e8d2 --- /dev/null +++ b/src/app/app.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { Platform } from 'ionic-angular'; +import { StatusBar } from '@ionic-native/status-bar'; +import { SplashScreen } from '@ionic-native/splash-screen'; + +import { TabsPage } from '../pages/tabs/tabs'; + +@Component({ + templateUrl: 'app.html' +}) +export class MyApp { + rootPage:any = TabsPage; + + constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { + 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(); + }); + } +} diff --git a/src/app/app.html b/src/app/app.html new file mode 100644 index 0000000..7b88c96 --- /dev/null +++ b/src/app/app.html @@ -0,0 +1 @@ + diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 0000000..e2c9d8d --- /dev/null +++ b/src/app/app.module.ts @@ -0,0 +1,40 @@ +import { NgModule, ErrorHandler } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; +import { MyApp } from './app.component'; + +import { AboutPage } from '../pages/about/about'; +import { ContactPage } from '../pages/contact/contact'; +import { HomePage } from '../pages/home/home'; +import { TabsPage } from '../pages/tabs/tabs'; + +import { StatusBar } from '@ionic-native/status-bar'; +import { SplashScreen } from '@ionic-native/splash-screen'; + +@NgModule({ + declarations: [ + MyApp, + AboutPage, + ContactPage, + HomePage, + TabsPage + ], + imports: [ + BrowserModule, + IonicModule.forRoot(MyApp) + ], + bootstrap: [IonicApp], + entryComponents: [ + MyApp, + AboutPage, + ContactPage, + HomePage, + TabsPage + ], + providers: [ + StatusBar, + SplashScreen, + {provide: ErrorHandler, useClass: IonicErrorHandler} + ] +}) +export class AppModule {} diff --git a/src/app/app.scss b/src/app/app.scss new file mode 100644 index 0000000..1392a6e --- /dev/null +++ b/src/app/app.scss @@ -0,0 +1,16 @@ +// http://ionicframework.com/docs/theming/ + + +// App Global Sass +// -------------------------------------------------- +// Put style rules here that you want to apply globally. These +// styles are for the entire app and not just one component. +// Additionally, this file can be also used as an entry point +// to import other Sass files to be included in the output CSS. +// +// Shared Sass variables, which can be used to adjust Ionic's +// default Sass variables, belong in "theme/variables.scss". +// +// To declare rules for a specific mode, create a child rule +// for the .md, .ios, or .wp mode classes. The mode class is +// automatically applied to the element in the app. diff --git a/src/app/main.ts b/src/app/main.ts new file mode 100644 index 0000000..6af7a5b --- /dev/null +++ b/src/app/main.ts @@ -0,0 +1,5 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/src/assets/icon/favicon.ico b/src/assets/icon/favicon.ico new file mode 100644 index 0000000..d76fa29 Binary files /dev/null and b/src/assets/icon/favicon.ico differ diff --git a/src/assets/imgs/logo.png b/src/assets/imgs/logo.png new file mode 100644 index 0000000..80f631d Binary files /dev/null and b/src/assets/imgs/logo.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..e254871 --- /dev/null +++ b/src/index.html @@ -0,0 +1,49 @@ + + + + + Ionic App + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/manifest.json b/src/manifest.json new file mode 100644 index 0000000..f6456bb --- /dev/null +++ b/src/manifest.json @@ -0,0 +1,13 @@ +{ + "name": "Ionic", + "short_name": "Ionic", + "start_url": "index.html", + "display": "standalone", + "icons": [{ + "src": "assets/imgs/logo.png", + "sizes": "512x512", + "type": "image/png" + }], + "background_color": "#4e8ef7", + "theme_color": "#4e8ef7" +} \ No newline at end of file diff --git a/src/pages/about/about.html b/src/pages/about/about.html new file mode 100644 index 0000000..ea76b88 --- /dev/null +++ b/src/pages/about/about.html @@ -0,0 +1,17 @@ + + + + + About + + + + + +

About News App

Developed by Kumar Priyansh for Phones

App Version: 1.0.0
+ API Used: NewsAPI
+ Framework: Ionic
+ JS Library: JQuery
+ diff --git a/src/pages/about/about.scss b/src/pages/about/about.scss new file mode 100644 index 0000000..639956d --- /dev/null +++ b/src/pages/about/about.scss @@ -0,0 +1,3 @@ +page-about { + +} diff --git a/src/pages/about/about.ts b/src/pages/about/about.ts new file mode 100644 index 0000000..a7ee80a --- /dev/null +++ b/src/pages/about/about.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; + +@Component({ + selector: 'page-about', + templateUrl: 'about.html' +}) +export class AboutPage { + + constructor(public navCtrl: NavController) { + + } + +} diff --git a/src/pages/contact/contact.html b/src/pages/contact/contact.html new file mode 100644 index 0000000..b1dfb59 --- /dev/null +++ b/src/pages/contact/contact.html @@ -0,0 +1,19 @@ + + + + Feedback + + + + + + +

Feedback sending is supported only via email.

Send your feedbacks to bobbyskhs@gmail.com

+ diff --git a/src/pages/contact/contact.scss b/src/pages/contact/contact.scss new file mode 100644 index 0000000..13d4440 --- /dev/null +++ b/src/pages/contact/contact.scss @@ -0,0 +1,3 @@ +page-contact { + +} diff --git a/src/pages/contact/contact.ts b/src/pages/contact/contact.ts new file mode 100644 index 0000000..3ccadc9 --- /dev/null +++ b/src/pages/contact/contact.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; + +@Component({ + selector: 'page-contact', + templateUrl: 'contact.html' +}) +export class ContactPage { + + constructor(public navCtrl: NavController) { + + } + +} diff --git a/src/pages/home/home.html b/src/pages/home/home.html new file mode 100644 index 0000000..c7830bb --- /dev/null +++ b/src/pages/home/home.html @@ -0,0 +1,18 @@ + + + News App + + + + + +

+ diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss new file mode 100644 index 0000000..900c9ec --- /dev/null +++ b/src/pages/home/home.scss @@ -0,0 +1,32 @@ +.article { + height: 400px; + width: 100%; + background-position: center; + background-size: cover; + display: block; + margin: 5px; +} +.overlayart { + background-color: rgba(0, 0, 0, 0.568); + position: relative; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.art { + position: absolute; + bottom: 50px; + width: 100%; +} + +.art h3 { + color: white; + padding: 0px 20px; + width: 100%; +} +.art p { + color: white; + padding: 0px 20px; +} \ No newline at end of file diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts new file mode 100644 index 0000000..df3af8f --- /dev/null +++ b/src/pages/home/home.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; +import * as $ from 'jquery'; + +@Component({ + selector: 'page-home', + templateUrl: 'home.html' +}) +export class HomePage { + + constructor(public navCtrl: NavController) { + + } + ngAfterViewInit(){ + $(document).ready(function(){ + var url = 'https://newsapi.org/v2/top-headlines?country=in&apiKey=f449ba44714842379f423215072370dd'; + $.getJSON(url).then(function(res){ + //console.log(res); + var count; + for (count = 0; count<20; count++) { + var article = res.articles[count]; + var ImageURL = res.articles[count].urlToImage; + //console.log(article); + $('#showNews').append('

'+article.title+'

'+article.description+'

Follow Link

'); + $("#"+count).css('background-image','url(' + ImageURL + ')'); + } + }) + //$.getJSON(url).then(function(res){ + // console.log(res) + // var count; + // for(count = 0; count < 20; count++){ + // var article = res.articles[count] + // var ImageURL = res.articles[count].urlToImage + // //console.log(ImageURL) + // $('#showNews').append('

'+article.title+'

'+article.description+'
Follow Link

'); + // $("#"+count).css('background-image','url(' + ImageURL + ')'); + //} + }) + } + } \ No newline at end of file diff --git a/src/pages/tabs/tabs.html b/src/pages/tabs/tabs.html new file mode 100644 index 0000000..bed91a4 --- /dev/null +++ b/src/pages/tabs/tabs.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/pages/tabs/tabs.ts b/src/pages/tabs/tabs.ts new file mode 100644 index 0000000..f80301b --- /dev/null +++ b/src/pages/tabs/tabs.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; + +import { AboutPage } from '../about/about'; +import { ContactPage } from '../contact/contact'; +import { HomePage } from '../home/home'; + +@Component({ + templateUrl: 'tabs.html' +}) +export class TabsPage { + + tab1Root = HomePage; + tab2Root = AboutPage; + tab3Root = ContactPage; + + constructor() { + + } +} diff --git a/src/service-worker.js b/src/service-worker.js new file mode 100644 index 0000000..ffbbb06 --- /dev/null +++ b/src/service-worker.js @@ -0,0 +1,31 @@ +/** + * Check out https://googlechromelabs.github.io/sw-toolbox/ for + * more info on how to use sw-toolbox to custom configure your service worker. + */ + + +'use strict'; +importScripts('./build/sw-toolbox.js'); + +self.toolbox.options.cache = { + name: 'ionic-cache' +}; + +// pre-cache our key assets +self.toolbox.precache( + [ + './build/main.js', + './build/vendor.js', + './build/main.css', + './build/polyfills.js', + 'index.html', + 'manifest.json' + ] +); + +// dynamically cache any other local assets +self.toolbox.router.any('/*', self.toolbox.fastest); + +// for any other requests go to the network, cache, +// and then only use that cached resource if your user goes offline +self.toolbox.router.default = self.toolbox.networkFirst; diff --git a/src/theme/variables.scss b/src/theme/variables.scss new file mode 100644 index 0000000..18276a4 --- /dev/null +++ b/src/theme/variables.scss @@ -0,0 +1,88 @@ +// Ionic Variables and Theming. For more info, please see: +// http://ionicframework.com/docs/theming/ + +// Font path is used to include ionicons, +// roboto, and noto sans fonts +$font-path: "../assets/fonts"; + + +// The app direction is used to include +// rtl styles in your app. For more info, please see: +// http://ionicframework.com/docs/theming/rtl-support/ +$app-direction: ltr; + + +@import "ionic.globals"; + + +// Shared Variables +// -------------------------------------------------- +// To customize the look and feel of this app, you can override +// the Sass variables found in Ionic's source scss files. +// To view all the possible Ionic variables, see: +// http://ionicframework.com/docs/theming/overriding-ionic-variables/ + + + + +// Named Color Variables +// -------------------------------------------------- +// Named colors makes it easy to reuse colors on various components. +// It's highly recommended to change the default colors +// to match your app's branding. Ionic uses a Sass map of +// colors so you can add, rename and remove colors as needed. +// The "primary" color is the only required color in the map. + +$colors: ( + primary: #488aff, + secondary: #32db64, + danger: #f53d3d, + light: #f4f4f4, + dark: #222 +); + + +// App iOS Variables +// -------------------------------------------------- +// iOS only Sass variables can go here + + + + +// App Material Design Variables +// -------------------------------------------------- +// Material Design only Sass variables can go here + + + + +// App Windows Variables +// -------------------------------------------------- +// Windows only Sass variables can go here + + + + +// App Theme +// -------------------------------------------------- +// Ionic apps can have different themes applied, which can +// then be future customized. This import comes last +// so that the above variables are used and Ionic's +// default are overridden. + +@import "ionic.theme.default"; + + +// Ionicons +// -------------------------------------------------- +// The premium icon font for Ionic. For more info, please see: +// http://ionicframework.com/docs/ionicons/ + +@import "ionic.ionicons"; + + +// Fonts +// -------------------------------------------------- + +@import "roboto"; +@import "noto-sans"; -- cgit v1.2.3