Last active
September 11, 2020 17:46
-
-
Save PatrickJS/634101fec1671ee12b3e to your computer and use it in GitHub Desktop.
TodoService in Angular 2 and Angular 1 both in TypeScript and ES5 https://github.com/AngularClass/angular2-webpack-starter/blob/e6c03b9fd83426d4ac180c0969d08b1aef9cbd2e/src/app/services/TodoService.ts#L20
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// <script src="angular.min.js"></script> | |
(function(name, factory) { | |
// our basic IO module system that stores every module on modules with the "file" namespace | |
// please use something like browserify rather than rolling your own like this | |
window.modules = window.modules || {}; | |
window.require = window.require || function require(name) { return window.modules[name] || window[name]; }; | |
var exports = {}; factory(exports, window.require); | |
window.modules[name] = exports; | |
}('TodoService', function(exports, require) { | |
var angular = require('require'); | |
// We can also make a TodoStore | |
var _todoState = { | |
todos: [ | |
{ value:'finish example', created_at: new Date() }, | |
{ value:'add tests', created_at: new Date() } | |
] | |
}; | |
// Our Todo Service | |
TodoService.$inject = ['todoState']; | |
exports['TodoService'] = function TodoService(state) { | |
this.state = state; | |
} | |
TodoService.prototype.get = function get(type) { | |
return (type) ? this.state[type] : this.state; | |
} | |
TodoService.prototype.add = function add(todo) { | |
this.state.todos.push({ | |
value: todo, | |
created_at: new Date() | |
}); | |
} | |
TodoService.prototype.remove = function remove(index) { | |
this.state.todos.splice(index, 1); | |
} | |
// TodoService | |
// Dependency injection | |
var moduleName = 'app.services.todoservice'; | |
exports['ngModule'] = angular. | |
module(moduleName, []). | |
value('todoState', _todoState). | |
service('TodoService', TodoService) | |
exports['name'] = moduleName; | |
})); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import angular from 'angular'; | |
// Using TypeScript we can define our state interface | |
interface ITodo { | |
value: string; | |
created_at: Date; | |
completed?: boolean; | |
} | |
interface ITodoState { | |
todos: Array<ITodo> | |
} | |
// We can also make a TodoStore | |
var _todoState:ITodoState = { | |
todos: [ | |
{ value:'finish example', created_at: new Date() }, | |
{ value:'add tests', created_at: new Date() } | |
] | |
}; | |
// Our Todo Service | |
export class TodoService { | |
private _state: ITodoState; // we shouldn't access .state directly | |
static $inject = ['todoState']; | |
constructor(state) { | |
this._state = state; | |
} | |
get(type) { | |
return (type) ? this._state[type] : this._state; | |
} | |
add(todo) { | |
this._state.todos.push({ | |
value: todo, | |
created_at: new Date() | |
}); | |
} | |
remove(index) { | |
this._state.todos.splice(index, 1); | |
} | |
}//TodoService | |
var moduleName = 'app.services.todoservice'; | |
export var ngModule = angular. | |
module(moduleName, []). | |
value('todoState', _todoState). | |
service('TodoService', TodoService) | |
export default moduleName; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// <script src="angular2.min.js"></script> | |
(function(name, factory) { | |
// our basic IO module system that stores every module on modules with the "file" namespace | |
// please use something like browserify rather than rolling your own like this | |
window.modules = window.modules || {}; | |
window.require = window.require || function require(name) { return window.modules[name] || window[name]; }; | |
var exports = {}; factory(exports, window.require); | |
window.modules[name] = exports; | |
}('TodoService', function(exports, require) { | |
var ng = require('ng'); | |
var Inject = ng.Inject; | |
var bind = ng.bind; | |
// We can also make a TodoStore | |
var _todoState = { | |
todos: [ | |
{ value:'finish example', created_at: new Date() }, | |
{ value:'add tests', created_at: new Date() } | |
] | |
}; | |
// Our Todo Service | |
var TodoService = exports['TodoService'] = ng. | |
Class({ | |
constructor: [new Inject('todoState'), function(state) { | |
this.state = state; | |
}], | |
get: function(type) { | |
return (type) ? this.state[type] : this.state; | |
}, | |
add: function(todo) { | |
this.state.todos.push({ | |
value: todo, | |
created_at: new Date() | |
}); | |
}, | |
remove: function(index) { | |
this.state.todos.splice(index, 1); | |
} | |
}); | |
// TodoService | |
// Dependency injection | |
var todoInjectables = exports['todoInjectables'] = [ | |
bind('initialTodoState').toValue(_todoState), | |
bind(TodoService).toClass(TodoService), | |
// We only have this to mimic Angular 1's di that is limited only to string tokens. Otherwise we would use `TodoService` class as the token | |
bind('TodoService').toAlias(TodoService) | |
]; | |
})); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {bind, Inject} from 'angular2/di'; | |
// Using TypeScript we can define our state interface | |
interface ITodo { | |
value: string; | |
created_at: Date; | |
completed?: boolean; | |
} | |
interface ITodoState { | |
todos: Array<ITodo> | |
} | |
// We can also make a TodoStore | |
var _todoState:ITodoState = { | |
todos: [ | |
{ value:'finish example', created_at: new Date() }, | |
{ value:'add tests', created_at: new Date() } | |
] | |
}; | |
// Our Todo Service | |
@Injectable() | |
export class TodoService { | |
private _state: ITodoState; // we shouldn't access .state directly | |
constructor(@Inject('todoState') state) { | |
this._state = state; | |
} | |
get(type) { | |
return (type) ? this._state[type] : this._state; | |
} | |
add(todo) { | |
this._state.todos.push({ | |
value: todo, | |
created_at: new Date() | |
}); | |
} | |
remove(index) { | |
this._state.todos.splice(index, 1); | |
} | |
}//TodoService | |
export const todoInjectables = [ | |
bind('todoState').toValue(_todoState), | |
bind(TodoService).toClass(TodoService), | |
// We only have this to mimic Angular 1's di that is limited only to string tokens. Otherwise we would use `TodoService` class as the token | |
bind('TodoService').toAlias(TodoService) | |
]; |
I don't understand why i receive an error..."cannot find module angular2/di"...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Most people use DefinitelyTyped/angular2
Inject is still not a introduced to the
typing
file.As a workaround, I use the awesomeness of TypeScript 😄
Later on, when
Inject
is in thetyping
file I will just remove the lines and put it as an explicit import...