Commit 9d872ab9 authored by Cédric Moreau's avatar Cédric Moreau

Working Brunch + Angular 2 + Ionic 2

parent b71ef761
module.exports = config:
conventions:
assets: /^src\/assets/
ignored: ['hooks', 'plugins', 'resources', 'www']
paths:
public: 'www'
watched: ['src']
files:
javascripts:
joinTo:
'vendor.js': /^node_modules/,
'main.js': /^src/
order:
after: [/\.html$/, /\.css$/]
stylesheets:
joinTo:
'app.css': /(s?css)$/
templates: joinTo: 'templates.js'
plugins:
inlineCss: {
html: true
},
babel:
presets: ['es2015','stage-0']
brunchTypescript: {
ignoreErrors: true
},
copycat: {
"fonts" : ["node_modules/ionic-angular/fonts"],
verbose : false,
onlyChanged: true
}
hooks:
preCompile: () ->
console.log("Pre-compilation: generation de ionic.css...")
sass = require('node-sass');
return new Promise((res, rej) ->
sass.render({
data: '$font-path: "/fonts"; @import "ionic.build.default";',
outFile: 'www/ionic.css',
sourceMap: true,
includePaths: [
"node_modules/ionic-angular/themes",
"node_modules/ionic-angular/fonts",
"node_modules/ionicons/dist/scss"
]
}, (err, result) ->
if (err)
return rej(err)
require('fs').writeFileSync('www/ionic.css', result.css.toString('utf8'))
require('fs').writeFileSync('www/ionic.css.map', result.map.toString('utf8'))
return res()
);
)
overrides:
production:
sourceMaps: true
server:
hostname: '127.0.0.1'
......@@ -7,7 +7,8 @@
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
"ionic:serve": "ionic-app-scripts serve",
"production": "node production.js"
},
"dependencies": {
"@angular/common": "4.0.0",
......@@ -23,16 +24,38 @@
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"@types/es6-shim": "^0.31.32",
"co": "^4.6.0",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"tslib": "^1.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1"
"@types/node": "^7.0.13",
"auto-reload-brunch": "2.7.1",
"babel-core": "^6.24.1",
"babel-polyfill": "6.3.14",
"babel-preset-es2015": "6.5.0",
"babel-preset-stage-0": "6.0.15",
"brunch": "2.6.0 - 2.8.0 || >2.8.1",
"brunch-typescript": "2.1.0",
"codelyzer": "2.0.0-beta.4",
"copycat-brunch": "^1.1.0",
"environment-brunch": "^1.0.0",
"inline-css-brunch": "^2.0.0",
"javascript-brunch": "^2.0.0",
"node-sass": "^4.5.2",
"sass-brunch": "^2.10.4",
"tslint": "^4.4.2",
"typescript": "~2.2.1",
"uglify-js-brunch": "^2.0.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
......
console.log("Post-compilation: to ES5...")
const babel = require('babel-core');
const options = {
presets: ['es2015'],
sourceMap: true
}
return new Promise((res, rej) => {
babel.transformFile("www/main.js", options, (err, result) => {
if (err) return rej(err)
require('fs').writeFileSync('www/main.js', result.code.toString('utf8'))
require('fs').writeFileSync('www/main.js.map', result.map.toString('utf8'))
return res()
})
})
.then(() => process.exit(0))
<div>
<p>This is an Angular 2 application skeleton created for {{name}}.</p>
</div>
import {Component, OnInit, OnDestroy} from '@angular/core';
@Component({
selector: 'about',
template: require('./about.component.html')
})
export class AboutComponent implements OnInit, OnDestroy {
public name: string;
constructor() {
this.name = 'Brunch';
}
ngOnInit() { console.log('About::ngOnInit'); }
ngOnDestroy() { console.log('About::ngOnDestroy'); }
}
export {AboutComponent} from './about.component';
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import {Component, ViewChild} from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import {MenuController, Nav} from 'ionic-angular';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@Component({
templateUrl: 'app.html'
template: require('./app.html')
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage = HelloIonicPage;
pages: Array<{title: string, url: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
public router: Router
// public platform: Platform
public menu: MenuController
) {
this.initializeApp();
// set our app's pages
// set our app2's pages
this.pages = [
{ title: 'Hello Ionic', url: '/', component: HelloIonicPage },
{ title: 'My First List', url: '/theList', component: ListPage }
......@@ -37,19 +29,11 @@ export class MyApp {
}
initializeApp() {
this.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.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
// this.nav.setRoot(page.component);
// this.router
// this.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.
// this.statusBar.styleDefault();
// this.splashScreen.hide();
// });
}
}
import './vendor';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
......@@ -11,9 +12,6 @@ import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
const appRoutes: Routes = [
{
path: '',
......@@ -47,8 +45,6 @@ const appRoutes: Routes = [
ListPage
],
providers: [
StatusBar,
SplashScreen,
ItemsResolver,
{provide: APP_BASE_HREF, useValue: '/#/'},
{provide: ErrorHandler, useClass: IonicErrorHandler}
......
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home';
import {AboutComponent} from './about';
export const routes: Routes = [
{path: '', component: HomeComponent, pathMatch: 'full'},
{path: 'about', component: AboutComponent}
];
export const routing = RouterModule.forRoot(routes);
// http://ionicframework.com/docs/v2/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 <body> element in the app.
ion-app {
color: blue
}
/* This file contains global CSS which isn't
scoped to a particular module.
You can control which files are sent to app.css
in the brunch-config.js file. */
body, html {
padding: 0;
margin: 0;
}
/* CSS in these files are inlined into the JavaScript.
* By default Angular 2 limits them so they only apply
* to the component they belong to.
* Look at `encapsulation` if you want to change that.
*/
pre {
border: 1px solid #666;
background-color: #eee;
border-radius: 4px;
padding: 1em;
}
<div>
<div>Your Content Here</div>
<input type="text" [(ngModel)]="title.value">
<pre>this.test = {{ title | json }}</pre>
</div>
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'home',
styles: [require('./home.component.css')],
template: require('./home.component.html')
})
export class HomeComponent implements OnInit {
public title: any;
constructor() {
const initial = { value: 'Angular 2' };
this.title = { ...initial }; // Object spread in TypeScript 2.1!
}
ngOnInit() {
console.log('Hello Home component');
}
}
export {HomeComponent} from './home.component';
import './vendor';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
......
import {Component} from '@angular/core';
@Component({
selector: 'navbar',
styles: [`
nav ul {
list-style-type: none;
margin: 1em 0;
padding: 0 1em;
border-top: 1px solid #069;
border-bottom: 1px solid #069;
}
nav li {
display: inline-block;
padding: 0;
}
nav a {
color: #069;
text-decoration: none;
padding: 0.5em;
display: inline-block;
}
nav .active {
background-color: #069;
color: #fff;
}
`],
template: `
<nav>
<ul>
<li>
<a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
</li>
<li>
<a routerLink="about" routerLinkActive="active">About</a>
</li>
</ul>
</nav>
`
})
export class NavBarComponent {}
import 'es6-shim';
import 'es6-promise';
import 'zone.js/dist/zone';
import 'reflect-metadata';
import '@angular/compiler';
import '@angular/platform-browser';
import {enableProdMode} from '@angular/core';
import 'rxjs';
const production: string = 'production';
if (production === 'BRUNCH_ENVIRONMENT') {
enableProdMode();
}
......@@ -7,12 +7,12 @@
<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">
<link rel="icon" type="image/x-icon" href="icon/favicon.ico">
<link rel="manifest" href="./manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!--<script src="cordova.js"></script>-->
<!-- un-comment this code to enable service worker
<script>
......@@ -22,20 +22,24 @@
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
<!-- base url -->
<base href="/">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="ionic.css">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- Ionic's root component and where app2 app will load -->
<ion-app>Loading Ionic...</ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!--<script src="build/polyfills.js"></script>-->
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script src="vendor.js"></script>
<script src="main.js"></script>
<script>require('src/app/main');</script>
</body>
</html>
/*
Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
They're what make intellisense work and make Typescript know all about your code.
A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
provide their own type declarations.
To learn more about using third party libraries in an Ionic app, check out the docs here:
http://ionicframework.com/docs/v2/resources/third-party-libs/
For more info on type definition files, check out the Typescript docs here:
https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
*/
declare module '*';
\ No newline at end of file
......@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
template: require('./hello-ionic.html')
})
export class HelloIonicPage {
constructor() {
......
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {NavParams} from "ionic-angular";
@Component({
selector: 'page-item-details',
templateUrl: 'item-details.html'
template: `abc`
})
export class ItemDetailsPage {
selectedItem: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
constructor(/*public navCtrl: NavController*/public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
}
}
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { co } from 'co';
import {Injectable} from "@angular/core";
import {Resolve} from "@angular/router";
import {co} from "co";
@Injectable()
export class ItemsResolver implements Resolve<any> {
......@@ -17,6 +17,7 @@ export class ItemsResolver implements Resolve<any> {
});
}
// return Promise.resolve(items)
return co(function*() {
return yield new Promise((res) => setTimeout(() => {
res(items)
......
import { Component } from '@angular/core';
import {Component} from "@angular/core";
import { ItemsResolver } from './list-resolver.service';
// import { ItemDetailsPage } from '../item-details/item-details';
import {ItemsResolver} from "./list-resolver.service";
import {App} from "ionic-angular";
import {ItemDetailsPage} from "../item-details/item-details";
@Component({
selector: 'page-list',
templateUrl: 'list.html',
template: require('./list.html'),
providers: [ItemsResolver]
})
export class ListPage {
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
constructor(private itemsResolver:ItemsResolver/*public navCtrl: NavController, public navParams: NavParams*/) {
constructor(public itemsResolver:ItemsResolver, protected app: App) {
this.items = [];
itemsResolver.resolve().then((items) => {
......@@ -22,9 +24,9 @@ export class ListPage {
})
}
itemTapped(event, item) {
// this.navCtrl.push(ItemDetailsPage, {
// item: item
// });
itemTapped(item) {
this.app.getRootNav().push(ItemDetailsPage, {
item: item
});
}
}
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts";
@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/v2/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/v2/ionicons/
@import "ionic.ionicons";
// Fonts
// --------------------------------------------------
@import "roboto";
@import "noto-sans";
def {
color: green
}
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"target": "es6",
"module": "commonjs",
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"noEmitHelpers": true,
"importHelpers": true,
"noEmit": true,
"sourceMap": true,
"target": "es6"
"moduleResolution": "node",
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
"node_modules",
"www"
]
}
declare var require: (name: string, loaderPath?: string) => any;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment