{"id":24802712,"url":"https://github.com/kevinbalicot/angular-js-proxy","last_synced_at":"2026-04-29T10:01:54.308Z","repository":{"id":57178608,"uuid":"130197751","full_name":"kevinbalicot/angular-js-proxy","owner":"kevinbalicot","description":"An Angular ES6 proxy. If you don't want to use TypeScript. Work with Angular 5.","archived":false,"fork":false,"pushed_at":"2018-11-06T13:42:17.000Z","size":37,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-27T19:08:28.415Z","etag":null,"topics":["angular","angular2","es6","proxy"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevinbalicot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-19T10:14:24.000Z","updated_at":"2018-11-06T13:41:41.000Z","dependencies_parsed_at":"2022-09-14T02:10:25.633Z","dependency_job_id":null,"html_url":"https://github.com/kevinbalicot/angular-js-proxy","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/kevinbalicot/angular-js-proxy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbalicot%2Fangular-js-proxy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbalicot%2Fangular-js-proxy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbalicot%2Fangular-js-proxy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbalicot%2Fangular-js-proxy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinbalicot","download_url":"https://codeload.github.com/kevinbalicot/angular-js-proxy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbalicot%2Fangular-js-proxy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261695334,"owners_count":23195730,"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","es6","proxy"],"created_at":"2025-01-30T05:16:07.773Z","updated_at":"2026-04-29T10:01:49.287Z","avatar_url":"https://github.com/kevinbalicot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Javascript Proxy\n\nAn Angular ES6 proxy. If you don't want to use TypeScript. Work with Angular 5.\n\n⚠️ Every example, in this documentation, works with Babel\n\n---\n\n## Installation\n\n``` bash\n$ npm install --save angular-js-proxy\n```\n\n## What is contained in this module\n\n``` javascript\nimport {\n    Component,       // Component decorator proxy\n    NgModule,        // NgModule decorator proxy\n    Injectable       // Injectable decorator proxy\n    compiler,        // Angular compiler namespace\n    common,          // Angular common namespace\n    core,            // Angular core namespace\n    router,          // Angular router namespace\n    forms,           // Angular forms namespace\n    platformBrowserDynamic, // Angular platformBrowserDynamic namespace\n    platformBrowser         // Angular platformBrowser namespace\n} from 'angular-js-proxy';\n\n```\n\n## Usage with decorators\n\nYou can use Angular decorators (Component, NgModule ...), with `transform-decorators-legacy` babel plugin, as Javascript decorator.\n\n``` javascript\n// index.js\n\nimport { Component, NgModule, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';\n\n@Component({\n    selector: 'home-component',\n    template: `\n        \u003ch1\u003eHello\u003c/h1\u003e\n    `\n})\nclass HomeComponent {\n    constructor() {}\n}\n\n@NgModule({\n    imports: [platformBrowser.BrowserModule],\n    declarations: [HomeComponent],\n    bootstrap: [HomeComponent]\n})\nclass Module {\n    constructor() {}\n}\n\nplatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);\n```\n\nWith this `package.json`\n\n``` json\n{\n  \"name\": \"angular-es6-demo\",\n  \"scripts\": {\n    \"build\": \"browserify index.js -o dist/app.js -t [ babelify ]\"\n  },\n  \"babel\": {\n    \"presets\": [\n      \"env\"\n    ],\n    \"plugins\": [\n      \"transform-decorators-legacy\"\n    ]\n  },\n  \"dependencies\": {\n    \"angular-js-proxy\": \"^0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.26.0\",\n    \"babel-plugin-transform-decorators-legacy\": \"^1.3.4\",\n    \"babel-preset-env\": \"^1.6.1\",\n    \"babelify\": \"^8.0.0\",\n    \"browserify\": \"^16.2.0\"\n  }\n}\n```\n\nRun `npm run build` to transpilate your code.\n\n## Usage with functions\n\nYou can also use Angular decorators (Component, NgModule ...) as function\n\n``` javascript\n// index.js\n\nimport { Component, NgModule, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';\n\nclass HomeComponent {\n    constructor() {}\n}\n\nComponent({\n    selector: 'home-component',\n    template: `\n        \u003ch1\u003eHello\u003c/h1\u003e\n    `\n})(HomeComponent);\n\nclass Module {\n    constructor() {}\n}\n\nNgModule({\n    imports: [platformBrowser.BrowserModule],\n    declarations: [HomeComponent],\n    bootstrap: [HomeComponent]\n})(Module);\n\n\nplatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);\n```\n\nWith this `package.json`\n\n``` json\n{\n  \"name\": \"angular-es6-demo\",\n  \"scripts\": {\n    \"build\": \"browserify index.js -o dist/app.js -t [ babelify ]\"\n  },\n  \"babel\": {\n    \"presets\": [\n      \"env\"\n    ]\n  },\n  \"dependencies\": {\n    \"angular-js-proxy\": \"^0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.26.0\",\n    \"babel-preset-env\": \"^1.6.1\",\n    \"babelify\": \"^8.0.0\",\n    \"browserify\": \"^16.2.0\"\n  }\n}\n```\n\nRun `npm run build` to transpilate your code.\n\n## Examples\n\n### Create an injectable service.\n\n``` javascript\nimport { Injectable } from 'angular-js-proxy';\n\n// as decorator\n\n@Injectable()\nclass Utils {\n    toUpperCase(string) {\n        return String(string).toUpperCase();\n    }\n}\n\n// as function\n\nclass Utils {\n    toUpperCase(string) {\n        return String(string).toUpperCase();\n    }\n}\n\nInjectable()(Utils);\n```\n\nUsage\n\n``` javascript\nimport { Component, NgModule, Injectable, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';\n\n@Injectable()\nclass Utils {\n    toUpperCase(string) {\n        return String(string).toUpperCase();\n    }\n}\n\n@Component({\n    selector: 'home-component',\n    template: `\n        \u003ch1\u003e{{ message }}\u003c/h1\u003e\n    `,\n    inject: [Utils] // TypeScript use type for DI, so in javascript need to define what inject\n})\nclass HomeComponent {\n    constructor(utils) {\n        this.message = utils.toUpperCase('hello');\n    }\n}\n\n@NgModule({\n    imports: [platformBrowser.BrowserModule],\n    providers: [Utils],\n    declarations: [HomeComponent],\n    bootstrap: [HomeComponent]\n})\nclass Module {\n    constructor() {}\n}\n\nplatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);\n```\n\nA injectable service can be inject to another injectable service.\n\n``` javascript\n@Injectable()\nclass Configurator {\n    getAPIConfig() {\n        ...\n    }\n}\n\n@Injectable({\n    inject: [Configurator] // You can use \"providers\" instead of \"inject\" if you want a new instance of Configurator\n})\nclass API {\n    constructor(configurator) {\n        this.config = configurator.getAPIConfig();\n    }\n\n    callAPI() {\n        ...\n    }\n}\n```\n\n### Create an exportable module\n\n``` javascript\n// index.js\n\nimport { Component, NgModule, common } from 'angular-js-proxy';\n\n@Component({\n    selector: 'another-component',\n    template: '\u003ch2\u003eAnother hello\u003c/h2\u003e'\n})\nclass AnotherComponent {}\n\n@NgModule({\n    imports: [common.CommonModule],\n    declarations: [AnotherComponent],\n    exports: [AnotherComponent]\n})\nexport class AnotherModule {}\n```\n\nWith this `package.json`\n\n``` json\n{\n  \"name\": \"another-angular-es6-module\",\n  \"main\": \"index.js\",\n  \"dependencies\": {\n    \"angular-js-proxy\": \"^0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.26.0\",\n    \"babel-preset-env\": \"^1.6.1\",\n    \"babelify\": \"^8.0.0\",\n    \"browserify\": \"^16.1.1\"\n  },\n  \"browserify\": {\n    \"transform\": [\n      [\n        \"babelify\",\n        {\n          \"presets\": [\n            \"env\"\n          ],\n          \"plugins\": [\n            \"transform-decorators-legacy\"\n          ]\n        }\n      ]\n    ]\n  }\n}\n```\n\nUsage\n\n``` javascript\nimport { Component, NgModule, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';\nimport { AnotherModule } from 'another-angular-es6-module';\n\n@Component({\n    selector: 'home-component',\n    template: `\n        \u003ch1\u003eHello\u003c/h1\u003e\n        \u003canother-component\u003e\u003c/another-component\u003e\n    `\n})\nclass HomeComponent {}\n\n@NgModule({\n    imports: [platformBrowser.BrowserModule, AnotherModule],\n    declarations: [HomeComponent],\n    bootstrap: [HomeComponent]\n})\nclass Module {\n    constructor() {}\n}\n\nplatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);\n```\n\n## Use Angular service\n\nExample with Angular Router service\n\n``` javascript\nimport { Component, NgModule, Injectable, router, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';\n\n@Injectable()\nclass MyService {}\n\n@Component({\n    selector: 'home-component',\n    template: `\n        \u003ch1\u003eHello\u003c/h1\u003e\n        \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n    `,\n    inject: [MyService, router.ActivatedRoute]\n})\nclass HomeComponent {\n    constructor(myService, ActivatedRoute) {\n        this.service = myService;\n        this.route = ActivatedRoute;\n    }\n}\n\n@NgModule({\n    imports: [\n        platformBrowser.BrowserModule,\n        router.RouterModule.forRoot([...])\n    ],\n    declarations: [HomeComponent],\n    bootstrap: [HomeComponent],\n    providers: [MyService]\n})\nclass Module {\n    constructor() {}\n}\n\nplatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);\n```\n\n## Uglify\n\n`angular-js-proxy` use function name to inject Angular service, so if you use [Uglify.js](https://github.com/mishoo/UglifyJS2), you have to use `--keep-fnames` options.\n\n```\n$ uglifyjs source.js --keep-fnames -o ouput.js\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinbalicot%2Fangular-js-proxy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinbalicot%2Fangular-js-proxy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinbalicot%2Fangular-js-proxy/lists"}