一、依赖注入

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. curl常用功能

    <?php //创建一个新cURL资源 $ch = curl_init(); //******************************************************** ...

  2. [LeetCode] 29. Divide Two Integers(不使用乘除取模，求两数相除) ☆☆☆

    转载:https://blog.csdn.net/Lynn_Baby/article/details/80624180 Given two integers dividend and divisor, ...

  3. 快速切题 poj1573

    Robot Motion Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10708   Accepted: 5192 Des ...

  4. 【转载】oracle索引详解

    原文URL;http://www.oschina.net/question/30362_4057?fromerr=FiY27yLL 作者:crazyinsomnia 一. ROWID的概念 存储了ro ...

  5. Double H6.0

    Double H 博客链接 成员 学号 姓名 211606379 王熙航(队长) 211606364 李冠锐 211606350 曾磊鑫 211606457 郑沐榕 211606342 杨艺勇 211 ...

  6. Python获取路径下所有文件名

    python 获取当前文件夹下所有文件名   os 模块下有两个函数: os.walk() os.listdir() 1 # -*- coding: utf-8 -*- 2 3 import os 4 ...

  7. Android RIL结构分析与移植

    介绍 本文档对Android RIL部分的内容进行了介绍,其重点放在了Android RIL的原生代码部分. 包括四个主题: 1.Android RIL框架介绍 2.Android RIL与 Wind ...

  8. 结合P2P软件使用Ansible分发大文件

    一 应用场景描述 现在我需要向50+数量的服务器分发Logstash新版本的rpm包,大概220MB左右,直接使用Ansible的copy命令进行传输,命令如下: 1 ansible all  -m  ...

  9. hacking a friend's Linux buzzer driver in OK335xS

    /**************************************************************************** * hacking a friend's L ...

  10. 【linux基础】重命名文件和文件夹

    linux下重命名文件或文件夹的命令mv既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c mv /a /b/c 其实在文本模式 ...