在角2依赖注入与ES5 [英] Dependency Injection in Angular 2 with ES5

查看：224
本文介绍了在角2依赖注入与ES5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假如我有两个单独的组件。其中定义了我的应用元素，一是定义了孩子元素。

我要的孩子组件是我的应用（根）组件的依赖关系。

这是如何做呢？

myapp.component.js 

 （功能（应用程序）{
  app.AppComponent = ng.core
    。零件（{
      选择：我的应用，
      模板：'＆LT; H1＆gt;我的第一角2应用!!＆LT; / H1＆GT;'
    }）
    。类（{
      构造：函数（）{}
    }）;
}）（window.app ||（window.app = {}））;

child.component.js 

 （功能（应用程序）{
  app.ChildComponent = ng.core
    。零件（{
      选择：'孩子'，
      模板：'＆所述; H3＆gt;这是子＆lt; / H3＆GT;'，    }）
    。类（{
      构造：函数（）{}
    }）;
}）（window.app ||（window.app = {}））;


解决方案

在事实上，它是类似于我们在打字稿版本;-)东西。您需要配置供应商：


  • 在引导方法中应用程序级

  • 在提供商内的组件级属性

有两个伟大的博客文章写作与ES5 Angular2应用程序时，可以帮助你：

下面是ES5一个完整的工作只样本：


  • index.html的作为JavaScript文件包括

     ＆LT;！DOCTYPE HTML＆GT;
    ＆LT; HTML和GT;
      ＆LT; HEAD＆GT;
        ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/Rx.umd.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/angular2-polyfills.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js＆GT;＆LT; / SCRIPT＆GT;
        ＆所述; SCRIPT SRC =main.js＆GT;＆下; /脚本＆GT;
      ＆LT; /头＆GT;
      ＆LT;身体GT;
        ＆LT; CMP＆GT;＆放大器; LT; / CMP＆GT;
      ＆LT; /身体GT;
    ＆LT; / HTML＆GT;


  • 该服务的定义 

      VAR服务=功能（）{};
    Service.prototype.greeting =功能（）{
      返回'你好';
    };


  • 组件的定义 

      VAR CMP =
      ng.core.Component（{
        选择：CMP
    }）。
    视图（{
      模板：{{问候}}的世界！
    }）。
    类（{
      构造函数：[服务功能（服务）{
        this.greeting = service.greeting（）;
      }]
    }）;


  • 引导的 CMP 组件为应用程序组件

      document.addEventListener（'DOMContentLoaded'，函数（）{
      ng.platform.browser.bootstrap（CMP）;
    }）;


  • 依赖注入在应用程序级。只要引导函数添加第二个参数。它的值对应于包含服务对象的数组。

      document.addEventListener（'DOMContentLoaded'，函数（）{
      ng.platform.browser.bootstrap（CMP，[服务]）;
    }）;


  • 依赖注入组件级。只需添加一个提供商属性组件配置对象。它的值是一个包含服务数组对象。

      VAR CMP = ng.core。
    零件（{
      选择：CMP，
      供应商：[服务]
    }）。
    视图（{
      模板：{{问候}}的世界！
    }）。
    类（{
      构造函数：[服务功能（服务）{
        this.greeting = service.greeting（）;
      }]
    }）;


视图的

如果您要使用另一个里面一个组件，只需利用指令属性，如下所述。在 CmpChild 组件在 CMP 人用。

  VAR CmpChild = ng.core。
  零件（{
    选择：'孩子'
  }）。
  视图（{
    模板：{{问候}}的世界！
  }）。
  类（{
    构造函数：[服务功能（服务）{
      this.greeting = service.greeting（）;
    }]
  }）;VAR CMP = ng.core。
  零件（{
    选择：CMP
  }）。
  视图（{
    模板：'＆LT;儿童＆GT;＆LT; /儿童＆GT;，
    指令：[CmpChild]
  }）。
  类（{
    构造函数：[服务功能（服务）{    }]
  }）;

希望它可以帮助你，
蒂埃里

Suppose I've got two separate components. One defines the my-app element, one defines the child element.

I want the child component to be a dependency of the my-app (root) component.

How is this done?

myapp.component.js

(function(app) {
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App!!</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

child.component.js

(function(app) {
  app.ChildComponent = ng.core
    .Component({
      selector: 'child',
      template: '<h3>This is the child</h3>',

    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

解决方案

In fact, it's something similar to what we have in the Typescript version ;-). You need to configure providers:

  • At the application-level within the bootstrap method
  • At the component-level within the providers property

There are two great blog posts that can help you when writing Angular2 applications with ES5:

Here is a complete working sample with ES5 only:

  • index.html for JavaScript files to include

    <!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <cmp>&lt;/cmp>
  </body>
</html>

  • Definition of the service

    var Service = function() {};
Service.prototype.greeting = function() {
  return 'hello';
};

  • Definition of the component

    var Cmp = 
  ng.core.Component({
    selector: 'cmp'
}).
View({
  template: '{{greeting}} world!'
}).
Class({
  constructor: [Service, function(service) {
    this.greeting = service.greeting();
  }]
});

  • Bootstrap the Cmp component as application component

    document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp);
});

  • Dependency injection at application level. Simply add a second parameter to the bootstrap function. Its value corresponds to an array containing the Service object.

    document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp, [Service]);
});

  • Dependency injection at component level. Simply add a providers property in the component configuration object. Its value is an array containing the Service object.

    var Cmp = ng.core.
Component({
  selector: 'cmp',
  providers: [Service]
}).
View({
  template: '{{greeting}} world!'
}).
Class({
  constructor: [Service, function(service) {
    this.greeting = service.greeting();
  }]
});

If you want to use a component inside another one, simply leverage the directives attribute of the view, as described below. The CmpChild component is used within the Cmp one.

var CmpChild = ng.core.
  Component({
    selector: 'child'
  }).
  View({
    template: '{{greeting}} world!'
  }).
  Class({
    constructor: [Service, function(service) {
      this.greeting = service.greeting();
    }]
  });

var Cmp = ng.core.
  Component({
    selector: 'cmp'
  }).
  View({
    template: '<child></child>',
    directives: [CmpChild]
  }).
  Class({
    constructor: [Service, function(service) {

    }]
  });

Hope it helps you, Thierry

这篇关于在角2依赖注入与ES5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆