一、依赖注入

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. pycharm破解方法

    1.下载破解文件到目录 E:/Program Files/JetBrains/PyCharm 2017.1.3安装目录下 链接:http://idea.lanyus.com/jar/Jetbrains ...

  2. Spring Boot的SpringApplication类详解

    相信使用过Spring Boot的开发人员,都对Spring Boot的核心模块中提供的SpringApplication类不陌生.SpringApplication类的run()方法往往在Sprin ...

  3. Win10 dell驱动触摸板安装

    Win10 dell驱动触摸板安装 在此之前安装驱动后要重启

  4. eclipse设置(颜色，字体等)

    1.设置jsp中js块的颜色: 选择Preferences菜单项.在弹出的窗口的左侧树形菜单依次选择:MyEclipse.Files and Editors.Javascript.Editor.Syn ...

  5. Java——object类

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  6. 玩转X-CTR100 l 平台-4WD智能小车

    我造轮子,你造车,创客一起造起来!更多塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] 本文介绍使用X-CTR100控制器搭建4WD智能 ...

  7. html内容滚动

    <marquee srolldelay="50" direction="up"></marquee> 滚动标签<marquee&g ...

  8. React 源码剖析系列 － 不可思议的 react diff

      简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...

  9. Android Mms之:深入MMS支持

    Composing and editing MMS在Android Mms应用里面的具体实现形式,或数据结构是SlideshowModel,它是一个每个节点为SlideModel的ArrayList, ...

  10. 安装pyenv virtualenv

    地址:https://github.com/pyenv/pyenv-virtualenv Check out pyenv-virtualenv into plugin directory $ git ...