Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// <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;
}));
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;
// <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)
];
}));
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)
];
@PatrickJS

This comment has been minimized.

Copy link
Owner Author

@PatrickJS PatrickJS commented May 25, 2015

@shlomiassaf

This comment has been minimized.

Copy link

@shlomiassaf shlomiassaf commented May 29, 2015

Most people use DefinitelyTyped/angular2
Inject is still not a introduced to the typing file.

As a workaround, I use the awesomeness of TypeScript 😄

import * as di from 'angular2/di';
var Inject = (<any>di).Inject;

Later on, when Inject is in the typing file I will just remove the lines and put it as an explicit import...

@geolyth

This comment has been minimized.

Copy link

@geolyth geolyth commented Sep 28, 2015

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