Skip to content

T
todomvc
Commit 815aa07e authored by Pavel Savara's avatar Pavel Savara
Browse files
Options

Angular+TypeScript

parent 45e277d8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1856 additions and 0 deletions
labs/architecture-examples/angularjs_typescript/.gitignore 0 → 100644
View file @ 815aa07e
*.suo
*.user
*.js
*.map
/bin
/obj
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/ReadMe.md 0 → 100644
View file @ 815aa07e
TypeScript
http://go.microsoft.com/fwlink/?LinkID=266563
http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
NodeJs http://nodejs.org/
npm install -g typescript
run compileTs.cmd
I used https://github.com/borisyankov/DefinitelyTyped for Angular and JQuery interface definitions.
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/compileTs.cmd 0 → 100644
View file @ 815aa07e
@echo off
tsc -sourcemap js/_all.ts
\ No newline at end of file
labs/architecture-examples/angularjs_typescript/index.html 0 → 100644
View file @ 815aa07e
<!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 - 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> and
<a href="http://igorminar.com">Igor Minar</a>
</p>
</footer>
<script src="../../../assets/base.js"></script>
<script src="js/libs/angular/angular.min.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/app.js"></script>
</body>
</html>
labs/architecture-examples/angularjs_typescript/js/_all.ts 0 → 100644
View file @ 815aa07e
/// <reference path='app.ts' />
/// <reference path='models/TodoItem.js' />
/// <reference path='interfaces/ITodoScope.js' />
/// <reference path='interfaces/ITodoStorage.js' />
/// <reference path='directives/TodoFocus.ts' />
/// <reference path='directives/TodoBlur.ts' />
/// <reference path='services/TodoStorage.ts' />
/// <reference path='controllers/TodoCtrl.ts' />
labs/architecture-examples/angularjs_typescript/js/app.ts 0 → 100644
View file @ 815aa07e
/// <reference path='libs/angular-1.0.d.ts' />
/// <reference path='directives/TodoFocus.ts' />
/// <reference path='directives/TodoBlur.ts' />
/// <reference path='controllers/TodoCtrl.ts' />
/// <reference path='services/TodoStorage.ts' />
'use strict';
/**
* The main TodoMVC app module.
*
* @type {angular.Module}
*/
var todomvc = angular.module('todomvc', [])
.controller('todoCtrl', TodoCtrl)
.directive('todoBlur', function () { return new TodoBlur(); })
.directive('todoFocus', function ($timeout: ng.ITimeoutService) { return new TodoFocus($timeout); })
.service('todoStorage', TodoStorage)
;
labs/architecture-examples/angularjs_typescript/js/controllers/TodoCtrl.ts 0 → 100644
View file @ 815aa07e
/// <reference path='../libs/angular-1.0.d.ts' />
/// <reference path='../services/TodoStorage.ts' />
/// <reference path='../models/TodoItem.ts' />
/// <reference path='../interfaces/ITodoStorage.ts' />
/// <reference path='../interfaces/ITodoScope.ts' />
'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
*/
class TodoCtrl {
private todos;
constructor (private $scope: ITodoScope, $location: ng.ILocationService, private todoStorage: ITodoStorage, private filterFilter) {
this.todos = $scope.todos = todoStorage.get();
$scope.newTodo = "";
$scope.editedTodo = null;
$scope.addTodo = () =>this.addTodo();
$scope.editTodo = (t) =>this.editTodo(t);
$scope.doneEditing = (t) =>this.doneEditing(t);
$scope.removeTodo = (t) =>this.removeTodo(t);
$scope.clearDoneTodos = () =>this.clearDoneTodos();
$scope.markAll = (d) =>this.markAll(d);
$scope.$watch('todos', () =>this.onTodos(), true);
$scope.$watch('location.path()', (path) =>this.onPath(path));
if ($location.path() === '') $location.path('/');
$scope.location = $location;
}
onPath(path) {
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({
title: this.$scope.newTodo,
completed: false
});
this.$scope.newTodo = '';
};
editTodo(todo: TodoItem) {
this.$scope.editedTodo = todo;
};
doneEditing(todo: TodoItem) {
this.$scope.editedTodo = null;
if (!todo.title) {
this.$scope.removeTodo(todo);
}
};
removeTodo(todo: TodoItem) {
this.todos.splice(this.todos.indexOf(todo), 1);
};
clearDoneTodos() {
this.$scope.todos = this.todos = this.todos.filter(function (val) {
return !val.completed;
});
};
markAll(done: bool) {
this.todos.forEach(function (todo: TodoItem) {
todo.completed = done;
});
};
}
labs/architecture-examples/angularjs_typescript/js/directives/TodoBlur.ts 0 → 100644
View file @ 815aa07e
/// <reference path='../libs/angular-1.0.d.ts' />
'use strict';
/**
* Directive that executes an expression when the element it is applied to loses focus.
*/
class TodoBlur {
public link: ($scope: ng.IScope, elem: JQuery, attrs: any) => any;
constructor () {
this.link = (s, e, a) =>this.linkFn(s, e, a);
}
linkFn($scope: ng.IScope, elem: JQuery, attrs: any): any {
elem.bind('blur', function () {
$scope.$apply(attrs.todoBlur);
});
};
}
labs/architecture-examples/angularjs_typescript/js/directives/TodoFocus.ts 0 → 100644
View file @ 815aa07e
/// <reference path='../libs/angular-1.0.d.ts' />
'use strict';
/**
* Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
*/
class TodoFocus {
public link: ($scope: ng.IScope, elem: JQuery, attrs: any) => any;
constructor (private $timeout: ng.ITimeoutService) {
this.link = (s, e, a) =>this.linkFn(s, e, a);
}
linkFn($scope: ng.IScope, elem: JQuery, attrs: any): any {
$scope.$watch(attrs.todoFocus, function (newval) {
if (newval) {
this.$timeout(function () {
elem[0].focus();
}, 0, false);
}
});
};
}
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoScope.ts 0 → 100644
View file @ 815aa07e
/// <reference path='../libs/angular-1.0.d.ts' />
/// <reference path='../models/TodoItem.ts' />
'use strict';
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: (item: TodoItem) =>void;
doneEditing: (item: TodoItem) =>void;
removeTodo: (item: TodoItem) =>void;
clearDoneTodos: () =>void;
markAll: (done: bool) =>void;
}
labs/architecture-examples/angularjs_typescript/js/interfaces/ITodoStorage.ts 0 → 100644
View file @ 815aa07e
/// <reference path='../libs/angular-1.0.d.ts' />
/// <reference path='../models/TodoItem.ts' />
'use strict';
interface ITodoStorage {
get(): TodoItem[];
put(todos: TodoItem[]);
}
labs/architecture-examples/angularjs_typescript/js/models/TodoItem.ts 0 → 100644
View file @ 815aa07e
/// <reference path='../libs/angular-1.0.d.ts' />
'use strict';
class TodoItem {
public completed: bool;
public title: string;
}
labs/architecture-examples/angularjs_typescript/js/services/TodoStorage.ts 0 → 100644
View file @ 815aa07e
/// <reference path='../libs/angular-1.0.d.ts' />
/// <reference path='../models/TodoItem.js' />
/// <reference path='../interfaces/ITodoStorage.js' />
'use strict';
/**
* Services that persists and retrieves TODOs from localStorage.
*/
class TodoStorage implements ITodoStorage {
STORAGE_ID = 'todos-angularjs-requirejs';
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 @ 815aa07e
<?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>app.ts</DependentUpon>
</Content>
<Content Include="js\app.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>app.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="compileTs.cmd" />
</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 @ 815aa07e

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