javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

working examples

Browse Source
This commit is contained in:
Andrew
2015-03-23 09:18:36 -06:00
parent 1048d50891
commit a883fab519
10 changed files with 85 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
example-bootstrap.js
View File

@ -1,26 +0,0 @@
var exampleReady = function() {
console.error('Implement exampleReady to bootstrap your app.\n' +
'For example: `function exampleReady() { System.import("./main"); }`');
};
(function() {
var loaded = 0;
var scripts = [
'/jspm-config.js',
'https://cdn.rawgit.com/angular/zone.js/v0.4.1/zone.js',
'https://cdn.rawgit.com/angular/zone.js/v0.4.1/long-stack-trace-zone.js',
'https://cdn.rawgit.com/robwormald/50b6b855a6ce21af6967/raw/aa9e1c0eed78defd890ccfcc50c4b4648d4d891d/angular2.js'
];
scripts.forEach(function(src) {
var script = document.createElement('script');
script.async = true;
script.onload = function() {
if (++loaded == scripts.length) exampleReady();
};
document.head.appendChild(script);
script.src = src;
});
})();

21
gulpfile.js
View File

@ -12,13 +12,14 @@ var concat = require('gulp-concat');
var debug = require('gulp-debug'); var debug = require('gulp-debug');
var del = require('del'); var del = require('del');
var exec = require('gulp-exec'); var exec = require('gulp-exec');
var gulpif = require('gulp-if');
var karma = require('karma').server; var karma = require('karma').server;
var plumber = require('gulp-plumber'); var plumber = require('gulp-plumber');
var rename = require('gulp-rename'); var rename = require('gulp-rename');
var sass = require('gulp-sass'); var sass = require('gulp-sass');
var shell = require('gulp-shell'); var shell = require('gulp-shell');
var traceur = require('gulp-traceur'); var traceur = require('gulp-traceur');
var template = require('gulp-template'); var wrap = require('gulp-wrap');
gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']); gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']);
@ -39,10 +40,6 @@ gulp.task('watch', ['default'], function() {
console.log('Serving `dist` on http://localhost:' + port); console.log('Serving `dist` on http://localhost:' + port);
}); });
gulp.task('lint', shell.task([
'./node_modules/.bin/standard'
]));
gulp.task('karma', function() { gulp.task('karma', function() {
return karma.start({ configFile: __dirname + '/scripts/test/karma.conf.js' }); return karma.start({ configFile: __dirname + '/scripts/test/karma.conf.js' });
}); });
@ -139,3 +136,17 @@ gulp.task('angular2', function () {
.pipe(gulp.dest('dist/lib')); .pipe(gulp.dest('dist/lib'));
}); });
gulp.task('examples', function() {
var mainFileRegex = /(main|index).html$/;
return gulp.src('src/components/**/examples/**/*')
.pipe(gulpif(mainFileRegex, wrap({
src: 'scripts/examples/index.template.html'
})))
.pipe(gulpif(mainFileRegex, rename({
basename: 'index.html'
})))
.pipe(rename(function(file) {
file.dirname = file.dirname.replace('/examples/', '/');
}))
.pipe(gulp.dest('dist/examples/'));
});

10
jspm-config.js
View File

@ -1,12 +1,12 @@
System.config({ System.config({
traceurOptions: {
annotations: true,
types: true,
memberVariables: true
},
"paths": { "paths": {
"*": "*.js", "*": "*.js",
"github:*": "/jspm_packages/github/*.js" "github:*": "/jspm_packages/github/*.js"
},
"traceurOptions": {
"annotations": true,
"types": true,
"memberVariables": true
} }
}); });

3
package.json
View File

@ -16,7 +16,7 @@
"gulp-sass": "^1.3.3", "gulp-sass": "^1.3.3",
"gulp-shell": "^0.4.0", "gulp-shell": "^0.4.0",
"gulp-traceur": "0.16.*", "gulp-traceur": "0.16.*",
"gulp-wrap": "~0.11.0", "gulp-wrap": "^0.11.0",
"karma": "^0.12.31", "karma": "^0.12.31",
"serve-static": "~1.8.1", "serve-static": "~1.8.1",
"systemjs": "^0.11.3", "systemjs": "^0.11.3",
@ -27,7 +27,6 @@
"es6-module-loader": "~0.11.0", "es6-module-loader": "~0.11.0",
"event-stream": "^3.3.0", "event-stream": "^3.3.0",
"gulp-template": "^3.0.0", "gulp-template": "^3.0.0",
"hammerjs": "^2.0.4",
"jasmine-core": "^2.2.0", "jasmine-core": "^2.2.0",
"karma-chrome-launcher": "^0.1.7", "karma-chrome-launcher": "^0.1.7",
"karma-jasmine": "^0.3.5", "karma-jasmine": "^0.3.5",

43
scripts/examples/index.template.html
View File

@ -1,33 +1,22 @@
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head lang="en"> <head>
<link rel="stylesheet" href="/css/ionic.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- ES6-related imports -->
<script src="/lib/traceur-runtime.js"></script>
<script src="/lib/es6-module-loader-sans-promises.src.js"></script>
<script src="/lib/extension-register.js"></script>
<script>
register(System);
</script>
<!-- Third party imports -->
<script src="/lib/angular2.js"></script>
<script src="/lib/zone.js"></script>
<script src="/lib/hammer.js"></script>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ionic 2 Example</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/dist/css/ionic.css" />
<script src="/jspm_packages/system.js"></script>
<script src="/jspm-config.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/v0.4.1/zone.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/v0.4.1/long-stack-trace-zone.js"></script>
<script src="https://cdn.rawgit.com/robwormald/50b6b855a6ce21af6967/raw/aa9e1c0eed78defd890ccfcc50c4b4648d4d891d/angular2.js"></script>
</head> </head>
<body ion-app> <body>
<%= contents %>
</body> </body>
<script> <script>
System.register({ System.import('./main');
map: { </script>
'ionic': '/ionic'
}
});
System.import('main.js'):
</body> </body>
</html> </html>

1
src/components.js Normal file
View File

@ -0,0 +1 @@
export * from './components/aside/aside';

0
src/components/app/app.js Normal file
View File

32
src/components/aside/examples/basic/index.html Normal file
View File

@ -0,0 +1,32 @@
<aside-app>
<ion-aside-parent>
<ion-aside side="left">
LEFT
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="right">
RIGHT
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="top">
TOP
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="bottom">
BOTTOM
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
</ion-aside-parent>
</aside-app>

14
src/components/aside/examples/basic/main.js Normal file
View File

@ -0,0 +1,14 @@
import {Aside, AsideParent} from 'ionic2/components/aside/aside';
import {Template, Component, bootstrap} from 'angular2/angular2';
@Component({
selector: 'aside-app'
})
@Template({
// Inlined version of main.html
inline: `<content></content>`,
directives: [Aside, AsideParent]
})
class AsideApp {}
bootstrap(AsideApp);

46
src/components/aside/examples/main.html
View File

@ -1,46 +0,0 @@
<ion-aside-parent>
<ion-aside side="left">
LEFT
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="right">
RIGHT
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="top">
TOP
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="bottom">
BOTTOM
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<div class="content">
<button (click)="showModal()">Show Modal</button>
<ion-switch></ion-switch>
<!--
<ion-modal>
<h2>I'm a modal!</h2>
</ion-modal>
-->
<button (click)="showModal()">Show Modal</button>
<!--
<ion-modal>
<h2>I'm a modal!</h2>
</ion-modal>
-->
</div>
</ion-aside-parent>