Javascript ES5和ES6中的角度2依赖注入
下面是一个基本的TypeScript/ES。下一个示例使用DI的装饰器,并遵循框架手册建议的语法:Javascript ES5和ES6中的角度2依赖注入,javascript,angular,ecmascript-6,Javascript,Angular,Ecmascript 6,下面是一个基本的TypeScript/ES。下一个示例使用DI的装饰器,并遵循框架手册建议的语法: import {Component, Inject, Injectable, NgModule, OpaqueToken} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-bro
import {Component, Inject, Injectable, NgModule, OpaqueToken} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
const CONSTANT = { value: 'constant' };
const CONSTANT_TOKEN = new OpaqueToken;
const CONSTANT_PROVIDER = { provide: CONSTANT_TOKEN, useValue: CONSTANT };
@Injectable()
class Service {
constructor(@Inject(CONSTANT_TOKEN) constant) {
console.log('Service constructor', constant);
}
}
@Component({
selector: 'app',
template: '...',
providers: [Service, CONSTANT_PROVIDER]
})
class AppComponent {
constructor(@Inject(Service) service: Service, @Inject(CONSTANT_TOKEN) constant) {
console.log('AppComponent constructor', service, constant);
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
ES5将如何编写
在未经转换的ES6/ES2015中,将如何执行相同的操作
在这些情况下,Injectable
和injected
装饰器是如何翻译的
这个问题特别适用于具有类但可能使用
require
或System.import
而不是ES6导入的真实ES6浏览器实现。要将Angular 2与ES5一起使用,您需要以下脚本:
这提供了一个全局变量,该变量包含所有2。现在您可以编写ng.core.Component
而不是@Component
注释。构造函数的第一个参数是可注入的
var Component = ng.core
Component({
selector: 'hello-cmp',
template: 'Hello World!',
viewProviders: [Service]
.Class({
constructor: [Service, function (service) {
...
}],
});
并告诉喷油器我们的维修参数是service
Component.parameters = [[new ng.core.Inject(Service)]];
以下示例显示了带ES6的angular2的用法:
import {Component} from 'angular2/core';
import {Service} from './example.service';
let componentAnnotation = new Component({
selector: 'world-time',
inputs: ['timeZones'],
providers: [Service],
template: `
...
`
});
export class ComponentExample {
constructor(service) {
this._service = service;
}
...
}
WorldTimeComponent.annotations = [componentAnnotation];
WorldTimeComponent.parameters = [[Service]];
您可以找到一个有效的ES6示例
但是你可以通过使用巴贝尔来使用装饰器。启用
可选[]=es7.decorators
(在网页包中)或通过将配置设置为stage:1
可注入的
装饰器特定于Angular 2的TypeScript风格。它允许通过类型脚本类型注释为DI隐式注释类构造函数。对于使用Inject
注释的注入依赖项,它在TS中是多余的,在JS中是不需要的
Angular 2可注入函数(类和构造函数)应该在引擎盖下用注释
和参数
静态属性进行注释
annotations
是一个数组,它包含可注入类的new
ed装饰器:
function SomeComponent(...) {}
SomeComponent.annotations = [new Componenent(...)];
parameters
是一个数组,其中包含构造函数参数的修饰符,每个元素是一个数组,其中包含相应构造函数属性的new
ed修饰符列表(类似于Angular 1.x中的$inject
属性显式注释):
所有类装饰器都从扩展而来,这意味着它们可以作为函数调用。在这种情况下,使用所谓的DSL语法,允许将装饰程序与以下内容链接:
类
也可以单独使用,它从给定的类构造一个新类,并允许使用数组注释构造函数
方法(类似于Angular 1.x中的内联数组显式注释):
Class
helper在最新的框架版本中被弃用。在ES5中,它应该被原始函数或第三方类助手替换。装饰器支持类函数的直接链接,Componenent(…)(ComponentClass)
带系统的角度2/4 ES6。导入
安:
角度2/4 ES5,带UMD模块和ng
global
安:
ES2015不包括decorators,问题是如何将Angular 2与未翻译的代码一起使用。我以前遇到过这种ES5语法,但我不确定它应该如何应用于ES6类。我更新了我的答案,使ES5/ES6之间的区别更加清晰谢谢。请考虑问题的例子而不是一致性,<代码>服务<代码>是用“代码>常数< /代码>注入的,这可能是一个重要的细节。你提到的例子使用了2.0.0.beta-11,从那以后有了一系列突破性的变化。下面是一个遵循建议语法的函数,它抛出“无法解析服务的所有参数:(?)
。那angular2所有的脚本都是1.5 MB。对于一个web应用程序来说太多了。你为什么要这样写呢?谷歌正在研究它。他们的支持将是ES6。只是好奇而已。@ArnoldB Babel/TS/Dart metalanguage工作流并不适合每个项目。A2开发显然是以TS和Dart为重点的w、 我不确定在A2发布后,原始JS是否会不再是灰姑娘。知道你的选择从来都不会有什么坏处。我明白了。我喜欢TS,因为作为JS的超集,你可以编写任何有效的JS,并且它会运行。但为了更关注你的问题,“@Injectable”装饰程序会这样做:“@Injectable()将类标记为可供注入器实例化。一般来说,注入器在尝试实例化未标记为@Injectable()”的类时会报告错误“你需要翻译他们正在谈论的注入器。@ArnoldB这不完全是真的,刚才我已经了解了Injectable
。它似乎使类能够通过TS类型注释使用隐式注入,并且对于仅依赖于Inject
(如JS)的注入项是不必要的。我想稍后我会发布我自己的答案。
function Service(someService, anotherService) {}
Service.parameters = [
[new Inject(SomeService)],
[new Inject(AnotherService), new Optional, new SkipSelf]
];
var SomeComponent = Componenent(...).Class(...);
var SomeService = Class({
constructor: [[new Inject(SomeService)], function (someService) {}]
});
Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('@angular/platform-browser-dynamic')
])
.then(([
{Component, Inject, Injectable, Optional, NgModule, OpaqueToken},
{BrowserModule},
{platformBrowserDynamic}
]) => {
const CONSTANT = { value: 'constant' };
const CONSTANT_TOKEN = new OpaqueToken;
const CONSTANT_PROVIDER = { provide: CONSTANT_TOKEN, useValue: CONSTANT };
class Service {
constructor(constant) {}
}
Service.parameters = [[new Inject(CONSTANT_TOKEN)]];
class AppComponent {
constructor(service, constant) {}
}
AppComponent.annotations = [new Component({
selector: 'app',
template: '...',
providers: [Service, CONSTANT_PROVIDER]
})];
AppComponent.parameters = [[new Inject(Service)], [new Inject(CONSTANT_TOKEN)]];
class AppModule {}
AppModule.annotations = [new NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})];
platformBrowserDynamic().bootstrapModule(AppModule);
})
.catch((err) => console.error(err));
var Class = ng.core.Class;
var Component = ng.core.Component;
var Inject = ng.core.Inject;
var Injectable = ng.core.Injectable;
var NgModule = ng.core.NgModule;
var OpaqueToken = ng.core.OpaqueToken;
var BrowserModule = ng.platformBrowser.BrowserModule;
var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
var CONSTANT = { value: 'constant' };
var CONSTANT_TOKEN = new OpaqueToken;
var CONSTANT_PROVIDER = { provide: CONSTANT_TOKEN, useValue: CONSTANT };
// Class helper function that uses A1-flavoured inline array DI annotations
// and creates an annotated constructor
var Service = Class({
constructor: [[new Inject(CONSTANT_TOKEN)], function (constant) {
console.log('Service constructor', constant);
}]
});
// can also be
// function Service(constant) {};
// Service.parameters = [[new Inject(...)], ...];
// when not being `new`ed, Component is a chainable factory that has Class helper method
var AppComponent = Component({
selector: 'app',
template: '...',
providers: [Service, CONSTANT_PROVIDER]
})
.Class({
constructor: [
[new Inject(Service)],
[new Inject(CONSTANT_TOKEN)],
function (service, constant) {
console.log('AppComponent constructor', service, constant);
}
]
});
// can also be
// function AppComponent(...) {};
// AppComponent.annotations = [new Component(...)];
// AppComponent.parameters = [[new Inject(...)], ...];
var AppModule = NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
.Class({ constructor: function () {} });
// can also be
// function AppModule() {};
// AppModule.annotations = [new NgModule(...)];
platformBrowserDynamic().bootstrapModule(AppModule);