1. 使用angularCLI命令行创建项目
2. 创建组件 ng g component product1
3. 创建服务放在shared的文件夹下面 ng g service shared/product
4. 在shared/product.component.ts内进行操作

   export class ProductService {constructor() { }// 2.声明一个方法返回一个Product对象getProduct(): Product {// 这里面没有发挥一个数据库，只是一个简单的返回值return new Product(0,'iphone7',5889,'最新款苹果手机');}
   }
   // 1.定义一个用来封装商品信息的类
   export class Product {// 通过构造函数定义里面的字段constructor(public id:number,public  title:string,public price:number,public desc:string) {}
   }

    

5. 在app.module.ts内修改代码

   //在@NgModule内的providers内加入类，同时会关联一个import
   @NgModule({declarations: [AppComponent,Product1Component],imports: [BrowserModule,AppRoutingModule],providers: [ProductService],bootstrap: [AppComponent]
   })

    

6. 在product1.component.ts内写入下面代码

   import { Component, OnInit } from '@angular/core';
   // 需要手动注入的
   import {Product, ProductService} from '../shared/product.service';
   @Component({selector: 'app-product1',templateUrl: './product1.component.html',styleUrls: ['./product1.component.css']
   })
   export class Product1Component implements OnInit {// 1、声明一个product属性用来接收从服务中获取的数据product: Product;// 2.在构造函数内通过依赖注入,声明需要一个token类型是ProductService的这样的一个服务constructor(private productService: ProductService) { }// 3.在方法里面操作ngOnInit() {this.product = this.productService.getProduct();}
   }
   // 这里面实现顺序是商品服务ProductService通过组件Product1Component的构造函数通过getProduct方法获取数据，然后赋值给product,然后在模板上显示数据

    

7. 修改product1.component.html

   <div><h1>商品详情</h1><h2>名称{{product.title}}</h2><h2>名称{{product.price}}</h2><h2>名称{{product.desc}}</h2>
   </div>

    

8. 修改app.component.html

   <div><div><h1>基本的依赖注入样式</h1></div><div><app-product1></app-product1></div>
   </div>

    

ng serve --open 运行

组件或者指令声明自己需要类型为productService的token  要使用其构造函数
    ProductComponent这个组件本身并不知道传进来的是productService的哪个实现，更不需要实例化这个ProductService
    只需要使用angular为它创建好的对象，调用其方法就可以，如果需要在其他组件中重用这个 ProductComponent组件，而其组件又实现了一个productService的类，可以修改那个组件的AppModule声明成providers: [{provide:ProductService, useClass:AnotherProductService}],这时angular框架将会实现AnotherProductService这个类型，并将其注入到ProductComponent中，而ProductComponent本身并不需要什么更改

1. 创建以组件product2 和一个服务 anotherProductService
2. 修改anotherProductService.ts 只修改了内部的返回数据。

   import { Injectable } from '@angular/core';
   import {ProductService, Product} from './product.service';
   @Injectable({providedIn: 'root'
   })
   // 这个服务将会实现implements ProductService
   export class AnotherProductService implements ProductService{getProduct(): Product {return new Product(1,'iphon11',1499,'最新款苹果11')}constructor() { }
   }
   

    

3. 修改product2.component.ts,添加providers数据

   import { Component, OnInit } from '@angular/core';
   import {ProductService} from '../shared/product.service';
   import {Product } from '../shared/product.service';
   import {AnotherProductService} from '../shared/another-product.service';
   @Component({selector: 'app-product2',templateUrl: './product2.component.html',styleUrls: ['./product2.component.css'],providers: [{provide: ProductService,useClass: AnotherProductService,}]
   })
   export class Product2Component implements OnInit {// 1、声明一个product属性用来接收从服务中获取的数据product: Product;// 2.在构造函数内通过依赖注入,声明需要一个token类型是ProductService的这样的一个服务constructor(private productService: ProductService) { }// 3.在方法里面操作ngOnInit() {this.product = this.productService.getProduct();}
   }

    

4. 修改product2.component.html文件同product1.component.html
5. 添加<app-product2>标签到app.component.html中
6. ng serve --open 实现