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组件上的注册@Component Metadata通过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 : ``
} )
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 ）添加到我们的项目中，以指导编译器生成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 ...如果您不是成员，请加入我们