一、依赖注入

1. 创建工程

ng new myangular

2. 创建组件

ng g componet product1

3. 创建服务

ng g service shared/product

如下图

4.服务的代码  product.service.ts

定义了一个Product类,并且在ProductService定义getProduct方法

6. product1.component.ts 中定义如下

7. 提供器声明  app.moudule.ts

8. 运行npm run start

结果如下

二、服务中使用其他服务

1. 创建logger服务

ng g service shared/logger

2. logger.service.ts logger服务中增加打印方法

3. 在Product中调用Logger服务

4. 在app.module.ts中添加提供器

5. 最终效果

三、工厂方法

每一次刷新可能会生成一种产品

2. 用具体的值来定义一个提供器

3. 对象作为提供器

Angular 4 依赖注入的更多相关文章

  1. angular 实现依赖注入

    1:首先获取module对象var myAppModule = angular.module('myApp', []); 2:定义对象(类似spring中xml声明bean对象<bean id= ...

  2. 用原生js简单模仿angular的依赖注入

    大家都知道angular 依赖注入很神奇,跟我们平常写代码的风格思维差别很大,不过仔细分析确是一个很有意思的东西,依赖注入早期也叫依赖倒置,是java中有的.废话不多少直接上例子 本帖属于原创,转载请 ...

  3. Angular的依赖注入(依赖反转)原理说明

    依赖注入(依赖反转)意思是由函数决定要引入什么样的依赖: let mod = angular.module('test',[]); mod.controller('test_c',function($ ...

  4. angular关于依赖注入

    <html> <head> <title>Angular JS Forms</title> </head> <body> < ...

  5. 【转】简单模拟angular的依赖注入

    原文:http://www.oschina.net/code/snippet_1181081_35136 代码片段 var angular = function(){}; Object.defineP ...

  6. angular 基本依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...

  7. Angular中依赖注入方式的几种写法

    1.第一种写法 angular.module('App').controller('TestCtrl',['$scope', function($scope) {}]); 2.第二种写法 angula ...

  8. -_-#【Angular】依赖注入

    AngularJS学习笔记 var BoxCtrl = function($scope, $element) { } var str = BoxCtrl.toString().replace(/\s/ ...

  9. Angular依赖注入详解

    Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...

随机推荐

  1. 72. Edit Distance *HARD*

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  2. CentOS 7中firewall防火墙详解和配置以及切换为iptables防火墙

    官方文档介绍地址: https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/Security_Gui ...

  3. angular2使用ng g component navbar创建组件报错

    Error: ELOOP: too many symbolic links encountered, stat 'C:\Users\inn\angulardemo\node_modules\@angu ...

  4. c中gets函数使用可能导致缓冲区溢出

    头文件:#include <stdio.h> gets()函数用于从缓冲区中读取字符串,其原型如下:    char *gets(char *string); gets()函数从流中读取字 ...

  5. Java虚拟机结构分析

    https://www.cnblogs.com/Eason-S/p/5658188.html https://blog.csdn.net/u013256816/article/details/5148 ...

  6. delphi中TQueue的使用问题

    TQueue里存放的是指针,所要存储的内容最好建立在堆上,在pop方法之后释放掉这个空间. 实例代码: MMSQueue:= TQueue.Create; MMSQueue.Push(StrNew(P ...

  7. EhLib TitleButton SVisibleColumnsEh = '错误的列';

    unit EhLibConsts; interface resourcestring SClearSelectedCellsEh = '清除选择的单元?'; SInvalidTextFormatEh ...

  8. Flask初级(六)flash模板渲染

    Project name :Flask_Plan templates:templates static:static 继续上篇的模板 我们已经可以静态调用模板,包括继承模板,保证了页面的一致性,但是我 ...

  9. C++零散知识点

    CString strDayofWeek = _T(""); 的意思 1.sComment是自定义的CString类型变量,代表什么意思自己说了算2._T是一个宏,作用是让你的程序 ...

  10. SSRS配置

    1. Reporting Services Configuration Manager-->Execution Account. 2. C:\Program Files\Microsoft SQ ...