ng–metadata
Angular 2 Angular 1.x的装饰器
享受/使用ngmetadata？ ?✅
给我买一个☕️
互联网上的某人：
最好的角1！后端口几乎所有Angular 2 API到Angular 1，Woot！
NG-Metadata是希望使用Angular 2约定和样式在Angular 1.4+上运行的Angular 2约定和样式的人，这是一个很好的解决方案。
没有黑客。没有覆盖。准备就绪。
升级您的代码库真的很容易且非常灵活，您可以采用3种策略：
- 通过
angular.module进行注册的每个文件升级 - 每个文件升级使用root App组件上的注册
@ComponentMetadata通过providers/directive/pipes - 混合方法可以结合两种类型
ng-metadata的优势：
- 干净的Angular 2样式DI与Angular 1
- 如今，以Angular 2样式编写您的应用程序，并提高生产力！
- 删除Angular 1 API的开销，如链接函数，$ scope，$ element和not and not and and not and其他奇怪的API语法
- 没有抽象，只有纯Angular 1.x在ES的引擎盖和力量下。
- 带领您，编写干净的组件驱动代码，而无需复杂的DDO定义API
- “力”您将应用程序视为组成树，在Angular 2术语中
在幕后使用ES.NEXT装饰器通过Typescript扩展（添加了方法装饰器，参数装饰器等…）
参数装饰器现在位于TC39中的0阶段，因此可能很快就会在Babel中使用，因此，如果您喜欢纯JS，则可以使用ES2015使用所有这些好处
快速开始
- plunkr-在浏览器中尝试一下
- 游乐场 – 实时文档示例和强制性待办事项示例
- 生产Ready入门套件 – NGPARTY TEAM由WebPack提供支持的入门套件
学习
- 在执行任何操作之前，请阅读Boottapping指南以进行广泛概述如何做事
- 浏览文档
- 如何将ES5迁移到打字稿+NG-Metadata：设计模式/食谱
- 检查常见问题是否有更多说明
要点
那么，旧学校ES5 Angular 1应用程序和现代NG-Metadata应用程序有什么区别？
我很高兴你问！这是一个小型比较应用：
具有ES5的角1.x：
// main.js angular . element ( document ) . ready ( function ( ) { angular . bootstrap ( document , [ \'hero\' ] ) ; } ) ; // hero.js angular . module ( \'hero\' , [ ] ) ; // hero.service.js angular . module ( \'hero\' ) . service ( \'heroSvc\' , HeroService ) ; HeroService . $inject = [ \'$http\' ] ; function HeroService ( $http ) { this . $http = $http ; } HeroService . prototype . fetchAll = function ( ) { return this . $http . get ( \'/api/heroes\' ) ; } // hero.component.js angular . module ( \'hero\' ) . directive ( \'hero\' , heroCmp ) ; function heroCmp ( ) { return { scope : { } , bindToController : { name : \'=\' , onCall : \'&\' } , controller : HeroController , controllerAs : \'$ctrl\' , link : function ( scope , element , attrs , ctrl ) { ctrl . init ( ) ; } , transclude : true , templateUrl : \'hero.html\' } ; } HeroController . $inject = [ \'log\' , \'heroSvc\' ] ; function HeroController ( $log , heroSvc ) { this . init = function ( ) { /* your init logic */ } ; }
ng-metadata和打字稿：
// main.ts import { platformBrowserDynamic } from \'ng-metadata/platform-browser-dynamic\' ; import { AppModule } from \'./app.module\' ; platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ; // app.module.ts import { NgModule } from \'ng-metadata/core\' ; import { AppComponent } from \'./app.component\' ; import { HeroComponent } from \'./hero.component\' ; import { HeroService } from \'./hero.service\' ; @ NgModule ( { declarations : [ AppComponent , HeroComponent ] , providers : [ HeroService ] } ) export class AppModule { } // app.component.ts import { Component } from \'ng-metadata/core\' ; @ Component ( { selector : \'my-app\' , template : `<hero [name]=\"$ctrl.name\" (call)=\"$ctrl.onCall($event)\"></hero>` } ) export class AppComponent { name = \'Martin\' ; onCall ( ) { /*...*/ } } // hero.service.ts import { Injectable , Inject } from \'ng-metadata/core\' ; @ Injectable ( ) export class HeroService { constructor ( @ Inject ( \'$http\' ) private $http : ng . IHttpService ) { } fetchAll ( ) { return this . $http . get ( \'/api/heroes\' ) ; } } // hero.component.ts import { Component , Inject , Input , Output , EventEmitter , OnInit } from \'ng-metadata/core\' ; import { HeroService } from \'./hero.service\' ; @ Component ( { selector : \'hero\' , moduleId : module . id , templateUrl : \'./hero.component.html\' , legacy : { transclude : true } } ) export class HeroComponent implements OnInit { // one way binding determined by parent template @ Input ( ) name : string ; @ Output ( ) call = new EventEmitter < void > ( ) ; constructor ( // we need to inject via @Inject because angular 1 doesn\'t give us proper types @ Inject ( \'$log\' ) private $log : ng . ILogService , // here we are injecting by Type which is possible thanks to reflect-metadata and TypeScript and because our service // is defined as a class private heroSvc : HeroService ) { } ngOnInit ( ) { /* your init logic */ } }
安装
先决条件：node.js
通过在终端/控制台窗口中运行
node -v和npm -v，验证您至少正在运行Node V5.xx和NPM 3.xx。较旧的版本可能会产生错误。
依赖性
具有NG-Metadata的角度应用取决于各种第三方软件包（包括NG-Metadata本身）提供的功能和功能。这些软件包由Node软件包管理器（NPM）维护和安装。
所有这些依赖项都将存储在package.json中。
应用程序软件包的依赖项部分中有三个软件包类别。
-
功能– 功能软件包为我们的应用程序提供框架和实用程序功能。
-
polyfills-浏览器JavaScript实现中的Polyfills插入间隙。
-
其他支持该应用程序的库，例如HTML小部件和样式等的Bootstrap …
功能软件包
Angular-没有角度的生活，对吗？ ：d
Angular Mocks – 您正在测试您的代码吗？正确的？
NG-Metadata-每个应用程序都需要NG-Metadata的关键运行时部分。包括所有元数据装饰器，组件，指令，依赖注入和组件生命周钩。包括4个模块：
-
ng-metadata/core， -
ng-metadata/platform-browser-dynamic， -
ng-metadata/common， -
ng-metadata/testing
通过运行来安装核心依赖性：
npm i --save angular angular-mocks ng-metadata
多填充软件包
NG-Metadata需要在应用程序环境中进行某些聚填充。我们安装了这些多填充物，其中包括非常具体的NPM软件包，NG-Metadata在其package.json的peerDepentencies段中列出了这些填充程序。
通过运行安装同伴依赖性：
npm i --save rxjs@5.0.1
RXJS-目前在TC39委员会面前的可观察到规格的多填充，该规范确定了JavaScript语言的标准。开发人员应该能够选择RXJS的首选版本（在兼容版本范围内），而无需等待NG-Metadata更新。
通过运行安装polyfills：
npm i --save core-js
您还需要提供Reflect.metadata垫片。这可以通过安装npm i --save reflect-metadata或从core-js import \'core-js/es7/reflect\'来完成。
Core -JS-猴子通过ES2015（ES6）的基本特征对全局上下文（窗口）进行修补。开发人员可以代替提供相同核心API的替代多填充。一旦所有受支持的绿色浏览器实施这些API，这种依赖性就应该消失。
Reflect-Metadata- NG-Metadata和Typescript编译器之间共享的依赖关系。开发人员应该能够在不升级NG-Metadata的情况下更新打字稿软件包，这就是为什么这是应用程序的依赖性，而不是NG-Metadata的依赖性。
配置您的项目
TypeScript是NG-Metadata的角度应用开发的主要语言。
浏览器无法直接执行打字稿。必须使用TSC编译器“将”“转录”到JavaScript中，并且需要进行一些配置。
我们需要3件事：
- TSCONFIG.JSON-打字稿编译器配置。
- 键入 – Typesscript声明文件。
- 模块加载器/捆绑器-ES2015模块在浏览器中不在本地中，因此我们需要一个工具
tsconfig.json
打字稿编译器配置
我们通常将打字稿配置文件（ tsconfig.json ）添加到我们的项目中，以指导编译器生成JavaScript文件。
{
\"compilerOptions\" : {
\"target\" : \" es5 \" ,
\"module\" : \" commonjs \" ,
\"moduleResolution\" : \" node \" ,
\"sourceMap\" : true ,
\"experimentalDecorators\" : true ,
\"emitDecoratorMetadata\" : true ,
\"removeComments\" : false ,
\"noImplicitAny\" : false
}
}
-
module– 您可以使用任意模块编译类型，取决于您的模块Bundler，我们commonjs喜欢使用webpack
打字稿声明文件
许多JavaScript库，例如JQuery，Jasmine Testing库以及Angular本身，它们以功能和语法扩展了JavaScript环境，而Typescript Compiler无法本地识别。当编译器无法识别某些内容时，它会引发错误。
我们使用Typescript类型声明文件（ D.TS文件）来告诉编译器我们加载的库。
许多库将其定义文件包括在其NPM软件包中，其中打字稿编译器和编辑人员都可以找到它们。 NG-Metadata就是这样的图书馆。
从打字稿2.0开始，安装第三方声明文件现在非常简单，可以直接从NPM完成。请参阅官方指南以获取更多信息：https：//www.typescriptlang.org/docs/handbook/declaration-files/consumption.html。
TypeScript 2将自动包含编译中@Types名称空间下的任何已安装软件包。对于NG-Metadata项目，我们将需要以下声明文件：
-
npm install --save @types/core-js// core-js的es2015/es6 shim nock nocke nocke nocke nocky nocke nocky nocky nocke nocky nocke nocky（eS6）的基本功能，对全局上下文（窗口）进行修补 -
npm install --save @types/node// for nodejs环境中引用对象的代码 -
npm install --save @types/jquery//我们需要它以适当地键入Angular Jqlite -
npm install --save @types/angular// Angular 1类型定义，因此您可以获得Angular 1 API类型检查 -
npm install --save @types/angular-mocks//对单元测试的打字支持
模块装载机 /捆绑器
我们更喜欢webpack ，但您也可以使用SystemJS ，这使我想起了Requirejs配置地狱，但是是的，这取决于您;）
- 有关WebPack配置，请参见我们的Angular 1入门
- 有关SystemJS配置
就是这样！你很好！
为什么？
这些只是我制作ng-metadata的几个原因。
ng-metadata：
- 可以用作升级策略的一部分，当迁移到Angular 2时，该策略也可能包括NG-Upgrade
- 在引擎盖下仅使用纯Angular 1 API
- 模板与Angular 1 +中的绑定类型相同（ng2 like）确定
- 支持各种Angular 1 API，例如创建提供商/配置/Runblocks等等
支持
需要帮助吗？
跳入NGPARTY SLACK团队参加讨论…
认为您找到了一个错误？
首先检查问题列表，以查看其他人是否已经找到了它，并且正在进行讨论。如果没有，请提交问题。谢谢！
为该项目做出贡献
我们想要帮助！请查看指南的贡献指南，然后跳入Slack团队，讨论您如何提供帮助：http：//ngparty.slack.com …如果您不是成员，请加入我们
