Big upgrade to beta.11 and rc.4

CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.10.0"></a>
+# 1.10.0 (2016-08-09)
+
+### Bug Fixes
+
+* **Update**: Update to Ionic 2.0.0.beta.11 ([](https://github.com/lathonez/clicker/commit/))
+
 <a name="1.9.2"></a>
 # 1.9.2 (2016-07-12)
 

README.md

@@ -58,8 +58,8 @@ See the changelog [here](https://github.com/lathonez/clicker/blob/master/CHANGEL
 
 ## Dependencies
 
-* **@Angular:** 2.0.0-rc.3
-* **Ionic:** 2.0.0-beta.10
+* **@Angular:** 2.0.0-rc.4
+* **Ionic:** 2.0.0-beta.11
 
 External dependencies are listed here to justify their inclusion and to allow for their removal if your project isn't using the related functionality.
 

app/app.html

@@ -14,4 +14,4 @@
 
 </ion-menu>
 
-<ion-nav [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
+<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app/app.ts

@@ -1,6 +1,7 @@
 'use strict';
 
 import { Component, provide, Type, ViewChild }           from '@angular/core';
+import { disableDeprecatedForms, provideForms }          from '@angular/forms';
 import { ionicBootstrap, MenuController, Nav, Platform } from 'ionic-angular';
 import { StatusBar }                                     from 'ionic-native';
 import { Clickers, Storage }                             from './services';
@@ -49,4 +50,9 @@ export class ClickerApp {
   };
 }
 
-ionicBootstrap(ClickerApp, [Clickers, provide('Storage', {useClass: Storage})]);
+ionicBootstrap(ClickerApp, [
+  disableDeprecatedForms(),
+  provideForms(),
+  Clickers,
+  provide('Storage', {useClass: Storage})]
+);

app/components/clickerForm/clickerForm.html

@@ -1,12 +1,14 @@
-<form [ngFormModel]="form" (submit)="newClicker(form.value)">
+<form [formGroup]="form" (submit)="newClicker(form.value)">
   <ion-row>
     <ion-col width-80>
-      <ion-item>
-        <ion-input block [ngFormControl]="clickerNameInput" type="text" placeholder="New Clicker"></ion-input>
+      <ion-item >
+        <ion-input block formControlName="clickerNameInput" type="text" placeholder="New Clicker"></ion-input>
       </ion-item>
     </ion-col>
     <ion-col>
-      <button type="submit" block secondary outline><ion-icon name="add-circle"></ion-icon></button>
+      <button type="submit" block secondary outline>
+        <ion-icon name="add-circle"></ion-icon>
+      </button>
     </ion-col>
   </ion-row>
 </form>

app/components/clickerForm/clickerForm.spec.ts

@@ -9,7 +9,7 @@ this.fixture = null;
 this.instance = null;
 
 let clickerFormProviders: Array<any> = [
- provide(Clickers, {useClass: ClickersMock}),
+  provide(Clickers, {useClass: ClickersMock}),
 ];
 
 describe('ClickerForm', () => {
@@ -37,7 +37,7 @@ describe('ClickerForm', () => {
     TestUtils.eventFire(button, 'click');
     expect(this.instance.newClicker).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
     expect(this.instance['clickerService'].newClicker).toHaveBeenCalledWith(clickerName);
-    expect(Utils.resetControl).toHaveBeenCalledWith(this.instance['clickerNameInput']);
+    expect(Utils.resetControl).toHaveBeenCalledWith(this.instance.form.controls.clickerNameInput);
   });
 
   it('doesn\'t try to add a clicker with no name', () => {

app/components/clickerForm/clickerForm.ts

@@ -1,46 +1,44 @@
 'use strict';
 
-import { AbstractControl, ControlGroup, FormBuilder, Validators } from '@angular/common';
-import { Component }                                              from '@angular/core';
-import { Button, Icon, Item, Label, TextInput }                   from 'ionic-angular';
-import { Clickers, Utils }                                        from '../../services';
+import { FormGroup, FormBuilder, Validators }        from '@angular/forms';
+import { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { Component }                                 from '@angular/core';
+import { Button, Icon, Item, Label, TextInput }      from 'ionic-angular';
+import { Clickers, Utils }                           from '../../services';
 
 @Component({
   selector: 'clicker-form',
   templateUrl: 'build/components/clickerForm/clickerForm.html',
-  directives: [Button, Icon, Item, Label, TextInput],
+  directives: [Button, Icon, Item, Label, TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
 })
 
 export class ClickerForm {
 
   private clickerService: Clickers;
-  private form: ControlGroup;
-  private clickerNameInput: AbstractControl;
+  private form: FormGroup;
 
   constructor(clickerService: Clickers, fb: FormBuilder) {
     this.clickerService = clickerService;
 
     this.form = fb.group({
       clickerNameInput: ['', Validators.required],
     });
-
-    this.clickerNameInput = this.form.controls['clickerNameInput'];
   }
 
   public newClicker(formValue: Object): boolean {
 
     // need to mark the clickerName control as touched so validation
     // will apply after the user has tried to add a clicker
-    this.clickerNameInput.markAsTouched();
+    this.form.controls['clickerNameInput'].markAsTouched();
 
-    if (!this.clickerNameInput.valid) {
+    if (!this.form.controls['clickerNameInput'].valid) {
       return false;
     }
 
     this.clickerService.newClicker(formValue['clickerNameInput']);
 
     // reset the value of the contorl and all validation / state
-    this.clickerNameInput = Utils.resetControl(this.clickerNameInput);
+    this.form.controls['clickerNameInput'] = Utils.resetControl(this.form.controls['clickerNameInput']);
 
     return true;
   }

app/services/clickers.spec.ts

@@ -31,10 +31,6 @@ describe('Clickers', () => {
     expect(this.fixture).not.toBeNull();
   });
 
-  it('initialises with empty clickers', () => {
-    expect(new Clickers(null).getClickers()).toEqual([]);
-  });
-
   it('initialises with clickers from mock storage', (done: Function) => {
     this.clickers['initClickers']([])
       .then(() => {

app/services/utils.spec.ts

@@ -1,10 +1,10 @@
-import { Utils }                    from './';
-import { AbstractControl, Control } from '@angular/common';
+import { Utils }                        from './';
+import { AbstractControl, FormControl } from '@angular/forms';
 
 describe('Utils', () => {
 
   it('resets a control', () => {
-    let control: Control = new Control('');
+    let control: FormControl = new FormControl('');
     let returnedControl: AbstractControl = null;
     control.markAsTouched();
     control.updateValue('dave');

app/services/utils.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-import { AbstractControl } from '@angular/common';
+import { AbstractControl } from '@angular/forms';
 
 export class Utils {
 
@@ -13,6 +13,8 @@ export class Utils {
   // bit of a hack here to reset the validation / state on the control as well as the value
   // expecting a Control.reset() method to do this but there doesn't seem to be one
   // http://stackoverflow.com/questions/33084280/how-to-reset-control-value
+  // edit rc4 after new forms https://angular.io/docs/ts/latest/guide/forms.html ctrl + f "small trick"
+  // their suggested workaround is even worse than this IMO, it involves setTimeout and redrawing the whole form (noticable flicker)
   public static resetControl(control: AbstractControl): AbstractControl {
     control['updateValue']('');
     control['_touched'] = false;

config.xml

@@ -1,8 +1,8 @@
-<?xml version='1.0' encoding='utf-8'?>
-<widget id="com.ionicframework.myapp107445" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="com.ionicframework.clickerf0281363" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <name>Clicker</name>
   <description>An Ionic Framework and Cordova project.</description>
-  <author email="shazleto@gmail.com" href="http://ionicframework.com/">Ionic Framework Team</author>
+  <author email="shazleto@gmail.com" href="http://ionicframework.com/">Stephen Hazleton</author>
   <content src="index.html"/>
   <access origin="*"/>
   <allow-intent href="http://*/*"/>
@@ -28,4 +28,10 @@
   <feature name="StatusBar">
     <param name="ios-package" onload="true" value="CDVStatusBar"/>
   </feature>
+  <plugin name="cordova-plugin-device" spec="~1.1.2"/>
+  <plugin name="cordova-plugin-console" spec="~1.0.3"/>
+  <plugin name="cordova-plugin-whitelist" spec="~1.2.2"/>
+  <plugin name="cordova-plugin-splashscreen" spec="~3.2.2"/>
+  <plugin name="cordova-plugin-statusbar" spec="~2.1.3"/>
+  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
 </widget>

gulpfile.js

@@ -32,6 +32,7 @@ var buildSass = require('ionic-gulp-sass-build');
 var copyHTML = require('ionic-gulp-html-copy');
 var copyFonts = require('ionic-gulp-fonts-copy');
 var copyScripts = require('ionic-gulp-scripts-copy');
+var tslint = require('ionic-gulp-tslint');
 
 var isRelease = argv.indexOf('--release') > -1;
 
@@ -41,12 +42,7 @@ gulp.task('watch', ['clean'], function(done){
     function(){
       gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
       gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
-      buildBrowserify(
-        {
-          src: ['./app/app.ts', './typings/index.d.ts'],
-          watch: true
-        }
-      ).on('end', done);
+      buildBrowserify({ watch: true }).on('end', done);
     }
   );
 });
@@ -56,7 +52,6 @@ gulp.task('build', ['clean'], function(done){
     ['sass', 'html', 'fonts', 'scripts'],
     function(){
       buildBrowserify({
-        src: ['./app/app.ts', './typings/index.d.ts'],
         minify: isRelease,
         browserifyOptions: {
           debug: !isRelease
@@ -76,3 +71,4 @@ gulp.task('scripts', copyScripts);
 gulp.task('clean', function(){
   return del('www/build');
 });
+gulp.task('lint', tslint);

ionic.config.json

@@ -1,6 +1,6 @@
 {
   "name": "clicker",
-  "app_id": "",
+  "app_id": "f0281363",
   "typescript": true,
   "v2": true
 }

package.json

@@ -1,54 +1,56 @@
 {
   "dependencies": {
-    "@angular/common": "2.0.0-rc.3",
-    "@angular/compiler": "2.0.0-rc.3",
-    "@angular/core": "2.0.0-rc.3",
-    "@angular/platform-browser": "2.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-    "@angular/http": "2.0.0-rc.3",
+    "@angular/common": "2.0.0-rc.4",
+    "@angular/compiler": "2.0.0-rc.4",
+    "@angular/core": "2.0.0-rc.4",
+    "@angular/platform-browser": "2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/http": "2.0.0-rc.4",
+    "@angular/forms": "0.2.0",
     "es6-shim": "0.35.0",
-    "ionic-angular": "2.0.0-beta.10",
-    "ionic-native": "1.2.4",
+    "ionic-angular": "2.0.0-beta.11",
+    "ionic-native": "1.3.10",
     "ionicons": "3.0.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
   },
   "devDependencies": {
-    "browserify": "13.0.1",
+    "browserify": "13.1.0",
     "browserify-istanbul": "2.0.0",
     "codecov.io": "0.1.6",
     "del": "2.2.1",
     "gulp": "3.9.1",
-    "gulp-tslint": "5.0.0",
+    "gulp-tslint": "6.0.2",
     "gulp-typescript": "2.13.6",
-    "gulp-watch": "4.3.8",
+    "gulp-watch": "4.3.9",
     "ionic-gulp-browserify-typescript": "2.0.0",
     "ionic-gulp-fonts-copy": "1.0.0",
     "ionic-gulp-html-copy": "1.0.0",
     "ionic-gulp-sass-build": "1.0.0",
     "ionic-gulp-scripts-copy": "2.0.1",
+    "ionic-gulp-tslint": "1.0.0",
     "isparta": "4.0.0",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",
-    "karma": "1.1.0",
+    "karma": "1.1.2",
     "karma-browserify": "5.0.5",
     "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
+    "karma-coverage": "1.1.1",
     "karma-jasmine": "1.0.2",
-    "karma-mocha-reporter": "2.0.4",
+    "karma-mocha-reporter": "2.1.0",
     "karma-phantomjs-launcher": "1.0.1",
-    "phantomjs-prebuilt": "2.1.7",
-    "protractor": "3.3.0",
-    "run-sequence": "1.2.1",
-    "ts-node": "0.9.3",
-    "tsify": "0.16.0",
-    "tslint": "3.12.1",
+    "phantomjs-prebuilt": "2.1.11",
+    "protractor": "4.0.3",
+    "run-sequence": "1.2.2",
+    "ts-node": "1.2.2",
+    "tsify": "1.0.3",
+    "tslint": "3.14.0",
     "tslint-eslint-rules": "1.3.0",
-    "typings": "1.3.1"
+    "typings": "1.3.2"
   },
   "name": "clicker",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "clicker: An Ionic project",
   "cordovaPlugins": [
     "cordova-plugin-device",

test/diExports.ts

@@ -1,29 +1,31 @@
 import { provide, Type }                              from '@angular/core';
 import { ComponentFixture, TestComponentBuilder }     from '@angular/compiler/testing';
-import { injectAsync }                                from '@angular/core/testing';
-import { Control }                                    from '@angular/common';
+import { inject, async }                              from '@angular/core/testing';
+import { disableDeprecatedForms, provideForms, FormControl } from '@angular/forms';
 import { App, Config, Form, NavController, Platform } from 'ionic-angular';
 import { ConfigMock, NavMock }                        from './mocks';
 import { Utils }                                      from '../app/services/utils';
 export { TestUtils }                                  from './testUtils';
 
 export let providers: Array<any> = [
+  disableDeprecatedForms(),
+  provideForms(),
   Form,
   provide(Config, {useClass: ConfigMock}),
   provide(App, {useClass: ConfigMock}),        // required by ClickerList
   provide(NavController, {useClass: NavMock}), // required by ClickerList
   provide(Platform, {useClass: ConfigMock}),   // -> IonicApp
 ];
 
-export let injectAsyncWrapper: Function = ((callback) => injectAsync([TestComponentBuilder], callback));
+export let injectAsyncWrapper: Function = ((callback) => async(inject([TestComponentBuilder], callback)));
 
 export let asyncCallbackFactory: Function = ((component, testSpec, detectChanges, beforeEachFn) => {
   return ((tcb: TestComponentBuilder) => {
     return tcb.createAsync(component)
       .then((fixture: ComponentFixture<Type>) => {
         testSpec.fixture = fixture;
         testSpec.instance = fixture.componentInstance;
-        testSpec.instance.control = new Control('');
+        testSpec.instance.control = new FormControl('');
         if (detectChanges) fixture.detectChanges();
         if (beforeEachFn) beforeEachFn(testSpec);
       })

test/gulpfile.ts

@@ -90,8 +90,10 @@ gulp.task('lint', () => {
   let tslint: any = require('gulp-tslint');
 
   return gulp.src(join(config.appDir, '**/*.ts'))
-    .pipe(tslint())
-    .pipe(tslint.report('verbose'));
+    .pipe(tslint({
+        formatter: 'verbose',
+    }))
+    .pipe(tslint.report());
 });
 
 // build unit tests, run unit tests, remap and report coverage

tsconfig.json

@@ -10,7 +10,9 @@
     "!node_modules/**/*"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "typings/global",
+    "typings/global.d.ts"
   ],
   "compileOnSave": false,
   "atom": {