initiating the smartphone app

This commit is contained in:
arnaucode
2017-10-29 20:16:07 +01:00
parent 8068099897
commit 2a5b455280
80 changed files with 626 additions and 1 deletions

View File

@@ -0,0 +1,32 @@
This is an addon starter template for the [Ionic Framework](http://ionicframework.com/).
## How to use this template
*This template does not work on its own*. It is missing the Ionic library, and AngularJS.
To use this, either create a new ionic project using the ionic node.js utility, or copy and paste this into an existing Cordova project and download a release of Ionic separately.
### With the Ionic tool:
Take the name after `ionic-starter-`, and that is the name of the template to be used when using the `ionic start` command below:
```bash
$ sudo npm install -g ionic cordova
$ ionic start myApp sidemenu
```
Then, to run it, cd into `myApp` and run:
```bash
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
```
Substitute ios for android if not on a Mac, but if you can, the ios development toolchain is a lot easier to work with until you need to do anything custom to Android.
## Demo
http://plnkr.co/edit/0RXSDB?p=preview
## Issues
Issues have been disabled on this repo, if you do find an issue or have a question consider posting it on the [Ionic Forum](http://forum.ionicframework.com/). Or else if there is truly an error, follow our guidelines for [submitting an issue](http://ionicframework.com/contribute/#issues) to the main Ionic repository. On the other hand, pull requests are welcome here!

View File

@@ -0,0 +1 @@
/* Empty. Add your own CSS if you like */

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- 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="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/main.js"></script>
<script src="js/menu.js"></script>
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
</body>
</html>

View File

@@ -0,0 +1,44 @@
angular.module('app', [
'ionic',
'app.main',
'app.menu'
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl'
})
.state('app.main', {
url: '/main',
views: {
'menuContent': {
templateUrl: 'templates/main.html'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/main');
});

View File

@@ -0,0 +1,5 @@
angular.module('app.main', [])
.controller('MainCtrl', function($scope) {
});

View File

@@ -0,0 +1,5 @@
angular.module('app.menu', [])
.controller('MenuCtrl', function($scope) {
});

View File

@@ -0,0 +1,12 @@
{
"name": "My Ionic App",
"short_name": "My Ionic App",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "icon.png",
"sizes": "512x512",
"type": "image/png"
}]
}

View File

@@ -0,0 +1,12 @@
self.addEventListener('activate', function (event) {
});
self.addEventListener('fetch', function (event) {
});
self.addEventListener('push', function (event) {
});

View File

@@ -0,0 +1,26 @@
<ion-view view-title="Hotdog - No Hotdog App">
<ion-content>
<div class="row">
<div class="col">
<div class="button button-full button-stable">
<i class="icon ion-camera"></i> Take Photo
</div>
</div>
<div class="col">
<div class="button button-full button-stable">
<i class="icon ion-image"></i> From Gallery
</div>
</div>
</div>
<div class="list card">
<div class="item item-image">
<img src="http://www.trueactivist.com/wp-content/uploads/2015/07/hotdog-300x300.jpg">
</div>
<a class="item item-icon-left balanced" href="#">
<i class="icon ion-checkmark"></i>
Is a Hotdog
</a>
</div>
</ion-content>
</ion-view>

View File

@@ -0,0 +1,27 @@
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/main">
Main
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>