10 | This starter project comes with simple tabs-based layout for apps
11 | that are going to primarily use a Tabbed UI.
12 |
13 |
14 | Take a look at the src/pages/ directory to add or change tabs,
15 | update any existing page or create new pages.
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/pages/tabs/tabs.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { HomePage } from '../home/home';
4 | import { AboutPage } from '../about/about';
5 | import { ContactPage } from '../contact/contact';
6 |
7 | @Component({
8 | templateUrl: 'tabs.html'
9 | })
10 | export class TabsPage {
11 | // this tells the tabs component which Pages
12 | // should be each tab's root Page
13 | tab1Root: any = HomePage;
14 | tab2Root: any = AboutPage;
15 | tab3Root: any = ContactPage;
16 |
17 | constructor() {
18 |
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Specifies intentionally untracked files to ignore when using Git
2 | # http://git-scm.com/docs/gitignore
3 |
4 | *~
5 | *.sw[mnpcod]
6 | *.log
7 | *.tmp
8 | *.tmp.*
9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 |
15 | .idea/
16 | .sass-cache/
17 | .tmp/
18 | .versions/
19 | coverage/
20 | dist/
21 | node_modules/
22 | tmp/
23 | temp/
24 | hooks/
25 | platforms/
26 | plugins/
27 | plugins/android.json
28 | plugins/ios.json
29 | www/
30 | $RECYCLE.BIN/
31 |
32 | .DS_Store
33 | Thumbs.db
34 | UserInterfaceState.xcuserstate
35 |
--------------------------------------------------------------------------------
/src/declarations.d.ts:
--------------------------------------------------------------------------------
1 | /*
2 | Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
3 | They're what make intellisense work and make Typescript know all about your code.
4 |
5 | A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
6 | provide their own type declarations.
7 |
8 | To learn more about using third party libraries in an Ionic app, check out the docs here:
9 | http://ionicframework.com/docs/v2/resources/third-party-libs/
10 |
11 | For more info on type definition files, check out the Typescript docs here:
12 | https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
13 | */
14 | declare module '*';
--------------------------------------------------------------------------------
/src/app/app.scss:
--------------------------------------------------------------------------------
1 | // http://ionicframework.com/docs/v2/theming/
2 |
3 |
4 | // App Global Sass
5 | // --------------------------------------------------
6 | // Put style rules here that you want to apply globally. These
7 | // styles are for the entire app and not just one component.
8 | // Additionally, this file can be also used as an entry point
9 | // to import other Sass files to be included in the output CSS.
10 | //
11 | // Shared Sass variables, which can be used to adjust Ionic's
12 | // default Sass variables, belong in "theme/variables.scss".
13 | //
14 | // To declare rules for a specific mode, create a child rule
15 | // for the .md, .ios, or .wp mode classes. The mode class is
16 | // automatically applied to the element in the app.
17 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { IonicApp, IonicModule } from 'ionic-angular';
3 | import { MyApp } from './app.component';
4 | import { AboutPage } from '../pages/about/about';
5 | import { ContactPage } from '../pages/contact/contact';
6 | import { HomePage } from '../pages/home/home';
7 | import { TabsPage } from '../pages/tabs/tabs';
8 |
9 | @NgModule({
10 | declarations: [
11 | MyApp,
12 | AboutPage,
13 | ContactPage,
14 | HomePage,
15 | TabsPage
16 | ],
17 | imports: [
18 | IonicModule.forRoot(MyApp)
19 | ],
20 | bootstrap: [IonicApp],
21 | entryComponents: [
22 | MyApp,
23 | AboutPage,
24 | ContactPage,
25 | HomePage,
26 | TabsPage
27 | ],
28 | providers: []
29 | })
30 | export class AppModule {}
31 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Platform } from 'ionic-angular';
3 | import { StatusBar, Splashscreen } from 'ionic-native';
4 |
5 | import { TabsPage } from '../pages/tabs/tabs';
6 |
7 | import PouchDB from 'pouchdb';
8 |
9 |
10 | @Component({
11 | template: ``
12 | })
13 | export class MyApp {
14 | rootPage = TabsPage;
15 |
16 | constructor(platform: Platform) {
17 | platform.ready().then(() => {
18 | // Okay, so the platform is ready and our plugins are available.
19 | // Here you can do any higher level native things you might need.
20 | StatusBar.styleDefault();
21 | Splashscreen.hide();
22 | console.log("Hey look, I've got PouchDB:", PouchDB);
23 | let db = new PouchDB('database');
24 | console.log("Hey look, I've got a PouchDB database:", db);
25 | });
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Demo PouchDB + Ionic 2 RC + TypeScript 2
2 | =====
3 |
4 | A demo app to show how to use PouchDB with Ionic 2 and TypeScript.
5 |
6 | The app was created using:
7 |
8 | ```bash
9 | npm install -g ionic
10 | ionic start test --v2
11 | cd test
12 | ```
13 |
14 | Then PouchDB was installed using:
15 |
16 | ```bash
17 | npm install --save pouchdb
18 | ```
19 |
20 | The I made modifications to the default Ionic app:
21 |
22 | Importing PouchDB:
23 |
24 | ```typescript
25 | // src/app/app.component.ts
26 | import PouchDB from 'pouchdb';
27 | console.log("Hey look, I've got PouchDB:", PouchDB);
28 | let db = new PouchDB('database');
29 | console.log("Hey look, I've got a PouchDB database:", db);
30 | ```
31 |
32 | Then I started the app:
33 |
34 | ```bash
35 | ionic serve
36 | ```
37 |
38 | In your browser console, you should see "Hey look, I've got PouchDB" and "Hey look, I've got a
39 | PouchDB database".
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ionic App
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test",
3 | "author": "Ionic Framework",
4 | "homepage": "http://ionicframework.com/",
5 | "private": true,
6 | "scripts": {
7 | "build": "ionic-app-scripts build",
8 | "watch": "ionic-app-scripts watch",
9 | "serve:before": "watch",
10 | "emulate:before": "build",
11 | "deploy:before": "build",
12 | "build:before": "build",
13 | "run:before": "build"
14 | },
15 | "dependencies": {
16 | "@angular/common": "2.0.0",
17 | "@angular/compiler": "2.0.0",
18 | "@angular/compiler-cli": "0.6.2",
19 | "@angular/core": "2.0.0",
20 | "@angular/forms": "2.0.0",
21 | "@angular/http": "2.0.0",
22 | "@angular/platform-browser": "2.0.0",
23 | "@angular/platform-browser-dynamic": "2.0.0",
24 | "@angular/platform-server": "2.0.0",
25 | "@ionic/storage": "1.0.3",
26 | "ionic-angular": "2.0.0-rc.1",
27 | "ionic-native": "2.2.3",
28 | "ionicons": "3.0.0",
29 | "pouchdb": "^6.0.7",
30 | "rxjs": "5.0.0-beta.12",
31 | "zone.js": "0.6.21"
32 | },
33 | "devDependencies": {
34 | "@ionic/app-scripts": "^0.0.36",
35 | "typescript": "^2.0.3"
36 | },
37 | "cordovaPlugins": [
38 | "cordova-plugin-device",
39 | "cordova-plugin-console",
40 | "cordova-plugin-whitelist",
41 | "cordova-plugin-splashscreen",
42 | "cordova-plugin-statusbar",
43 | "ionic-plugin-keyboard"
44 | ],
45 | "cordovaPlatforms": [
46 | "ios",
47 | {
48 | "platform": "ios",
49 | "version": "",
50 | "locator": "ios"
51 | }
52 | ],
53 | "description": "test: An Ionic project"
54 | }
55 |
--------------------------------------------------------------------------------
/config.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | test
4 | An awesome Ionic/Cordova app.
5 | Ionic Framework Team
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/v2/theming/
3 | @import "ionic.globals";
4 |
5 |
6 | // Shared Variables
7 | // --------------------------------------------------
8 | // To customize the look and feel of this app, you can override
9 | // the Sass variables found in Ionic's source scss files.
10 | // To view all the possible Ionic variables, see:
11 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
12 |
13 | $text-color: #000;
14 | $background-color: #fff;
15 |
16 |
17 | // Named Color Variables
18 | // --------------------------------------------------
19 | // Named colors makes it easy to reuse colors on various components.
20 | // It's highly recommended to change the default colors
21 | // to match your app's branding. Ionic uses a Sass map of
22 | // colors so you can add, rename and remove colors as needed.
23 | // The "primary" color is the only required color in the map.
24 |
25 | $colors: (
26 | primary: #387ef5,
27 | secondary: #32db64,
28 | danger: #f53d3d,
29 | light: #f4f4f4,
30 | dark: #222,
31 | favorite: #69BB7B
32 | );
33 |
34 |
35 | // App iOS Variables
36 | // --------------------------------------------------
37 | // iOS only Sass variables can go here
38 |
39 |
40 |
41 |
42 | // App Material Design Variables
43 | // --------------------------------------------------
44 | // Material Design only Sass variables can go here
45 |
46 |
47 |
48 |
49 | // App Windows Variables
50 | // --------------------------------------------------
51 | // Windows only Sass variables can go here
52 |
53 |
54 |
55 |
56 | // App Theme
57 | // --------------------------------------------------
58 | // Ionic apps can have different themes applied, which can
59 | // then be future customized. This import comes last
60 | // so that the above variables are used and Ionic's
61 | // default are overridden.
62 |
63 | @import "ionic.theme.default";
64 |
65 |
66 | // Ionicons
67 | // --------------------------------------------------
68 | // The premium icon font for Ionic. For more info, please see:
69 | // http://ionicframework.com/docs/v2/ionicons/
70 |
71 | $ionicons-font-path: "../assets/fonts";
72 | @import "ionicons";
73 |
--------------------------------------------------------------------------------
/hooks/after_prepare/010_add_platform_class.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | // Add Platform Class
4 | // v1.0
5 | // Automatically adds the platform class to the body tag
6 | // after the `prepare` command. By placing the platform CSS classes
7 | // directly in the HTML built for the platform, it speeds up
8 | // rendering the correct layout/style for the specific platform
9 | // instead of waiting for the JS to figure out the correct classes.
10 |
11 | var fs = require('fs');
12 | var path = require('path');
13 |
14 | var rootdir = process.argv[2];
15 |
16 | function addPlatformBodyTag(indexPath, platform) {
17 | // add the platform class to the body tag
18 | try {
19 | var platformClass = 'platform-' + platform;
20 | var cordovaClass = 'platform-cordova platform-webview';
21 |
22 | var html = fs.readFileSync(indexPath, 'utf8');
23 |
24 | var bodyTag = findBodyTag(html);
25 | if(!bodyTag) return; // no opening body tag, something's wrong
26 |
27 | if(bodyTag.indexOf(platformClass) > -1) return; // already added
28 |
29 | var newBodyTag = bodyTag;
30 |
31 | var classAttr = findClassAttr(bodyTag);
32 | if(classAttr) {
33 | // body tag has existing class attribute, add the classname
34 | var endingQuote = classAttr.substring(classAttr.length-1);
35 | var newClassAttr = classAttr.substring(0, classAttr.length-1);
36 | newClassAttr += ' ' + platformClass + ' ' + cordovaClass + endingQuote;
37 | newBodyTag = bodyTag.replace(classAttr, newClassAttr);
38 |
39 | } else {
40 | // add class attribute to the body tag
41 | newBodyTag = bodyTag.replace('>', ' class="' + platformClass + ' ' + cordovaClass + '">');
42 | }
43 |
44 | html = html.replace(bodyTag, newBodyTag);
45 |
46 | fs.writeFileSync(indexPath, html, 'utf8');
47 |
48 | process.stdout.write('add to body class: ' + platformClass + '\n');
49 | } catch(e) {
50 | process.stdout.write(e);
51 | }
52 | }
53 |
54 | function findBodyTag(html) {
55 | // get the body tag
56 | try{
57 | return html.match(/])(.*?)>/gi)[0];
58 | }catch(e){}
59 | }
60 |
61 | function findClassAttr(bodyTag) {
62 | // get the body tag's class attribute
63 | try{
64 | return bodyTag.match(/ class=["|'](.*?)["|']/gi)[0];
65 | }catch(e){}
66 | }
67 |
68 | if (rootdir) {
69 |
70 | // go through each of the platform directories that have been prepared
71 | var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []);
72 |
73 | for(var x=0; x {
8 | // Delete all caches that aren't named in CURRENT_CACHES.
9 | // While there is only one cache in this example, the same logic will handle the case where
10 | // there are multiple versioned caches.
11 | const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => {
12 | return CURRENT_CACHES[key];
13 | });
14 |
15 | event.waitUntil(
16 | caches.keys().then((cacheNames) => {
17 | return Promise.all(
18 | cacheNames.map((cacheName) => {
19 | if (expectedCacheNames.indexOf(cacheName) === -1) {
20 | // If this cache name isn't present in the array of "expected" cache names, then delete it.
21 | console.log('Deleting out of date cache:', cacheName);
22 | return caches.delete(cacheName);
23 | }
24 | })
25 | );
26 | })
27 | );
28 | });
29 |
30 | // This sample illustrates an aggressive approach to caching, in which every valid response is
31 | // cached and every request is first checked against the cache.
32 | // This may not be an appropriate approach if your web application makes requests for
33 | // arbitrary URLs as part of its normal operation (e.g. a RSS client or a news aggregator),
34 | // as the cache could end up containing large responses that might not end up ever being accessed.
35 | // Other approaches, like selectively caching based on response headers or only caching
36 | // responses served from a specific domain, might be more appropriate for those use cases.
37 | self.addEventListener('fetch', (event) => {
38 |
39 | event.respondWith(
40 | caches.open(CURRENT_CACHES['read-through']).then((cache) => {
41 | return cache.match(event.request).then((response) => {
42 | if (response) {
43 | // If there is an entry in the cache for event.request, then response will be defined
44 | // and we can just return it.
45 |
46 | return response;
47 | }
48 |
49 | // Otherwise, if there is no entry in the cache for event.request, response will be
50 | // undefined, and we need to fetch() the resource.
51 | console.log(' No response for %s found in cache. ' +
52 | 'About to fetch from network...', event.request.url);
53 |
54 | // We call .clone() on the request since we might use it in the call to cache.put() later on.
55 | // Both fetch() and cache.put() "consume" the request, so we need to make a copy.
56 | // (see https://fetch.spec.whatwg.org/#dom-request-clone)
57 | return fetch(event.request.clone()).then((response) => {
58 |
59 | // Optional: add in extra conditions here, e.g. response.type == 'basic' to only cache
60 | // responses from the same domain. See https://fetch.spec.whatwg.org/#concept-response-type
61 | if (response.status < 400 && response.type === 'basic') {
62 | // We need to call .clone() on the response object to save a copy of it to the cache.
63 | // (https://fetch.spec.whatwg.org/#dom-request-clone)
64 | cache.put(event.request, response.clone());
65 | }
66 |
67 | // Return the original response object, which will be used to fulfill the resource request.
68 | return response;
69 | });
70 | }).catch((error) => {
71 | // This catch() will handle exceptions that arise from the match() or fetch() operations.
72 | // Note that a HTTP error response (e.g. 404) will NOT trigger an exception.
73 | // It will return a normal response object that has the appropriate error code set.
74 | console.error(' Read-through caching failed:', error);
75 |
76 | throw error;
77 | });
78 | })
79 | );
80 | });
--------------------------------------------------------------------------------
/hooks/README.md:
--------------------------------------------------------------------------------
1 |
21 | # Cordova Hooks
22 |
23 | Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order:
24 | * Application hooks from `/hooks`;
25 | * Application hooks from `config.xml`;
26 | * Plugin hooks from `plugins/.../plugin.xml`.
27 |
28 | __Remember__: Make your scripts executable.
29 |
30 | __Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated.
31 |
32 | ## Supported hook types
33 | The following hook types are supported:
34 |
35 | after_build/
36 | after_compile/
37 | after_docs/
38 | after_emulate/
39 | after_platform_add/
40 | after_platform_rm/
41 | after_platform_ls/
42 | after_plugin_add/
43 | after_plugin_ls/
44 | after_plugin_rm/
45 | after_plugin_search/
46 | after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
47 | after_prepare/
48 | after_run/
49 | after_serve/
50 | before_build/
51 | before_compile/
52 | before_docs/
53 | before_emulate/
54 | before_platform_add/
55 | before_platform_rm/
56 | before_platform_ls/
57 | before_plugin_add/
58 | before_plugin_ls/
59 | before_plugin_rm/
60 | before_plugin_search/
61 | before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
62 | before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled
63 | before_prepare/
64 | before_run/
65 | before_serve/
66 | pre_package/ <-- Windows 8 and Windows Phone only.
67 |
68 | ## Ways to define hooks
69 | ### Via '/hooks' directory
70 | To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example:
71 |
72 | # script file will be automatically executed after each build
73 | hooks/after_build/after_build_custom_action.js
74 |
75 |
76 | ### Config.xml
77 |
78 | Hooks can be defined in project's `config.xml` using `` elements, for example:
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | ...
89 |
90 |
91 |
92 |
93 |
94 |
95 | ...
96 |
97 |
98 | ### Plugin hooks (plugin.xml)
99 |
100 | As a plugin developer you can define hook scripts using `` elements in a `plugin.xml` like that:
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 | ...
109 |
110 |
111 | `before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled.
112 |
113 | ## Script Interface
114 |
115 | ### Javascript
116 |
117 | If you are writing hooks in Javascript you should use the following module definition:
118 | ```javascript
119 | module.exports = function(context) {
120 | ...
121 | }
122 | ```
123 |
124 | You can make your scipts async using Q:
125 | ```javascript
126 | module.exports = function(context) {
127 | var Q = context.requireCordovaModule('q');
128 | var deferral = new Q.defer();
129 |
130 | setTimeout(function(){
131 | console.log('hook.js>> end');
132 | deferral.resolve();
133 | }, 1000);
134 |
135 | return deferral.promise;
136 | }
137 | ```
138 |
139 | `context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object:
140 | ```json
141 | {
142 | "hook": "before_plugin_install",
143 | "scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js",
144 | "cmdLine": "The\\exact\\command\\cordova\\run\\with arguments",
145 | "opts": {
146 | "projectRoot":"C:\\path\\to\\the\\project",
147 | "cordova": {
148 | "platforms": ["wp8"],
149 | "plugins": ["com.plugin.withhooks"],
150 | "version": "0.21.7-dev"
151 | },
152 | "plugin": {
153 | "id": "com.plugin.withhooks",
154 | "pluginInfo": {
155 | ...
156 | },
157 | "platform": "wp8",
158 | "dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks"
159 | }
160 | },
161 | "cordova": {...}
162 | }
163 |
164 | ```
165 | `context.opts.plugin` object will only be passed to plugin hooks scripts.
166 |
167 | You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way:
168 | ```javascript
169 | var Q = context.requireCordovaModule('q');
170 | ```
171 |
172 | __Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only.
173 | For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below.
174 |
175 | ### Non-javascript
176 |
177 | Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables:
178 |
179 | * CORDOVA_VERSION - The version of the Cordova-CLI.
180 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios).
181 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer)
182 | * CORDOVA_HOOK - Path to the hook that is being executed.
183 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate)
184 |
185 | If a script returns a non-zero exit code, then the parent cordova command will be aborted.
186 |
187 | ## Writing hooks
188 |
189 | We highly recommend writing your hooks using Node.js so that they are
190 | cross-platform. Some good examples are shown here:
191 |
192 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/)
193 |
194 | Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example:
195 |
196 | #!/usr/bin/env [name_of_interpreter_executable]
197 |
--------------------------------------------------------------------------------