Bringing the simplicity of Attributes/Annotations into Angular 1.X

יום שני, ספטמבר 28, 2015

One of the more interesting features of Angular 2 is its improved dependency injection mechanism Unlike Angular 1.X you don't need to specify the dependencies manually in order to preserve minification capabilities Angular 2 is smart enough to use the type information of the dependency and inject the correct implementation at run time Can we do the same with Angular 1.X ? Sure, keep reading ... First lets describe the way we define a controller import {MyApp} from '../App'; import {Controller} from '../Common/Decorators'; import {Contact, ContactService} from '../Services/ContactService'; @Controller(MyApp, "HomeCtrl") class HomeCtrl {     contacts: Contact;     constructor(contactService: ContactService) {         contactService.getAll().then(contacts => {             this.contacts = contacts;         });     } } And the service dependency import {MyApp} from '../App'; import {Service, Inject} from '../Common/Decorators'; @Service(MyApp, "contactService") export class ContactService {     constructor(@Inject("$http") private $http: ng.IHttpService) {     }     getAll(): ng.IPromise<Contact> {         return this.$http.get("/contacts.json").then(response => response.data);     } } export interface Contact {     id: number;     name: string; } Second we need to define the Controller and Service decorators (A.K.A attribute/annotation) export function Controller(module: ng.IModule, name: string) {     return function (target: Function) {         Reflect.defineMetadata("controller", target, { controllerName: name });         module.controller(name, target);         set$inject(target);     } } export function Service(module: ng.IModule, name: string) {     return function (target: Function) {         Reflect.defineMetadata("service", { serviceName: name }, target);         module.service(name, target);         set$inject(target);     } } For more information on...

Typescript 1.6 – Async & Await

יום שני, ספטמבר 21, 2015

The Promise pattern simplifies JavaScript asynchronous function management While using promises is much cleaner than using naive callbacks the code still does not look so nice and tidy Consider the following, function getValue() { return asyncStep1().then(function () { return asyncStep2().then(function () { return asyncStep3(); }); }); } The sample code invokes three asynchronous functions one after the other and returns the output of the last function (step3) Using Typescript 1.6 you can just write the following async function getValue() {     await asyncStep1();     await asyncStep2();     return await asyncStep3(); } Much better, right ? The async feature is considered experimental which means that it is turned off by default. If you are using Typescript from the command line (using NodeJS) then you need to add the --experimentalAsyncFunctions option In case you are compiling Typescript within VisualStudio 2015 then...
no comments