{"id":14973516,"url":"https://github.com/jbedard/ng-facade","last_synced_at":"2025-10-27T01:30:39.562Z","repository":{"id":80649811,"uuid":"80853312","full_name":"jbedard/ng-facade","owner":"jbedard","description":"Angular style TypeScript annotations for AngularJS","archived":false,"fork":false,"pushed_at":"2019-01-15T03:28:53.000Z","size":239,"stargazers_count":7,"open_issues_count":6,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-17T02:03:51.013Z","etag":null,"topics":["angular","angular2","angularjs","annotations","decorators"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbedard.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-03T17:43:18.000Z","updated_at":"2019-12-01T07:44:35.000Z","dependencies_parsed_at":"2023-03-07T01:15:40.491Z","dependency_job_id":null,"html_url":"https://github.com/jbedard/ng-facade","commit_stats":{"total_commits":98,"total_committers":2,"mean_commits":49.0,"dds":"0.37755102040816324","last_synced_commit":"e36f5cd5c28a38ed02143a25d25c424e7c6b7b65"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbedard%2Fng-facade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbedard%2Fng-facade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbedard%2Fng-facade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbedard%2Fng-facade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbedard","download_url":"https://codeload.github.com/jbedard/ng-facade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236605559,"owners_count":19176021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angularjs","annotations","decorators"],"created_at":"2024-09-24T13:48:53.725Z","updated_at":"2025-10-27T01:30:39.261Z","avatar_url":"https://github.com/jbedard.png","language":"TypeScript","readme":"# ng-facade\n\nAngular es6 annotations for AngularJS. Attemps to be a close as possible to Angular in syntax and functionality.\n\n\n\n# InjectableFacade, InjectFacade\n\nClasses marked with `@InjectableFacade()` can:\n* be placed anywhere a traditional service string name is placed\n* use `@InjectFacade('serviceName')` to inject traditional services by string name\n* inject other `@InjectableFacade()` services by TypeScript type in the constructor\n\n\n```typescript\nimport {InjectableFacade, InjectFacade, NgModuleFacade} from \"ng-facade\";\n\n@InjectableFacade()\nclass Logger {\n    constructor(\n        //Injection of non ng-facade services\n        @InjectFacade(\"$http\") private http,\n\n        //Injection of ng-facade style services\n        private otherService: OtherService\n    )\n\n    public log(msg: string) { ... }\n}\n\n@InjectableFacade()\nclass OtherService {}\n\n@NgModuleFacade({\n    id: \"demo\",\n    providers: [Logger, OtherService]\n})\nclass MyModule {}\n```\n\n\n# $injector\n\n```typescript\n@InjectableFacade()\nclass Service {\n}\n\n@NgModuleFacade({id: \"test\", providers: [Service]})\nclass Mod {}\n\n...\n\n$injector.has(Service);     //=\u003e true\n$injector.get(Service);     //=\u003e the Service instance\n\nconst instance1 = $injector.instantiate(Service);\nconst instance2 = $injector.instantiate(Service);\ninstance1 == instance2;     //=\u003e false\n\n\n//To reference Angular/ng-facade style classes from AngularJS style injection\n$injector.invoke([\"$rootScope\", Service, function($rootScope, serv) { ... }]);\n\nmodule.run([\"$rootScope\", Service, function($rootScope, serv) { ... }])\n\nmodule.service(\"ServiceName\", [\"$rootScope\", Service, function ServiceClass() {\n    constructor($rootScope, serv) { ... }\n]);\n\n```\n\n\n\n# NgModule\n\n```typescript\nimport {NgModuleFacade} from \"ng-facade\";\n\n@NgModuleFacade({\n    id: \"my-module\",\n\n    imports: [\n        \"otherModule\",\n        angular.module(\"mydep\"),            //importing AngularJS modules\n        otherNgModule                       //importing @NgModule modules\n    ],\n\n    providers: [\n        //TypeProviderFacade\n        InjectableClass,\n\n        //FactoryProviderFacade\n        {\n            provide: Provided,\n            useFactory: function() { return ... }\n        },\n\n        //FactoryProviderFacade + use\n        {\n            provide: Provided,\n            useFactory: function(AngularJSService, service: ServiceClass) { return ... }\n            use: [\n                \"AngularJSService\",\n                ServiceClass\n            ]\n        },\n\n        //ExistingProviderFacade\n        SuperLogger,\n        {\n            provide: Logger\n            useExisting: SuperLogger\n        },\n\n        //ClassProviderFacade\n        {\n            provide: Provided,\n            useClass: ProvidedImpl\n        },\n\n        //PipeTransformFacade (ClassProviderFacade)\n        MyPipe\n    ],\n\n    declarations: [Component, Directive, ...]\n})\nclass MyModule {}\n```\n\n\n\n# ComponentFacade, DirectiveFacade\n\n`@ComponentFacade` and `@DirectiveFacade` annotations can be used to declare component/directives. The classes must then be passed to the `@NgModuleFacade` `declarations`.\n\n\n```typescript\n@ComponentFacade({\n    selector: \"comp-selector\",\n\n    //Optional\n    template: \"...\",\n\n    transclude: ...,\n    controllerAs: ...\n})\nclass Comp {}\n\n\n@DirectiveFacade({\n    selector: \"element\" | \".class\" | \"[attribute]\"\n})\nclass Dir {}\n\n\n@NgModuleFacade({id: \"compMod\", declarations: [Comp, Dir]})\nclass Mod {}\n```\n\n\n\n# PipeFacade, PipeTransformFacade\n\n```typescript\nimport {PipeFacade, PipeTransformFacade, NgModuleFacade} from \"ng-facade\";\n\n@PipeFacade({name: \"myPipe\"})\nclass MyPipe implements PipeTransformFacade {\n    transform(x, y) { return x + y; }\n}\n\n@NgModuleFacade({id: \"pipeMod\", providers: [P]})\nclass Mod {}\n\n@NgModuleFacade({\n    id: \"demo\",\n    providers: [MyPipe]\n})\nclass MyModule {}\n```\n\n```html\n\u003cspan\u003e{{myX | myPipe:myY}}\u003c/span\u003e\n```\n\n\n\n# @InputFacade, @InputStringFacade, @InputCallbackFacade\n\n\n\n# @OutputFacade, EventEmitterFacade\n\n\n\n# @RequireFacade\n\n\n\n# @HostListenerFacade","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbedard%2Fng-facade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbedard%2Fng-facade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbedard%2Fng-facade/lists"}