Angular Javascript Proxy

An Angular ES6 proxy. If you don't want to use TypeScript. Work with Angular 5.

⚠️ Every example, in this documentation, works with Babel

---

Installation

`` bash
$ npm install --save angular-js-proxy
`

What is contained in this module

` javascript
import {
Component, // Component decorator proxy
NgModule, // NgModule decorator proxy
Injectable // Injectable decorator proxy
compiler, // Angular compiler namespace
common, // Angular common namespace
core, // Angular core namespace
router, // Angular router namespace
forms, // Angular forms namespace
platformBrowserDynamic, // Angular platformBrowserDynamic namespace
platformBrowser // Angular platformBrowser namespace
} from 'angular-js-proxy';

`

Usage with decorators

You can use Angular decorators (Component, NgModule ...), with transform-decorators-legacy babel plugin, as Javascript decorator.

` javascript
// index.js

import { Component, NgModule, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';

@Component({
selector: 'home-component',
template:

Hello

})
class HomeComponent {
constructor() {}
}

@NgModule({
imports: [platformBrowser.BrowserModule],
declarations: [HomeComponent],
bootstrap: [HomeComponent]
})
class Module {
constructor() {}
}

platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);
`

With this package.json

` json
{
"name": "angular-es6-demo",
"scripts": {
"build": "browserify index.js -o dist/app.js -t [ babelify ]"
},
"babel": {
"presets": [
"env"
],
"plugins": [
"transform-decorators-legacy"
]
},
"dependencies": {
"angular-js-proxy": "^0.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.6.1",
"babelify": "^8.0.0",
"browserify": "^16.2.0"
}
}
`

Run npm run build to transpilate your code.

Usage with functions

You can also use Angular decorators (Component, NgModule ...) as function

` javascript
// index.js

import { Component, NgModule, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';

class HomeComponent {
constructor() {}
}

Component({
selector: 'home-component',
template:

Hello

})(HomeComponent);

class Module {
constructor() {}
}

NgModule({
imports: [platformBrowser.BrowserModule],
declarations: [HomeComponent],
bootstrap: [HomeComponent]
})(Module);


platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);
`

With this package.json

` json
{
"name": "angular-es6-demo",
"scripts": {
"build": "browserify index.js -o dist/app.js -t [ babelify ]"
},
"babel": {
"presets": [
"env"
]
},
"dependencies": {
"angular-js-proxy": "^0.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babelify": "^8.0.0",
"browserify": "^16.2.0"
}
}
`

Run npm run build to transpilate your code.

Examples

$3

` javascript
import { Injectable } from 'angular-js-proxy';

// as decorator

@Injectable()
class Utils {
toUpperCase(string) {
return String(string).toUpperCase();
}
}

// as function

class Utils {
toUpperCase(string) {
return String(string).toUpperCase();
}
}

Injectable()(Utils);
`

Usage

` javascript
import { Component, NgModule, Injectable, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';

@Injectable()
class Utils {
toUpperCase(string) {
return String(string).toUpperCase();
}
}

@Component({
selector: 'home-component',
template:

{{ message }}

,
inject: [Utils] // TypeScript use type for DI, so in javascript need to define what inject
})
class HomeComponent {
constructor(utils) {
this.message = utils.toUpperCase('hello');
}
}

@NgModule({
imports: [platformBrowser.BrowserModule],
providers: [Utils],
declarations: [HomeComponent],
bootstrap: [HomeComponent]
})
class Module {
constructor() {}
}

platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);
`

A injectable service can be inject to another injectable service.

` javascript
@Injectable()
class Configurator {
getAPIConfig() {
...
}
}

@Injectable({
inject: [Configurator] // You can use "providers" instead of "inject" if you want a new instance of Configurator
})
class API {
constructor(configurator) {
this.config = configurator.getAPIConfig();
}

callAPI() {
...
}
}
`

$3

` javascript
// index.js

import { Component, NgModule, common } from 'angular-js-proxy';

@Component({
selector: 'another-component',
template: '

Another hello

'
})
class AnotherComponent {}

@NgModule({
imports: [common.CommonModule],
declarations: [AnotherComponent],
exports: [AnotherComponent]
})
export class AnotherModule {}
`

With this package.json

` json
{
"name": "another-angular-es6-module",
"main": "index.js",
"dependencies": {
"angular-js-proxy": "^0.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babelify": "^8.0.0",
"browserify": "^16.1.1"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"env"
],
"plugins": [
"transform-decorators-legacy"
]
}
]
]
}
}
`

Usage

` javascript
import { Component, NgModule, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';
import { AnotherModule } from 'another-angular-es6-module';

@Component({
selector: 'home-component',
template:

Hello

})
class HomeComponent {}

@NgModule({
imports: [platformBrowser.BrowserModule, AnotherModule],
declarations: [HomeComponent],
bootstrap: [HomeComponent]
})
class Module {
constructor() {}
}

platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);
`

Use Angular service

Example with Angular Router service

` javascript
import { Component, NgModule, Injectable, router, platformBrowserDynamic, platformBrowser } from 'angular-js-proxy';

@Injectable()
class MyService {}

@Component({
selector: 'home-component',
template:

Hello

,
inject: [MyService, router.ActivatedRoute]
})
class HomeComponent {
constructor(myService, ActivatedRoute) {
this.service = myService;
this.route = ActivatedRoute;
}
}

@NgModule({
imports: [
platformBrowser.BrowserModule,
router.RouterModule.forRoot([...])
],
declarations: [HomeComponent],
bootstrap: [HomeComponent],
providers: [MyService]
})
class Module {
constructor() {}
}

platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);
`

Uglify

angular-js-proxy use function name to inject Angular service, so if you use Uglify.js, you have to use --keep-fnames options.

`
$ uglifyjs source.js --keep-fnames -o ouput.js
``