https://github.com/jbedard/ng-facade
Angular style TypeScript annotations for AngularJS
https://github.com/jbedard/ng-facade
angular angular2 angularjs annotations decorators
Last synced: 5 months ago
JSON representation
Angular style TypeScript annotations for AngularJS
- Host: GitHub
- URL: https://github.com/jbedard/ng-facade
- Owner: jbedard
- License: mit
- Created: 2017-02-03T17:43:18.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-15T03:28:53.000Z (about 7 years ago)
- Last Synced: 2025-01-17T02:03:51.013Z (about 1 year ago)
- Topics: angular, angular2, angularjs, annotations, decorators
- Language: TypeScript
- Homepage:
- Size: 233 KB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-facade
Angular es6 annotations for AngularJS. Attemps to be a close as possible to Angular in syntax and functionality.
# InjectableFacade, InjectFacade
Classes marked with `@InjectableFacade()` can:
* be placed anywhere a traditional service string name is placed
* use `@InjectFacade('serviceName')` to inject traditional services by string name
* inject other `@InjectableFacade()` services by TypeScript type in the constructor
```typescript
import {InjectableFacade, InjectFacade, NgModuleFacade} from "ng-facade";
@InjectableFacade()
class Logger {
constructor(
//Injection of non ng-facade services
@InjectFacade("$http") private http,
//Injection of ng-facade style services
private otherService: OtherService
)
public log(msg: string) { ... }
}
@InjectableFacade()
class OtherService {}
@NgModuleFacade({
id: "demo",
providers: [Logger, OtherService]
})
class MyModule {}
```
# $injector
```typescript
@InjectableFacade()
class Service {
}
@NgModuleFacade({id: "test", providers: [Service]})
class Mod {}
...
$injector.has(Service); //=> true
$injector.get(Service); //=> the Service instance
const instance1 = $injector.instantiate(Service);
const instance2 = $injector.instantiate(Service);
instance1 == instance2; //=> false
//To reference Angular/ng-facade style classes from AngularJS style injection
$injector.invoke(["$rootScope", Service, function($rootScope, serv) { ... }]);
module.run(["$rootScope", Service, function($rootScope, serv) { ... }])
module.service("ServiceName", ["$rootScope", Service, function ServiceClass() {
constructor($rootScope, serv) { ... }
]);
```
# NgModule
```typescript
import {NgModuleFacade} from "ng-facade";
@NgModuleFacade({
id: "my-module",
imports: [
"otherModule",
angular.module("mydep"), //importing AngularJS modules
otherNgModule //importing @NgModule modules
],
providers: [
//TypeProviderFacade
InjectableClass,
//FactoryProviderFacade
{
provide: Provided,
useFactory: function() { return ... }
},
//FactoryProviderFacade + use
{
provide: Provided,
useFactory: function(AngularJSService, service: ServiceClass) { return ... }
use: [
"AngularJSService",
ServiceClass
]
},
//ExistingProviderFacade
SuperLogger,
{
provide: Logger
useExisting: SuperLogger
},
//ClassProviderFacade
{
provide: Provided,
useClass: ProvidedImpl
},
//PipeTransformFacade (ClassProviderFacade)
MyPipe
],
declarations: [Component, Directive, ...]
})
class MyModule {}
```
# ComponentFacade, DirectiveFacade
`@ComponentFacade` and `@DirectiveFacade` annotations can be used to declare component/directives. The classes must then be passed to the `@NgModuleFacade` `declarations`.
```typescript
@ComponentFacade({
selector: "comp-selector",
//Optional
template: "...",
transclude: ...,
controllerAs: ...
})
class Comp {}
@DirectiveFacade({
selector: "element" | ".class" | "[attribute]"
})
class Dir {}
@NgModuleFacade({id: "compMod", declarations: [Comp, Dir]})
class Mod {}
```
# PipeFacade, PipeTransformFacade
```typescript
import {PipeFacade, PipeTransformFacade, NgModuleFacade} from "ng-facade";
@PipeFacade({name: "myPipe"})
class MyPipe implements PipeTransformFacade {
transform(x, y) { return x + y; }
}
@NgModuleFacade({id: "pipeMod", providers: [P]})
class Mod {}
@NgModuleFacade({
id: "demo",
providers: [MyPipe]
})
class MyModule {}
```
```html
{{myX | myPipe:myY}}
```
# @InputFacade, @InputStringFacade, @InputCallbackFacade
# @OutputFacade, EventEmitterFacade
# @RequireFacade
# @HostListenerFacade