一、依赖注入

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. SpringMVC实现RESTful服务

    SpringMVC实现RESTful服务 这里只说service,controller层的代码.Mapper层则直接继承Mapper<T>则可以,记住mybatis-config.xml一 ...

  2. OC ARC之循环引用问题（代码分析）

    // // main.m // 03-arc-循环引用 // // Created by apple on 13-8-11. // Copyright (c) 2013年 itcast. All ri ...

  3. Nginx在windows上安装 及 Nginx的配置及优化

    https://www.cnblogs.com/Chiler/p/8027167.html http://www.runoob.com/linux/nginx-install-setup.html 前 ...

  4. RowMapper使用

    public class ABRow implements RowMapper<AABB> { private String CMC; @Override public AABB mapR ...

  5. 解密微信sqlite数据库

    最近在研究解密微信APP的数据库, 1.通过Android手机内置备份功能,可以获取到微信的数据库文件,再通过adb传到电脑上. 2.获取微信EnMicroMsg.db库的密码(通过IMEI和uin值 ...

  6. git的搭建与简单实用

    svn是中央集中版本,所有的人都下载同一个版本去更新,git是分布式的,可以现在自己想要的分支.svn集中式版本控制系统不但速度慢,而且必须联网才能使用git系统的安全性高.git及其强大的分支管理g ...

  7. vuex 简单理解

    废话不多说,直接上图!                 不懂的 参考 API

  8. Python Face Recognition 实现人脸识别

    一.Face Recognition软件包 我们的人脸识别基于face_recognition库.face_recognition基于dlib实现,用深度学习训练数据,模型准确率高达99.38%. 人 ...

  9. auto类型说明符的注意事项

    1.auto类型说明符,是C++11标准下的,它能让编译器自行判断表达式的类型. 2.auto也能在一条语句上声明多个变量,但是,该语句上的多个变量的类型,必须一致. 3.编译器推断出来auto类型可 ...

  10. linux驱动程序：控制发光二极管

      一个完整的Linux驱动包括内部处理和交互两部分.其中内部处理主要是指Linux驱动的装载.卸载.与设备文件的相关动作处理以及业务逻辑等.与硬件交互主要是指通过iowrite32.ioread32 ...