Commit fdbc8455 authored by Colin Eberhardt's avatar Colin Eberhardt

Updated to Angular 2 beta

Updated app to Angular 2 beta
  + Removed @View decorator
  + Changed directives from snake-case to camel-case
  + Added new dependency to Rx
  + Removed olf dependency to traceur (not sure this was actually needed?)

Changes to build process
 + Moved typescript configration to tsconfig.json in order to make it a little easier to understand / visualise

Updated README
parent fb0c821f
node_modules/.bin
# ignore the source / documentation of each node module, but retain the
# distribution builds
node_modules/node-uuid
!node_modules/node-uuid/uuid.js
node_modules/store.js
node_modules/store.js/store.js
node_modules/systemjs/bower.json
node_modules/systemjs/.npmignore
node_modules/systemjs/.agignore
node_modules/systemjs/test
node_modules/systemjs/package.json
node_modules/systemjs/LICENSE
node_modules/systemjs/Makefile
node_modules/systemjs/README.md
node_modules/systemjs/lib
node_modules/systemjs/node_modules
node_modules/systemjs/dist/
!node_modules/systemjs/dist/system.js.map
!node_modules/systemjs/dist/system.js
!node_modules/systemjs/dist/es6-module-loader.js
!node_modules/store.js/store.js
node_modules/tsd
node_modules/typescript
node_modules/systemjs
!node_modules/systemjs/dist/system.src.js
node_modules/todomvc-app-css
!node_modules/todomvc-app-css/index.css
......@@ -30,7 +18,16 @@ node_modules/todomvc-app-css
node_modules/todomvc-common
!node_modules/todomvc-common/base.css
node_modules/bower-traceur-runtime
node_modules/bower-traceur-runtime/traceur-runtime.js
node_modules/angular2
!node_modules/angular2/bundles/angular2-polyfills.js
!node_modules/angular2/bundles/angular2.dev.js
node_modules/rxjs
!node_modules/rxjs/bundles/Rx.js
# Ignore development dependencies
node_modules/tsd
node_modules/typescript
typings
if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
if (typeof __metadata !== "function") __metadata = function (k, v) {
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
/// <reference path="typings/angular2/angular2.d.ts" />
var angular2_1 = require('angular2/angular2');
var store_1 = require('services/store');
var core_1 = require('angular2/core');
var browser_1 = require('angular2/platform/browser');
var store_1 = require('./services/store');
var ESC_KEY = 27;
var ENTER_KEY = 13;
var TodoApp = (function () {
......@@ -50,15 +48,13 @@ var TodoApp = (function () {
}
};
TodoApp = __decorate([
angular2_1.Component({
core_1.Component({
selector: 'todo-app',
}),
angular2_1.View({
directives: [angular2_1.NgIf, angular2_1.NgFor],
template: "\n\t\t<section class=\"todoapp\">\n\t\t\t<header class=\"header\">\n\t\t\t\t<h1>todos</h1>\n\t\t\t\t<input class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus=\"\" #newtodo (keyup)=\"addTodo($event, newtodo)\">\n\t\t\t</header>\n\t\t\t<section class=\"main\" *ng-if=\"todoStore.todos.length > 0\">\n\t\t\t\t<input class=\"toggle-all\" type=\"checkbox\" *ng-if=\"todoStore.todos.length\" #toggleall [checked]=\"todoStore.allCompleted()\" (click)=\"todoStore.setAllTo(toggleall)\">\n\t\t\t\t<ul class=\"todo-list\">\n\t\t\t\t\t<li *ng-for=\"#todo of todoStore.todos\" [class.completed]=\"todo.completed\" [class.editing]=\"todo.editing\">\n\t\t\t\t\t\t<div class=\"view\">\n\t\t\t\t\t\t\t<input class=\"toggle\" type=\"checkbox\" (click)=\"toggleCompletion(todo.uid)\" [checked]=\"todo.completed\">\n\t\t\t\t\t\t\t<label (dblclick)=\"editTodo(todo)\">{{todo.title}}</label>\n\t\t\t\t\t\t\t<button class=\"destroy\" (click)=\"remove(todo.uid)\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<input class=\"edit\" *ng-if=\"todo.editing\" [value]=\"todo.title\" #editedtodo (blur)=\"stopEditing(todo, editedtodo)\" (keyup.enter)=\"updateEditingTodo(editedtodo, todo)\" (keyup.escape)=\"cancelEditingTodo(todo)\">\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\t\t\t<footer class=\"footer\" *ng-if=\"todoStore.todos.length > 0\">\n\t\t\t\t<span class=\"todo-count\"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>\n\t\t\t\t<button class=\"clear-completed\" *ng-if=\"todoStore.getCompleted().length > 0\" (click)=\"removeCompleted()\">Clear completed</button>\n\t\t\t</footer>\n\t\t</section>"
template: "\n\t\t<section class=\"todoapp\">\n\t\t\t<header class=\"header\">\n\t\t\t\t<h1>todos</h1>\n\t\t\t\t<input class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus=\"\" #newtodo (keyup)=\"addTodo($event, newtodo)\">\n\t\t\t</header>\n\t\t\t<section class=\"main\" *ngIf=\"todoStore.todos.length > 0\">\n\t\t\t\t<input class=\"toggle-all\" type=\"checkbox\" *ngIf=\"todoStore.todos.length\" #toggleall [checked]=\"todoStore.allCompleted()\" (click)=\"todoStore.setAllTo(toggleall)\">\n\t\t\t\t<ul class=\"todo-list\">\n\t\t\t\t\t<li *ngFor=\"#todo of todoStore.todos\" [class.completed]=\"todo.completed\" [class.editing]=\"todo.editing\">\n\t\t\t\t\t\t<div class=\"view\">\n\t\t\t\t\t\t\t<input class=\"toggle\" type=\"checkbox\" (click)=\"toggleCompletion(todo.uid)\" [checked]=\"todo.completed\">\n\t\t\t\t\t\t\t<label (dblclick)=\"editTodo(todo)\">{{todo.title}}</label>\n\t\t\t\t\t\t\t<button class=\"destroy\" (click)=\"remove(todo.uid)\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<input class=\"edit\" *ngIf=\"todo.editing\" [value]=\"todo.title\" #editedtodo (blur)=\"stopEditing(todo, editedtodo)\" (keyup.enter)=\"updateEditingTodo(editedtodo, todo)\" (keyup.escape)=\"cancelEditingTodo(todo)\">\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\t\t\t<footer class=\"footer\" *ngIf=\"todoStore.todos.length > 0\">\n\t\t\t\t<span class=\"todo-count\"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>\n\t\t\t\t<button class=\"clear-completed\" *ngIf=\"todoStore.getCompleted().length > 0\" (click)=\"removeCompleted()\">Clear completed</button>\n\t\t\t</footer>\n\t\t</section>"
}),
__metadata('design:paramtypes', [])
], TodoApp);
return TodoApp;
})();
angular2_1.bootstrap(TodoApp);
browser_1.bootstrap(TodoApp);
//# sourceMappingURL=app.js.map
\ No newline at end of file
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgIf, NgFor} from 'angular2/angular2';
import {TodoStore, Todo} from 'services/store';
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {TodoStore, Todo} from './services/store';
const ESC_KEY = 27;
const ENTER_KEY = 13;
@Component({
selector: 'todo-app',
})
@View({
directives: [NgIf, NgFor],
template: `
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus="" #newtodo (keyup)="addTodo($event, newtodo)">
</header>
<section class="main" *ng-if="todoStore.todos.length > 0">
<input class="toggle-all" type="checkbox" *ng-if="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall)">
<section class="main" *ngIf="todoStore.todos.length > 0">
<input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall)">
<ul class="todo-list">
<li *ng-for="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
<li *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
<div class="view">
<input class="toggle" type="checkbox" (click)="toggleCompletion(todo.uid)" [checked]="todo.completed">
<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" (click)="remove(todo.uid)"></button>
</div>
<input class="edit" *ng-if="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo)" (keyup.enter)="updateEditingTodo(editedtodo, todo)" (keyup.escape)="cancelEditingTodo(todo)">
<input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo)" (keyup.enter)="updateEditingTodo(editedtodo, todo)" (keyup.escape)="cancelEditingTodo(todo)">
</li>
</ul>
</section>
<footer class="footer" *ng-if="todoStore.todos.length > 0">
<footer class="footer" *ngIf="todoStore.todos.length > 0">
<span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
<button class="clear-completed" *ng-if="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
<button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
</footer>
</section>`
})
......
......@@ -5,10 +5,10 @@
<title>Angular2 • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<script src="node_modules/bower-traceur-runtime/traceur-runtime.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/store.js/store.js"></script>
<script src="vendor/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<todo-app></todo-app>
......@@ -21,8 +21,20 @@
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script>
System.paths['node-uuid'] = 'node_modules/node-uuid/uuid.js';
System.import('app');
System.config({
packages: {
'app': {
format: 'cjs',
defaultExtension: 'js'
}
},
map: {
'node-uuid': 'node_modules/node-uuid/uuid.js',
'store.js': 'node_modules/store.js/store.js',
'app': './',
}
});
System.import('app/app');
</script>
</body>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -3,53 +3,74 @@
// Copyright (c) 2010-2012 Robert Kieffer
// MIT License - http://opensource.org/licenses/mit-license.php
(function() {
var _global = this;
/*global window, require, define */
(function(_window) {
'use strict';
// Unique ID creation requires a high quality random # generator. We feature
// detect to determine the best RNG source, normalizing to a function that
// returns 128-bits of randomness, since that's what's usually required
var _rng;
var _rng, _mathRNG, _nodeRNG, _whatwgRNG, _previousRoot;
function setupBrowser() {
// Allow for MSIE11 msCrypto
var _crypto = _window.crypto || _window.msCrypto;
if (!_rng && _crypto && _crypto.getRandomValues) {
// WHATWG crypto-based RNG - http://wiki.whatwg.org/wiki/Crypto
//
// Moderately fast, high quality
try {
var _rnds8 = new Uint8Array(16);
_whatwgRNG = _rng = function whatwgRNG() {
_crypto.getRandomValues(_rnds8);
return _rnds8;
};
_rng();
} catch(e) {}
}
// Node.js crypto-based RNG - http://nodejs.org/docs/v0.6.2/api/crypto.html
//
// Moderately fast, high quality
if (typeof(_global.require) == 'function') {
try {
var _rb = _global.require('crypto').randomBytes;
_rng = _rb && function() {return _rb(16);};
} catch(e) {}
if (!_rng) {
// Math.random()-based (RNG)
//
// If all else fails, use Math.random(). It's fast, but is of unspecified
// quality.
var _rnds = new Array(16);
_mathRNG = _rng = function() {
for (var i = 0, r; i < 16; i++) {
if ((i & 0x03) === 0) { r = Math.random() * 0x100000000; }
_rnds[i] = r >>> ((i & 0x03) << 3) & 0xff;
}
return _rnds;
};
if ('undefined' !== typeof console && console.warn) {
console.warn("[SECURITY] node-uuid: crypto not usable, falling back to insecure Math.random()");
}
}
}
if (!_rng && _global.crypto && crypto.getRandomValues) {
// WHATWG crypto-based RNG - http://wiki.whatwg.org/wiki/Crypto
function setupNode() {
// Node.js crypto-based RNG - http://nodejs.org/docs/v0.6.2/api/crypto.html
//
// Moderately fast, high quality
var _rnds8 = new Uint8Array(16);
_rng = function whatwgRNG() {
crypto.getRandomValues(_rnds8);
return _rnds8;
};
if ('function' === typeof require) {
try {
var _rb = require('crypto').randomBytes;
_nodeRNG = _rng = _rb && function() {return _rb(16);};
_rng();
} catch(e) {}
}
}
if (!_rng) {
// Math.random()-based (RNG)
//
// If all else fails, use Math.random(). It's fast, but is of unspecified
// quality.
var _rnds = new Array(16);
_rng = function() {
for (var i = 0, r; i < 16; i++) {
if ((i & 0x03) === 0) r = Math.random() * 0x100000000;
_rnds[i] = r >>> ((i & 0x03) << 3) & 0xff;
}
return _rnds;
};
if (_window) {
setupBrowser();
} else {
setupNode();
}
// Buffer class to use
var BufferClass = typeof(_global.Buffer) == 'function' ? _global.Buffer : Array;
var BufferClass = ('function' === typeof Buffer) ? Buffer : Array;
// Maps for number <-> hex string conversion
var _byteToHex = [];
......@@ -118,17 +139,17 @@
options = options || {};
var clockseq = options.clockseq != null ? options.clockseq : _clockseq;
var clockseq = (options.clockseq != null) ? options.clockseq : _clockseq;
// UUID timestamps are 100 nano-second units since the Gregorian epoch,
// (1582-10-15 00:00). JSNumbers aren't precise enough for this, so
// time is handled internally as 'msecs' (integer milliseconds) and 'nsecs'
// (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00.
var msecs = options.msecs != null ? options.msecs : new Date().getTime();
var msecs = (options.msecs != null) ? options.msecs : new Date().getTime();
// Per 4.2.1.2, use count of uuid's generated during the current clock
// cycle to simulate higher resolution clock
var nsecs = options.nsecs != null ? options.nsecs : _lastNSecs + 1;
var nsecs = (options.nsecs != null) ? options.nsecs : _lastNSecs + 1;
// Time since last uuid creation (in msecs)
var dt = (msecs - _lastMSecs) + (nsecs - _lastNSecs)/10000;
......@@ -194,8 +215,8 @@
// Deprecated - 'format' argument, as supported in v1.2
var i = buf && offset || 0;
if (typeof(options) == 'string') {
buf = options == 'binary' ? new BufferClass(16) : null;
if (typeof(options) === 'string') {
buf = (options === 'binary') ? new BufferClass(16) : null;
options = null;
}
options = options || {};
......@@ -223,25 +244,29 @@
uuid.parse = parse;
uuid.unparse = unparse;
uuid.BufferClass = BufferClass;
uuid._rng = _rng;
uuid._mathRNG = _mathRNG;
uuid._nodeRNG = _nodeRNG;
uuid._whatwgRNG = _whatwgRNG;
if (typeof(module) != 'undefined' && module.exports) {
if (('undefined' !== typeof module) && module.exports) {
// Publish as node.js module
module.exports = uuid;
} else if (typeof define === 'function' && define.amd) {
} else if (typeof define === 'function' && define.amd) {
// Publish as AMD module
define(function() {return uuid;});
} else {
// Publish as global (in browsers)
var _previousRoot = _global.uuid;
_previousRoot = _window.uuid;
// **`noConflict()` - (browser only) to reset global 'uuid' var**
uuid.noConflict = function() {
_global.uuid = _previousRoot;
_window.uuid = _previousRoot;
return uuid;
};
_global.uuid = uuid;
_window.uuid = uuid;
}
}).call(this);
})('undefined' !== typeof window ? window : null);
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -316,7 +316,6 @@ html .clear-completed:active {
line-height: 20px;
text-decoration: none;
cursor: pointer;
position: relative;
}
.clear-completed:hover {
......
......@@ -2,17 +2,18 @@
"private": true,
"scripts": {
"postinstall": "cp node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js node_modules/systemjs/dist && ./node_modules/.bin/tsd query angular2 node-uuid storejs node --action install",
"dev": "tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts"
"dev": "tsc --watch"
},
"devDependencies": {
"tsd": "^0.6.0",
"typescript": "^1.5.0-beta"
"typescript": "^1.7.3"
},
"dependencies": {
"bower-traceur-runtime": "git://github.com/jmcriffey/bower-traceur-runtime#0.0.87",
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"rxjs": "5.0.0-beta.0",
"node-uuid": "^1.4.3",
"store.js": "^1.0.4",
"systemjs": "^0.16.11",
"todomvc-app-css": "^2.0.0",
"todomvc-common": "^1.0.1"
}
......
......@@ -5,11 +5,11 @@
## Resources
- [Website](https://angular.io/)
- [Documentation](https://angular.io/docs/js/latest/)
- [Documentation](https://angular.io/docs/ts/latest/)
### Articles
- [Angular 2 Status preview](http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/)
- [Angular 2 Beta Announcement](http://angularjs.blogspot.co.uk/2015/12/angular-2-beta.html)
### Support
......@@ -22,7 +22,7 @@
## Implementation
This app was built using typescript and angular2. To make changes simply
This app was built using TypeScript and Angular 2 beta. To make changes simply
* `npm i`
* `npm run dev`
......
/// <reference path="../typings/node-uuid/node-uuid.d.ts" />
/// <reference path="../typings/storejs/storejs.d.ts" />
/// <reference path="../typings/angular2/angular2.d.ts" />
if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var angular2_1 = require('angular2/angular2');
var uuid = require('node-uuid');
require('store.js');
var Todo = (function () {
function Todo(title) {
this.uid = uuid.v4();
......@@ -82,9 +71,7 @@ var TodoStore = (function () {
this.todos.push(new Todo(title));
this._updateStore();
};
TodoStore = __decorate([
angular2_1.Injectable()
], TodoStore);
return TodoStore;
})();
exports.TodoStore = TodoStore;
//# sourceMappingURL=store.js.map
\ No newline at end of file
/// <reference path="../typings/node-uuid/node-uuid.d.ts" />
/// <reference path="../typings/storejs/storejs.d.ts" />
/// <reference path="../typings/angular2/angular2.d.ts" />
import {Injectable} from 'angular2/angular2';
import * as uuid from 'node-uuid';
import 'store.js';
export class Todo {
completed: Boolean;
......@@ -21,7 +17,6 @@ export class Todo {
}
}
@Injectable()
export class TodoStore {
todos: Array<Todo>;
constructor() {
......
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"files": [
"typings/node-uuid/node-uuid-base.d.ts",
"typings/node-uuid/node-uuid-cjs.d.ts",
"typings/storejs/storejs.d.ts",
"app.ts",
"services/store.ts"
]
}
This diff is collapsed.
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