Skip to content

T
todomvc
Commit 255cb2d9 authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

Merge pull request #361 from pavelsavara/angularjs_typescript 

Adding Angularjs + typescript
parents 410a831f 50910f2c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2340 additions and 0 deletions
labs/architecture-examples/angularjs_typescript/.gitignore 0 → 100644
View file @ 255cb2d9
*.suo
*.user
/bin
/obj
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/ReadMe.md 0 → 100644
View file @ 255cb2d9
# TypeScript + AngularJS #
## Motivation ##
[Typescript](http://www.typescriptlang.org/)
is a superset of JavaScript, with optional type annotations.
As any JS is valid TS, there is no interoperability issue.
You could slowly convert existing JS code-base and use JS libraries natively.
You already know most of the language.
It compiles back to JS.
It's attractive to people with strongly typed languages background,
who are willing to type in more code (classes and type annotations).
Receiving benefit of type checking on compile time.
Also IntelliSense works better.
Generally recommended for large projects.
## Editors ##
The best editor for TypeScript is at the moment Visual Studio 2012 with
[TypeScript](http://go.microsoft.com/fwlink/?LinkID=266563) and
[Web Essentials 2012](http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6) plugins.
Webstorm is [coming soon](http://joeriks.com/2012/11/20/a-first-look-at-the-typescript-support-in-webstorm-6-eap/).
## Node.js ##
standalone compiler is is available on NPM.
```
npm install -g typescript
```
To compile the TS code in this project run this in the current directory.
```
tsc -sourcemap js/_all.ts
```
## Ambient declarations ##
It is useful to have type information for the API of libraries you use.
[DefinitelyTyped](https://github.com/borisyankov/DefinitelyTyped) is a nice collection of annotations by Boris Yankov.
## Files ##
* `*.ts` are source code.
* `*.d.ts` are ambient declarations for libraries.
* `*.js` are generated by the compiler, except in `js/libs` folder.
* `*.js.map` are [source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/) generated by the compiler, for better debugging experience.
* `_all.ts` is convention used to enumerate file references in the project for benefit of TypeScript compiler.
If the number of files grows, you could put an `_all.ts` file into each folder, move all nested references to it and reference the nested `_all.ts` from the parent `_all.ts`.
Start reading `TodoCtrl.ts` first and continue with `Application.ts` and `Index.html`, the rest of it is easy.
AngularJS has a steeper learning curve than TypeScript.
## AngularJS ##
There is very little difference between this app and the vanilla AngularJS todo app in how AngularJS is used.
The only significant difference is that dependency injection is done via annotated constructors, which allows minification of JavaScript.
It's definitely possible to convert the vanillajs todo app into TypeScript, but TypeScript's benefits are more obvious with a *full blown framework and project structure*.
[AngularJS](http://docs.angularjs.org/)
[documentation](http://docs.angularjs.org/guide/),
[reference](http://docs.angularjs.org/api/) and
[tutorials](http://docs.angularjs.org/tutorial)
are worth reading in detail.
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/index.html 0 → 100644
View file @ 255cb2d9
<!doctype html>
<html lang="en" ng-app="todomvc">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AngularJS + Typescript - TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.css">
<style>[ng-cloak] {display: none}</style>
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<section id="todoapp" ng-controller="todoCtrl">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneCount">Clear completed ({{doneCount}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo.</p>
<p>Credits:
<a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a>
<a href="http://igorminar.com">Igor Minar</a> and
<a href="http://zamboch.blogspot.com">Pavel Savara</a>
</p>
</footer>
<script src="../../../assets/base.js"></script>
<script src="js/libs/angular/angular.min.js"></script>
<script src="js/models/TodoItem.js"></script>
<script src="js/controllers/TodoCtrl.js"></script>
<script src="js/services/TodoStorage.js"></script>
<script src="js/directives/TodoFocus.js"></script>
<script src="js/directives/TodoBlur.js"></script>
<script src="js/Application.js"></script>
</body>
</html>
labs/architecture-examples/angularjs_typescript/js/Application.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
var todomvc = angular.module('todomvc', []).controller('todoCtrl', todos.TodoCtrl.prototype.injection()).directive('todoBlur', todos.TodoBlur.prototype.injection()).directive('todoFocus', todos.TodoFocus.prototype.injection()).service('todoStorage', todos.TodoStorage.prototype.injection());
})(todos || (todos = {}));
//@ sourceMappingURL=Application.js.map
labs/architecture-examples/angularjs_typescript/js/Application.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"Application.js","sources":["Application.ts"],"names":["todos"],"mappings":"AAAA,IAOO,KAAK;AAQX,CARD,UAAO,KAAK;IACRA,YAAaA;IAEbA,IAAIA,OAAOA,GAAGA,OAAOA,CAACA,MAAMA,CAACA,SAASA,EAAEA,EAAEA,CAACA,CAClCA,UAAUA,CAACA,UAAUA,EAAEA,cAAQA,CAACA,SAASA,CAACA,SAASA,EAAEA,CAACA,CACtDA,SAASA,CAACA,UAAUA,EAAEA,cAAQA,CAACA,SAASA,CAACA,SAASA,EAAEA,CAACA,CACrDA,SAASA,CAACA,WAAWA,EAAEA,eAASA,CAACA,SAASA,CAACA,SAASA,EAAEA,CAACA,CACvDA,OAAOA,CAACA,aAAaA,EAAEA,iBAAWA,CAACA,SAASA,CAACA,SAASA,EAAEA,CAACA,CAACA;AACvEA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/Application.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='_all.ts' />
/**
* The main TodoMVC app module.
*
* @type {angular.Module}
*/
module todos {
'use strict';
var todomvc = angular.module('todomvc', [])
.controller('todoCtrl', TodoCtrl.prototype.injection())
.directive('todoBlur', TodoBlur.prototype.injection())
.directive('todoFocus', TodoFocus.prototype.injection())
.service('todoStorage', TodoStorage.prototype.injection());
}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/_all.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='libs/jquery-1.8.d.ts' />
/// <reference path='libs/angular-1.0.d.ts' />
/// <reference path='models/TodoItem.ts' />
/// <reference path='interfaces/ITodoScope.ts' />
/// <reference path='interfaces/ITodoStorage.ts' />
/// <reference path='directives/TodoFocus.ts' />
/// <reference path='directives/TodoBlur.ts' />
/// <reference path='services/TodoStorage.ts' />
/// <reference path='controllers/TodoCtrl.ts' />
/// <reference path='Application.ts' />
labs/architecture-examples/angularjs_typescript/js/controllers/TodoCtrl.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
var TodoCtrl = (function () {
function TodoCtrl($scope, $location, todoStorage, filterFilter) {
this.$scope = $scope;
this.$location = $location;
this.todoStorage = todoStorage;
this.filterFilter = filterFilter;
var _this = this;
this.todos = $scope.todos = todoStorage.get();
$scope.newTodo = '';
$scope.editedTodo = null;
$scope.addTodo = function () {
return _this.addTodo();
};
$scope.editTodo = function (todoItem) {
return _this.editTodo(todoItem);
};
$scope.doneEditing = function (todoItem) {
return _this.doneEditing(todoItem);
};
$scope.removeTodo = function (todoItem) {
return _this.removeTodo(todoItem);
};
$scope.clearDoneTodos = function () {
return _this.clearDoneTodos();
};
$scope.markAll = function (completed) {
return _this.markAll(completed);
};
$scope.$watch('todos', function () {
return _this.onTodos();
}, true);
$scope.$watch('location.path()', function (path) {
return _this.onPath(path);
});
if($location.path() === '') {
$location.path('/');
}
$scope.location = $location;
}
TodoCtrl.prototype.injection = function () {
return [
'$scope',
'$location',
'todoStorage',
'filterFilter',
TodoCtrl
];
};
TodoCtrl.prototype.onPath = function (path) {
this.$scope.statusFilter = (path == '/active') ? {
completed: false
} : (path == '/completed') ? {
completed: true
} : null;
};
TodoCtrl.prototype.onTodos = function () {
this.$scope.remainingCount = this.filterFilter(this.todos, {
completed: false
}).length;
this.$scope.doneCount = this.todos.length - this.$scope.remainingCount;
this.$scope.allChecked = !this.$scope.remainingCount;
this.todoStorage.put(this.todos);
};
TodoCtrl.prototype.addTodo = function () {
if(!this.$scope.newTodo.length) {
return;
}
this.todos.push(new todos.TodoItem(this.$scope.newTodo, false));
this.$scope.newTodo = '';
};
TodoCtrl.prototype.editTodo = function (todoItem) {
this.$scope.editedTodo = todoItem;
};
TodoCtrl.prototype.doneEditing = function (todoItem) {
this.$scope.editedTodo = null;
if(!todoItem.title) {
this.$scope.removeTodo(todoItem);
}
};
TodoCtrl.prototype.removeTodo = function (todoItem) {
this.todos.splice(this.todos.indexOf(todoItem), 1);
};
TodoCtrl.prototype.clearDoneTodos = function () {
this.$scope.todos = this.todos = this.todos.filter(function (todoItem) {
return !todoItem.completed;
});
};
TodoCtrl.prototype.markAll = function (completed) {
this.todos.forEach(function (todoItem) {
todoItem.completed = completed;
});
};
return TodoCtrl;
})();
todos.TodoCtrl = TodoCtrl;
})(todos || (todos = {}));
//@ sourceMappingURL=TodoCtrl.js.map
labs/architecture-examples/angularjs_typescript/js/controllers/TodoCtrl.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"TodoCtrl.js","sources":["TodoCtrl.ts"],"names":["todos","todos.TodoCtrl","todos.TodoCtrl.constructor","todos.TodoCtrl.constructor.addTodo","todos.TodoCtrl.constructor.editTodo","todos.TodoCtrl.constructor.doneEditing","todos.TodoCtrl.constructor.removeTodo","todos.TodoCtrl.constructor.clearDoneTodos","todos.TodoCtrl.constructor.markAll","","","todos.TodoCtrl.injection","todos.TodoCtrl.onPath","todos.TodoCtrl.onTodos","todos.TodoCtrl.addTodo","todos.TodoCtrl.editTodo","todos.TodoCtrl.doneEditing","todos.TodoCtrl.removeTodo","todos.TodoCtrl.clearDoneTodos","","todos.TodoCtrl.markAll",""],"mappings":"AAAA,IAEO,KAAK;AA6GX,CA7GD,UAAO,KAAK;IACRA,YAAaA;IAObA;QAmBIC,SAnBSA,QAAQA,CAoBbA,MAA0BA,EAC1BA,SAAsCA,EACtCA,WAAiCA,EACjCA,YAAoBA;YAHpBC,WAAcA,GAANA,MAAMA;AAAYA,YAC1BA,cAAiBA,GAATA,SAASA;AAAqBA,YACtCA,gBAAmBA,GAAXA,WAAWA;AAAcA,YACjCA,iBAAoBA,GAAZA,YAAYA;AAAAA,YAJxBA,iBA2BCA;YArBGA,IAAIA,CAACA,KAAKA,GAAGA,MAAMA,CAACA,KAAKA,GAAGA,WAAWA,CAACA,GAAGA,EAAEA;YAE7CA,MAAMA,CAACA,OAAOA,GAAGA,EAAEA;YACnBA,MAAMA,CAACA,UAAUA,GAAGA,IAAIA;YAIxBA,MAAMA,CAACA,OAAOA,GAAGA;gBAAMC,OAAAA,KAAIA,CAACA,OAAOA,EAAEA,CAAAA;YAAdA,CAAcA;YACrCD,MAAMA,CAACA,QAAQA,GAAGA,UAACA,QAASA;gBAAIE,OAAAA,KAAIA,CAACA,QAAQA,CAACA,QAAQA,CAACA,CAAAA;YAAvBA,CAAuBA;YACvDF,MAAMA,CAACA,WAAWA,GAAGA,UAACA,QAASA;gBAAIG,OAAAA,KAAIA,CAACA,WAAWA,CAACA,QAAQA,CAACA,CAAAA;YAA1BA,CAA0BA;YAC7DH,MAAMA,CAACA,UAAUA,GAAGA,UAACA,QAASA;gBAAII,OAAAA,KAAIA,CAACA,UAAUA,CAACA,QAAQA,CAACA,CAAAA;YAAzBA,CAAyBA;YAC3DJ,MAAMA,CAACA,cAAcA,GAAGA;gBAAMK,OAAAA,KAAIA,CAACA,cAAcA,EAAEA,CAAAA;YAArBA,CAAqBA;YACnDL,MAAMA,CAACA,OAAOA,GAAGA,UAACA,SAAUA;gBAAIM,OAAAA,KAAIA,CAACA,OAAOA,CAACA,SAASA,CAACA,CAAAA;YAAvBA,CAAuBA;YAIvDN,MAAMA,CAACA,MAAMA,CAACA,OAAOA,EAAEA;gBAAMO,OAAAA,KAAIA,CAACA,OAAOA,EAAEA,CAAAA;YAAdA,CAAcA,EAAEP,IAAIA,CAACA;YAClDA,MAAMA,CAACA,MAAMA,CAACA,iBAAiBA,EAAEA,UAACA,IAAKA;gBAAIQ,OAAAA,KAAIA,CAACA,MAAMA,CAACA,IAAIA,CAACA,CAAAA;YAAjBA,CAAiBA,CAACR;YAE7DA,GAAIA,SAASA,CAACA,IAAIA,EAAEA,KAAKA,EAAEA,CAACA;gBAACA,SAASA,CAACA,IAAIA,CAACA,GAAGA,CAACA;aAACA;YACjDA,MAAMA,CAACA,QAAQA,GAAGA,SAASA;QAC/BA,CAACA;QAvCDD,+BAAAA;YACIU,OAAOA;gBACHA,QAAQA;gBACRA,WAAWA;gBACXA,aAAaA;gBACbA,cAAcA;gBACdA,QAAQA;aACXA,CAAAA;QACLA,CAACA;QAiCDV,4BAAAA,UAAOA,IAAYA;YACfW,IAAIA,CAACA,MAAMA,CAACA,YAAYA,GACpBA,CAACA,IAAIA,IAAIA,SAASA,IACZA;gBAAEA,SAASA,EAAEA,KAAKA;aAAEA,GACpBA,CAACA,IAAIA,IAAIA,YAAYA,IACjBA;gBAAEA,SAASA,EAAEA,IAAIA;aAAEA,GACnBA,IAAIA;QACtBA,CAACA;QAEDX,6BAAAA;YACIY,IAAIA,CAACA,MAAMA,CAACA,cAAcA,GAAGA,IAAIA,CAACA,YAAYA,CAACA,IAAIA,CAACA,KAAKA,EAAEA;gBAAEA,SAASA,EAAEA,KAAKA;aAAEA,CAACA,CAACA,MAAMA;YACvFA,IAAIA,CAACA,MAAMA,CAACA,SAASA,GAAGA,IAAIA,CAACA,KAAKA,CAACA,MAAMA,GAAGA,IAAIA,CAACA,MAAMA,CAACA,cAAcA;YACtEA,IAAIA,CAACA,MAAMA,CAACA,UAAUA,GAAGA,CAACA,IAAIA,CAACA,MAAMA,CAACA,cAAcA;YACpDA,IAAIA,CAACA,WAAWA,CAACA,GAAGA,CAACA,IAAIA,CAACA,KAAKA,CAACA;QACpCA,CAACA;QAEDZ,6BAAAA;YACIa,GAAIA,CAACA,IAAIA,CAACA,MAAMA,CAACA,OAAOA,CAACA,MAAMA,CAACA;gBAC5BA,OAAOA;aACVA;YAEDA,IAAIA,CAACA,KAAKA,CAACA,IAAIA,CAACA,IAAIA,cAAQA,CAACA,IAAIA,CAACA,MAAMA,CAACA,OAAOA,EAAEA,KAAKA,CAACA,CAACA;YACzDA,IAAIA,CAACA,MAAMA,CAACA,OAAOA,GAAGA,EAAEA;QAC5BA,CAACA;QAAAb,8BAAAA,UAEQA,QAAkBA;YACvBc,IAAIA,CAACA,MAAMA,CAACA,UAAUA,GAAGA,QAAQA;QACrCA,CAACA;QAAAd,iCAAAA,UAEWA,QAAkBA;YAC1Be,IAAIA,CAACA,MAAMA,CAACA,UAAUA,GAAGA,IAAIA;YAC7BA,GAAIA,CAACA,QAAQA,CAACA,KAAKA,CAACA;gBAChBA,IAAIA,CAACA,MAAMA,CAACA,UAAUA,CAACA,QAAQA,CAACA;aACnCA;QACLA,CAACA;QAAAf,gCAAAA,UAEUA,QAAkBA;YACzBgB,IAAIA,CAACA,KAAKA,CAACA,MAAMA,CAACA,IAAIA,CAACA,KAAKA,CAACA,OAAOA,CAACA,QAAQA,CAACA,EAAEA,CAACA,CAACA;QACtDA,CAACA;QAAAhB,oCAAAA;YAGGiB,IAAIA,CAACA,MAAMA,CAACA,KAAKA,GAAGA,IAAIA,CAACA,KAAKA,GAAGA,IAAIA,CAACA,KAAKA,CAACA,MAAMA,CAACA,UAACA,QAASA;gBACzDC,OAAOA,CAACA,QAAQA,CAACA,SAASA,CAACA;YAC/BA,CAACA,CAACD;QACNA,CAACA;QAAAjB,6BAAAA,UAEOA,SAAeA;YACnBmB,IAAIA,CAACA,KAAKA,CAACA,OAAOA,CAACA,UAACA,QAAkBA;gBAClCC,QAAQA,CAACA,SAASA,GAAGA,SAASA;YAClCA,CAACA,CAACD;QACNA,CAACA;QACLnB;AAACA,IAADA,CAACA,IAAAD;IAnGDA,0BAmGCA,IAAAA;AAELA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/controllers/TodoCtrl.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='../_all.ts' />
module todos {
'use strict';
/**
* The main controller for the app. The controller:
* - retrieves and persist the model via the todoStorage service
* - exposes the model to the template and provides event handlers
*/
export class TodoCtrl {
private todos: TodoItem[];
// this method is called on prototype during registration into IoC container.
// It provides $injector with information about dependencies to be injected into constructor
// it is better to have it close to the constructor, because the parameters must match in count and type.
public injection(): any[] {
return [
'$scope',
'$location',
'todoStorage',
'filterFilter',
TodoCtrl
]
}
// dependencies are injected via AngularJS $injector
// controller's name is registered in App.ts and invoked from ng-controller attribute in index.html
constructor(
private $scope: ITodoScope,
private $location: ng.ILocationService,
private todoStorage: ITodoStorage,
private filterFilter
) {
this.todos = $scope.todos = todoStorage.get();
$scope.newTodo = '';
$scope.editedTodo = null;
// adding event handlers to the scope, so they could be bound from view/HTML
// these lambdas fix this keyword in JS world
$scope.addTodo = () => this.addTodo();
$scope.editTodo = (todoItem) => this.editTodo(todoItem);
$scope.doneEditing = (todoItem) => this.doneEditing(todoItem);
$scope.removeTodo = (todoItem) => this.removeTodo(todoItem);
$scope.clearDoneTodos = () => this.clearDoneTodos();
$scope.markAll = (completed) => this.markAll(completed);
// watching for events/changes in scope, which are caused by view/user input
// if you subscribe to scope or event with lifetime longer than this controller, make sure you unsubscribe.
$scope.$watch('todos', () => this.onTodos(), true);
$scope.$watch('location.path()', (path) => this.onPath(path))
if ($location.path() === '') $location.path('/');
$scope.location = $location;
}
onPath(path: string) {
this.$scope.statusFilter =
(path == '/active')
? { completed: false }
: (path == '/completed')
? { completed: true }
: null;
}
onTodos() {
this.$scope.remainingCount = this.filterFilter(this.todos, { completed: false }).length;
this.$scope.doneCount = this.todos.length - this.$scope.remainingCount;
this.$scope.allChecked = !this.$scope.remainingCount
this.todoStorage.put(this.todos);
}
addTodo() {
if (!this.$scope.newTodo.length) {
return;
}
this.todos.push(new TodoItem(this.$scope.newTodo, false));
this.$scope.newTodo = '';
};
editTodo(todoItem: TodoItem) {
this.$scope.editedTodo = todoItem;
};
doneEditing(todoItem: TodoItem) {
this.$scope.editedTodo = null;
if (!todoItem.title) {
this.$scope.removeTodo(todoItem);
}
};
removeTodo(todoItem: TodoItem) {
this.todos.splice(this.todos.indexOf(todoItem), 1);
};
clearDoneTodos() {
this.$scope.todos = this.todos = this.todos.filter((todoItem) => {
return !todoItem.completed;
});
};
markAll(completed: bool) {
this.todos.forEach((todoItem: TodoItem) => {
todoItem.completed = completed;
});
};
}
}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/directives/TodoBlur.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
var TodoBlur = (function () {
function TodoBlur() {
var _this = this;
this.link = function ($scope, element, attributes) {
return _this.linkFn($scope, element, attributes);
};
}
TodoBlur.prototype.injection = function () {
return [
function () {
return new TodoBlur();
} ];
};
TodoBlur.prototype.linkFn = function ($scope, element, attributes) {
element.bind('blur', function () {
$scope.$apply(attributes.todoBlur);
});
};
return TodoBlur;
})();
todos.TodoBlur = TodoBlur;
})(todos || (todos = {}));
//@ sourceMappingURL=TodoBlur.js.map
labs/architecture-examples/angularjs_typescript/js/directives/TodoBlur.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"TodoBlur.js","sources":["TodoBlur.ts"],"names":["todos","todos.TodoBlur","todos.TodoBlur.constructor","todos.TodoBlur.constructor.link","todos.TodoBlur.injection","","todos.TodoBlur.linkFn",""],"mappings":"AAAA,IAEO,KAAK;AAyBX,CAzBD,UAAO,KAAK;IACRA,YAAaA;IAKbA;QASIC,SATSA,QAAQA;YASjBC,iBAECA;YADGA,IAAIA,CAACA,IAAIA,GAAGA,UAACA,MAAMA,EAAEA,OAAOA,EAAEA,UAAWA;gBAAIC,OAAAA,KAAIA,CAACA,MAAMA,CAACA,MAAMA,EAAEA,OAAOA,EAAEA,UAAUA,CAACA,CAAAA;YAAxCA,CAAwCA;QACzFD,CAACA;QARDD,+BAAAA;YACIG,OAAOA;gBACHA;oBAAQC,OAAOA,IAAIA,QAAQA,EAAEA,CAACA;gBAACA,CAACA,aACnCD,CAAAA;QACLA,CAACA;QAMDH,4BAAAA,UAAOA,MAAiBA,EAAEA,OAAeA,EAAEA,UAAeA;YACtDK,OAAOA,CAACA,IAAIA,CAACA,MAAMA,EAAEA;gBACjBC,MAAMA,CAACA,MAAMA,CAACA,UAAUA,CAACA,QAAQA,CAACA;YACtCA,CAACA,CAACD;QACNA,CAACA;QACLL;AAACA,IAADA,CAACA,IAAAD;IAlBDA,0BAkBCA,IAAAA;AACLA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/directives/TodoBlur.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='../_all.ts' />
module todos {
'use strict';
/**
* Directive that executes an expression when the element it is applied to loses focus.
*/
export class TodoBlur {
public link: ($scope: ng.IScope, element: JQuery, attributes: any) => any;
public injection(): any[] {
return [
() => { return new TodoBlur(); }
]
}
constructor() {
this.link = ($scope, element, attributes) => this.linkFn($scope, element, attributes);
}
linkFn($scope: ng.IScope, element: JQuery, attributes: any): any {
element.bind('blur', () => {
$scope.$apply(attributes.todoBlur);
});
};
}
}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/directives/TodoFocus.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
var TodoFocus = (function () {
function TodoFocus($timeout) {
this.$timeout = $timeout;
var _this = this;
this.link = function ($scope, element, attributes) {
return _this.linkFn($scope, element, attributes);
};
}
TodoFocus.prototype.injection = function () {
return [
'$timeout',
function ($timeout) {
return new TodoFocus($timeout);
} ];
};
TodoFocus.prototype.linkFn = function ($scope, element, attributes) {
var _this = this;
$scope.$watch(attributes.todoFocus, function (newval) {
if(newval) {
_this.$timeout(function () {
element[0].focus();
}, 0, false);
}
});
};
return TodoFocus;
})();
todos.TodoFocus = TodoFocus;
})(todos || (todos = {}));
//@ sourceMappingURL=TodoFocus.js.map
labs/architecture-examples/angularjs_typescript/js/directives/TodoFocus.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"TodoFocus.js","sources":["TodoFocus.ts"],"names":["todos","todos.TodoFocus","todos.TodoFocus.constructor","todos.TodoFocus.constructor.link","todos.TodoFocus.injection","","todos.TodoFocus.linkFn","",""],"mappings":"AAAA,IAEO,KAAK;AA+BX,CA/BD,UAAO,KAAK;IACRA,YAAaA;IAKbA;QAWIC,SAXSA,SAASA,CAWNA,QAAoCA;YAApCC,aAAgBA,GAARA,QAAQA;AAAoBA,YAAhDA,iBAECA;YADGA,IAAIA,CAACA,IAAIA,GAAGA,UAACA,MAAMA,EAAEA,OAAOA,EAAEA,UAAWA;gBAAIC,OAAAA,KAAIA,CAACA,MAAMA,CAACA,MAAMA,EAAEA,OAAOA,EAAEA,UAAUA,CAACA,CAAAA;YAAxCA,CAAwCA;QACzFD,CAACA;QATDD,gCAAAA;YACIG,OAAOA;gBACHA,UAAUA;gBACVA,UAACA,QAASA;oBAAMC,OAAOA,IAAIA,SAASA,CAACA,QAAQA,CAACA,CAACA;gBAACA,CAACA,aACpDD,CAAAA;QACLA,CAACA;QAMDH,6BAAAA,UAAOA,MAAiBA,EAAEA,OAAeA,EAAEA,UAAeA;YAA1DK,iBAQCA;YAPGA,MAAMA,CAACA,MAAMA,CAACA,UAAUA,CAACA,SAASA,EAAEA,UAACA,MAAOA;gBACxCC,GAAIA,MAAMA,CAACA;oBACPA,KAAIA,CAACA,QAAQA,CAACA;wBACVC,OAAOA,CAACA,CAACA,CAACA,CAACA,KAAKA,EAAEA;oBACtBA,CAACA,EAAED,CAACA,EAAEA,KAAKA,CAACA;iBACfA;YACLA,CAACA,CAACD;QACNA,CAACA;QACLL;AAACA,IAADA,CAACA,IAAAD;IAxBDA,4BAwBCA,IAAAA;AACLA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/directives/TodoFocus.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='../_all.ts' />
module todos {
'use strict';
/**
* Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
*/
export class TodoFocus {
public link: ($scope: ng.IScope, element: JQuery, attributes: any) => any;
public injection(): any[] {
return [
'$timeout',
($timeout) => { return new TodoFocus($timeout); }
]
}
constructor(private $timeout: ng.ITimeoutService) {
this.link = ($scope, element, attributes) => this.linkFn($scope, element, attributes);
}
linkFn($scope: ng.IScope, element: JQuery, attributes: any): any {
$scope.$watch(attributes.todoFocus, (newval) => {
if (newval) {
this.$timeout(() => {
element[0].focus();
}, 0, false);
}
});
};
}
}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoScope.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
})(todos || (todos = {}));
//@ sourceMappingURL=ITodoScope.js.map
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoScope.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"ITodoScope.js","sources":["ITodoScope.ts"],"names":["todos"],"mappings":"AAAA,IAEO,KAAK;AAoBX,CApBD,UAAO,KAAK;IACRA,YAAaA;AAmBjBA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoScope.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='../_all.ts' />
module todos {
'use strict';
export interface ITodoScope extends ng.IScope {
todos: TodoItem[];
newTodo: string;
editedTodo: TodoItem;
remainingCount: number;
doneCount: number;
allChecked: bool;
statusFilter: { completed: bool; };
location: ng.ILocationService;
addTodo: () => void;
editTodo: (todoItem: TodoItem) => void;
doneEditing: (todoItem: TodoItem) => void;
removeTodo: (todoItem: TodoItem) => void;
clearDoneTodos: () => void;
markAll: (completed: bool) => void;
}
}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoStorage.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
})(todos || (todos = {}));
//@ sourceMappingURL=ITodoStorage.js.map
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoStorage.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"ITodoStorage.js","sources":["ITodoStorage.ts"],"names":["todos"],"mappings":"AAAA,IAEO,KAAK;AAOX,CAPD,UAAO,KAAK;IACRA,YAAaA;AAMjBA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoStorage.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='../_all.ts' />
module todos {
'use strict';
export interface ITodoStorage {
get (): TodoItem[];
put(todos: TodoItem[]);
}
}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/models/TodoItem.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
var TodoItem = (function () {
function TodoItem(title, completed) {
this.title = title;
this.completed = completed;
}
return TodoItem;
})();
todos.TodoItem = TodoItem;
})(todos || (todos = {}));
//@ sourceMappingURL=TodoItem.js.map
labs/architecture-examples/angularjs_typescript/js/models/TodoItem.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"TodoItem.js","sources":["TodoItem.ts"],"names":["todos","todos.TodoItem","todos.TodoItem.constructor"],"mappings":"AAAA,IAEO,KAAK;AASX,CATD,UAAO,KAAK;IACRA,YAAaA;IAEbA;QACIC,SADSA,QAAQA,CAEbA,KAAoBA,EACpBA,SAAsBA;YADtBC,UAAYA,GAALA,KAAKA;AAAQA,YACpBA,cAAgBA,GAATA,SAASA;AAAMA,QAClBA,CAACA;QACbD;AAACA,IAADA,CAACA,IAAAD;IALDA,0BAKCA,IAAAA;AACLA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/models/TodoItem.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='../_all.ts' />
module todos {
'use strict';
export class TodoItem {
constructor(
public title: string,
public completed: bool
) { }
}
}
labs/architecture-examples/angularjs_typescript/js/services/TodoStorage.js 0 → 100644
View file @ 255cb2d9
var todos;
(function (todos) {
'use strict';
var TodoStorage = (function () {
function TodoStorage() {
this.STORAGE_ID = 'todos-angularjs-typescript';
}
TodoStorage.prototype.injection = function () {
return [
TodoStorage
];
};
TodoStorage.prototype.get = function () {
return JSON.parse(localStorage.getItem(this.STORAGE_ID) || '[]');
};
TodoStorage.prototype.put = function (todos) {
localStorage.setItem(this.STORAGE_ID, JSON.stringify(todos));
};
return TodoStorage;
})();
todos.TodoStorage = TodoStorage;
})(todos || (todos = {}));
//@ sourceMappingURL=TodoStorage.js.map
labs/architecture-examples/angularjs_typescript/js/services/TodoStorage.js.map 0 → 100644
View file @ 255cb2d9
{"version":3,"file":"TodoStorage.js","sources":["TodoStorage.ts"],"names":["todos","todos.TodoStorage","todos.TodoStorage.constructor","todos.TodoStorage.injection","todos.TodoStorage.get","todos.TodoStorage.put"],"mappings":"AAAA,IAEO,KAAK;AA2BX,CA3BD,UAAO,KAAK;IACRA,YAAaA;IAKbA;QAQIC,SARSA,WAAWA;YAWpBC,KAAAA,UAAUA,GAAGA,4BAA4BA,CAAAA;QAFzCA,CAACA;QAPDD,kCAAAA;YACIE,OAAOA;gBACHA,WAAWA;aACdA,CAAAA;QACLA,CAACA;QAODF,4BAAAA;YACIG,OAAOA,IAAIA,CAACA,KAAKA,CAACA,YAAYA,CAACA,OAAOA,CAACA,IAAIA,CAACA,UAAUA,CAACA,IAAIA,IAAIA,CAACA,CAACA;QACrEA,CAACA;QAEDH,4BAAAA,UAAIA,KAAiBA;YACjBI,YAAYA,CAACA,OAAOA,CAACA,IAAIA,CAACA,UAAUA,EAAEA,IAAIA,CAACA,SAASA,CAACA,KAAKA,CAACA,CAACA;QAChEA,CAACA;QACLJ;AAACA,IAADA,CAACA,IAAAD;IApBDA,gCAoBCA,IAAAA;AACLA,CAACA;AAAA"}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/js/services/TodoStorage.ts 0 → 100644
View file @ 255cb2d9
/// <reference path='../_all.ts' />
module todos {
'use strict';
/**
* Services that persists and retrieves TODOs from localStorage.
*/
export class TodoStorage implements ITodoStorage {
public injection(): any[] {
return [
TodoStorage
]
}
constructor() {
}
STORAGE_ID = 'todos-angularjs-typescript';
get (): TodoItem[] {
return JSON.parse(localStorage.getItem(this.STORAGE_ID) || '[]');
}
put(todos: TodoItem[]) {
localStorage.setItem(this.STORAGE_ID, JSON.stringify(todos));
}
}
}
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/todo.csproj 0 → 100644
View file @ 255cb2d9
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
<Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
<ProductVersion>
</ProductVersion>
<SchemaVersion>2.0</SchemaVersion>
<ProjectGuid>{0A2B594A-1E06-46A8-A3B8-4E58C1071815}</ProjectGuid>
<ProjectTypeGuids>{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>
<OutputType>Library</OutputType>
<AppDesignerFolder>Properties</AppDesignerFolder>
<RootNamespace>todo</RootNamespace>
<AssemblyName>todo</AssemblyName>
<TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
<UseIISExpress>true</UseIISExpress>
<IISExpressSSLPort />
<IISExpressAnonymousAuthentication />
<IISExpressWindowsAuthentication />
<IISExpressUseClassicPipelineMode />
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
<DebugSymbols>true</DebugSymbols>
<DebugType>full</DebugType>
<Optimize>false</Optimize>
<OutputPath>bin\</OutputPath>
<DefineConstants>DEBUG;TRACE</DefineConstants>
<ErrorReport>prompt</ErrorReport>
<WarningLevel>4</WarningLevel>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
<DebugType>pdbonly</DebugType>
<Optimize>true</Optimize>
<OutputPath>bin\</OutputPath>
<DefineConstants>TRACE</DefineConstants>
<ErrorReport>prompt</ErrorReport>
<WarningLevel>4</WarningLevel>
</PropertyGroup>
<PropertyGroup>
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
</PropertyGroup>
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
<Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" Condition="false" />
<ProjectExtensions>
<VisualStudio>
<FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
<WebProjectProperties>
<UseIIS>True</UseIIS>
<AutoAssignPort>True</AutoAssignPort>
<DevelopmentServerPort>0</DevelopmentServerPort>
<DevelopmentServerVPath>/</DevelopmentServerVPath>
<IISUrl>http://localhost:63825/</IISUrl>
<NTLMAuthentication>False</NTLMAuthentication>
<UseCustomServer>False</UseCustomServer>
<CustomServerUrl>
</CustomServerUrl>
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
</VisualStudio>
</ProjectExtensions>
<PropertyGroup>
<PreBuildEvent>
</PreBuildEvent>
</PropertyGroup>
<ItemGroup>
<Content Include="index.html" />
<Content Include="js\app.js">
<DependentUpon>Application.ts</DependentUpon>
</Content>
<Content Include="js\Application.ts" />
<Content Include="js\controllers\TodoCtrl.js">
<DependentUpon>TodoCtrl.ts</DependentUpon>
</Content>
<Content Include="js\controllers\TodoCtrl.ts" />
<Content Include="js\directives\TodoBlur.js">
<DependentUpon>TodoBlur.ts</DependentUpon>
</Content>
<Content Include="js\directives\TodoBlur.ts" />
<Content Include="js\directives\TodoFocus.js">
<DependentUpon>TodoFocus.ts</DependentUpon>
</Content>
<Content Include="js\directives\TodoFocus.ts" />
<Content Include="js\interfaces\ITodoScope.js">
<DependentUpon>ITodoScope.ts</DependentUpon>
</Content>
<Content Include="js\interfaces\ITodoScope.ts" />
<Content Include="js\interfaces\ITodoStorage.js">
<DependentUpon>ITodoStorage.ts</DependentUpon>
</Content>
<Content Include="js\interfaces\ITodoStorage.ts" />
<Content Include="js\libs\angular-1.0.d.ts" />
<Content Include="js\libs\angular\angular.min.js" />
<Content Include="js\libs\jquery-1.8.d.ts" />
<Content Include="js\models\TodoItem.js">
<DependentUpon>TodoItem.ts</DependentUpon>
</Content>
<Content Include="js\models\TodoItem.ts" />
<Content Include="js\services\TodoStorage.ts" />
<Content Include="js\_all.js">
<DependentUpon>_all.ts</DependentUpon>
</Content>
<Content Include="js\_all.ts" />
</ItemGroup>
<ItemGroup>
<Content Include="ReadMe.md" />
</ItemGroup>
<ItemGroup>
<Content Include="js\directives\TodoBlur.js.map">
<DependentUpon>TodoBlur.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="js\directives\TodoFocus.js.map">
<DependentUpon>TodoFocus.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="js\app.js.map">
<DependentUpon>Application.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="js\controllers\TodoCtrl.js.map">
<DependentUpon>TodoCtrl.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="js\_all.js.map">
<DependentUpon>_all.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="js\models\TodoItem.js.map">
<DependentUpon>TodoItem.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="js\interfaces\ITodoScope.js.map">
<DependentUpon>ITodoScope.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="js\interfaces\ITodoStorage.js.map">
<DependentUpon>ITodoStorage.ts</DependentUpon>
</Content>
</ItemGroup>
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
Other similar extension points exist, see Microsoft.Common.targets.
<Target Name="AfterBuild">
</Target>
-->
</Project>
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/todo.sln 0 → 100644
View file @ 255cb2d9

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio 2012
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "todo", "todo.csproj", "{0A2B594A-1E06-46A8-A3B8-4E58C1071815}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{0A2B594A-1E06-46A8-A3B8-4E58C1071815}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{0A2B594A-1E06-46A8-A3B8-4E58C1071815}.Debug|Any CPU.Build.0 = Debug|Any CPU
{0A2B594A-1E06-46A8-A3B8-4E58C1071815}.Release|Any CPU.ActiveCfg = Release|Any CPU
{0A2B594A-1E06-46A8-A3B8-4E58C1071815}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
EndGlobal
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7