{"id":13452626,"url":"https://github.com/bcherny/ngimport","last_synced_at":"2025-04-13T09:51:11.530Z","repository":{"id":65449603,"uuid":"55732378","full_name":"bcherny/ngimport","owner":"bcherny","description":"Easy to use ES6 imports for $http, $log, and other Angular 1 services","archived":false,"fork":false,"pushed_at":"2018-01-29T05:37:20.000Z","size":80,"stargazers_count":99,"open_issues_count":2,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-17T03:03:24.984Z","etag":null,"topics":["angular","es6","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bcherny.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":"2016-04-07T22:29:23.000Z","updated_at":"2023-06-20T17:00:17.000Z","dependencies_parsed_at":"2023-01-25T02:45:38.632Z","dependency_job_id":null,"html_url":"https://github.com/bcherny/ngimport","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fngimport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fngimport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fngimport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fngimport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bcherny","download_url":"https://codeload.github.com/bcherny/ngimport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695300,"owners_count":21146952,"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","es6","typescript"],"created_at":"2024-07-31T07:01:29.577Z","updated_at":"2025-04-13T09:51:11.510Z","avatar_url":"https://github.com/bcherny.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ngimport [![Build Status][build]](https://circleci.com/gh/bcherny/ngimport) [![npm]](https://www.npmjs.com/package/ngimport) [![mit]](https://opensource.org/licenses/MIT)\n\n[build]: https://img.shields.io/circleci/project/bcherny/ngimport.svg?branch=master\u0026style=flat-square\n[npm]: https://img.shields.io/npm/v/ngimport.svg?style=flat-square\n[mit]: https://img.shields.io/npm/l/ngimport.svg?style=flat-square\n\n\u003e ES6 imports for $http, $log, and other Angular 1 services\n\n## Install\n\n```sh\n# Using Yarn:\nyarn add ngimport angular\n\n# Or, using NPM:\nnpm install ngimport angular --save\n```\n\nIf you're using ngResource, also install [ngimport-ngresource](https://github.com/bcherny/ngimport-ngresource).\n\n## Example\n\n*Note: This example is in TypeScript, but it works equally well in plain JavaScript.*\n\n### Before:\n\n```ts\nimport {IHttpService, ILogService, IPromise} from 'angular'\n\nangular.factory('Get', function($http: IHttpService, $log: ILogService) {\n  return function(url: string): IPromise\u003cstring\u003e {\n    return $http.get(url).then(data =\u003e {\n      $log.info('Got data!', data)\n      return data\n    })\n  }\n})\n\nexport interface Get {\n  (url: string): IPromise\u003cstring\u003e\n}\n```\n\n### After:\n\n```ts\nimport {IPromise} from 'angular'\nimport {$http, $log} from 'ngimport'\n\nexport function Get(url: string): IPromise\u003cstring\u003e {\n  return $http.get(url).then(data =\u003e {\n    $log.info('Got data!', data)\n    return data\n  })\n}\n```\n\n## Full Example\n\n### Before:\n\n```ts\nangular.module('myModule', [])\n\n// Contents of Get.ts:\n\nimport {IHttpService, ILogService, IPromise} from 'angular'\n\nangular.module('myModule').factory('Get', function(\n  $http: IHttpService,\n  $log: ILogService\n) {\n  return function(url: string): IPromise\u003cstring\u003e {\n    return $http.get(url).then(data =\u003e {\n      $log.info('Got data!', data)\n      return data\n    })\n  }\n})\n\nexport interface Get {\n  (url: string): IPromise\u003cstring\u003e\n}\n\n// Contents of MyComponent.ts:\n\nimport {Get} from './Get'\n\nangular.module('myModule').component('MyComponent', {\n  controller: class MyComponentController {\n    constructor(private Get: Get) {},\n    get() {\n      this.Get('/foo').then(data =\u003e ...)\n    }\n  }\n})\n```\n\n### After:\n\n```ts\nangular.module('myModule', ['bcherny/ngimport'])\n\n// Contents of Get.ts:\n\nimport {IPromise} from 'angular'\nimport {$http, $log} from 'ngimport'\n\nexport function Get(url: string): IPromise\u003cstring\u003e {\n  return $http.get(url).then(data =\u003e {\n    $log.info('Got data!', data)\n    return data\n  })\n}\n\n// Contents of MyComponent.ts:\n\nimport {Get} from './Get'\n\nangular.module('myModule').component('MyComponent', {\n  controller: class MyComponentController {\n    get() {\n      Get('/foo').then(data =\u003e ...)\n    }\n  }\n})\n```\n\n## Why?\n\nAngular 1 DI made sense when there was no JavaScript module standard. But with the advent of CommonJS, and now ES Modules, Angular DI only makes your code less portable.\n\nIf you add TypeScript to the mix, you'll often find yourself repeating class interface definitions: you might create a typed service class, but because its dependencies are injected via a closure, you can't export the class directly, and instead need to create a second interface and export it instead! And if you use the class' constructor to inject dependencies, then you can't pass arguments to a new instance of your constructor!\n\nWith the *ngimport* approach, all of these issues are solved.\n\nBut the biggest benefit is your code becomes much more **portable**: you can mix and match Angular 1, Angular 2, or even React components with zero friction. And if you're using TypeScript, you can do all of this in a 100% typesafe way.\n\n### Upsides of this approach\n\n- No more ugly, proprietary DI! Use standard imports\n- No lock in: easy migration path to Angular2, React, etc.\n- Use constructors to pass in arguments, rather than for DI\n- Avoid duplicated TypeScript interface declarations\n- Mock Angular dependencies with `$provide` in your unit tests, as usual\n- Assert against HTTP requests with `$httpBackend` in your unit tests, as usual\n- Use it as an adapter to migrate your codebase to imports piece by piece\n\n## Using this technique to wrap your own legacy modules\n\nYou can easily use the same technique that *ngimport* uses to expose your own, legacy Angular 1 modules via ES6 `import`s. Let's say you have the following code:\n\n```js\n// Contents of myModule.js:\n\nangular\n  .module('myModule', [])\n  .service('fooService', function($http) {\n    this.foo = function() {\n      return $http.get('/url')\n    }\n  })\n```\n\nTo consume `fooService` today, you need to DI it; instead, let's expose it and its typings so we can `import` it:\n\n```ts\n// Contents of fooService.ts:\n\nimport {IPromise, module} from 'angular'\nexport let fooService = undefined\n\ninterface FooService {\n  foo: () =\u003e IPromise\u003c{ data: string }\u003e\n}\n\nmodule('myModule').run(function ($injector) {\n  fooService = \u003cFooService\u003e$injector.get('fooService')\n})\n```\n\nVoila! Now instead of DIing `fooService`, we can now simply write `import {fooService} from './fooService'`. We then have the freedom to migrate `fooService` to TypeScript/ES6 at our own pace.\n\n### Limitations\n\n- Angular builtins (`$http`, `$rootScope`) will be undefined until you bootstrap your app. This is due to the way Angular creates injectors. Be careful to either not use these builtins at the top level, or bootstrap the app before you do.\n- If transpiling to CommonJS, be careful to destructure the import rather than importing a default value. Otherwise when the exported reference updates, your consumer will still have a pointer to the old, undefined reference.\n\n## License\n\nMIT\n\n## Running the tests\n\n`npm test`\n\n## Todo\n\n- Add support for $animate, $animateCss, $aria, $cookies, $provide, $resource, $rootRouter, $route, $routeParams, $routerRootComponent, $sanitize, $swipe, $touch\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcherny%2Fngimport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbcherny%2Fngimport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcherny%2Fngimport/lists"}