一、依赖注入

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. 微信小程序跨页面获取数据示例

    index.wxml <navigator class="navs" url="{{urls}}"> 中国 </navigator> i ...

  2. PHP excel reader , excel时间转成php时间格式

    最近,在做一个导入功能,在系统中使用PHPExcel类库,读取上传的Excel文件,然后进行字段映射,最后将Excel内的数据导入到系统中.其中,关于日期格式的导入,使我犯了难. 首先,如何导入日期, ...

  3. 《Python》反射、内置方法（__str__，__repr__）

    一.反射 通过字符串的形式操作对象相关的属性.(使用字符串数据类型的变量名来获取这个变量的值) Python中的一切事物都是对象(都可以使用反射) 反射类中的变量 反射对象中的变量 反射模板中的变量 ...

  4. centos6：一个网卡上显示多个ip地址的错误

    网卡显示如下:  上面显示em1有两个ip地址,其中36是设置的固定IP,212这个ip不清楚怎么搞出来的,但是通过212地址也能够正常连接主机.重启网卡之后,还是没有变化. 网卡em1配置如下,/e ...

  5. linux定时任务：crontab命令

    crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查 ...

  6. css 课堂笔记

    css:层叠样式表  Cascading( [kæ'skeɪdɪŋ] 级联)Style Sheet css基本语法结构:选择器{ 属性:值; 属性:值: ... } 三种主要的选择器: 标签选择器: ...

  7. 了解SAGA

    萨迦(尤指古代挪威或冰岛讲述冒险经历和英雄业绩的长篇故事)

  8. Alpha版本展示

    一.团队成员的简介和个人博客地址,团队的源码仓库地址. 1.团队的源码仓库地址 我们主要通过码云来管理代码,码云地址:https://gitee.com/ljl36/team_programming ...

  9. cocos2d-x中用到的一些宏

    最近我们的cocos2d-x游戏项目已经进入了正式开发的阶段了,几个dev都辛苦码代码.cocos2d-x还是一套比较方便的api的,什么action啊.director啊.ccpoint啊都蛮便捷的 ...

  10. null与undefined

    null是一个表示"无"的对象,转为数值时为0:undefined是一个表示"无"的原始值,转为数值时为NaN. undefined和null在if语句中,都会 ...