{"id":4883,"date":"2017-05-07T10:09:46","date_gmt":"2017-05-07T10:09:46","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=4883"},"modified":"2017-05-07T10:09:46","modified_gmt":"2017-05-07T10:09:46","slug":"service-injection-with-angular-2","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/service-injection-with-angular-2\/","title":{"rendered":"Service Injection with Angular 2"},"content":{"rendered":"

Note: This post is based heavily on the Angular 2 tutorial, Services<\/a>, hopefully I can add something useful to this.<\/em><\/p>\n

We all know what dependency injection<\/a> is about, right?<\/p>\n

Let’s see how we create and inject services using Angular 2.<\/p>\n

Naming convention<\/strong><\/p>\n

With components, the convention is to create a TypeScript component class suffixed with the work Component<\/em>, hence our detail component class would be named DetailComponent and likewise the convention with regards to the file naming is to name file detail.component.ts (all lower case).<\/p>\n

We use a similar convention for services. The TypeScript class might be named MyDataService therefore our file would be my-data.service.ts <\/p>\n

Note: the hyphen between word boundaries and ofcourse replacing component with service.<\/em><\/p>\n

Creating our service<\/strong><\/p>\n

Let’s create a simple data service. As per our naming convention, create a file named my-data.service.ts and here’s the code<\/p>\n

\r\nimport { Injectable } from '@angular\/core';\r\n\r\n@Injectable()\r\nexport class MyDataService {\r\n   \/\/ methods etc. omitted\r\n}\r\n<\/pre>\n
To quote the Angular 2 documentation<\/a>…<\/p>\n
The @Injectable() decorator tells TypeScript to emit metadata about the service. The metadata specifies that Angular may need to inject other dependencies into this service.<\/em><\/p>\n
Using the service<\/strong><\/p>\n
In the code that uses the service we still need to import<\/em> the service (as obviously we need a reference to the type) but instead of our component\/code creating the service, we leave this to Angular 2. So the usual would be to create a constructor and allow Angular 2 to inject our service via the constructor. For example here’s the bare bones for a DetailsComponent that uses the previously implemented service<\/p>\n
\r\n\/\/ other imports omitted\r\nimport { MyDataService } from '.\/my-data.service';\r\n\r\n@Component({\r\n   \/\/ selector etc. \r\n   providers: [MyDataService];\r\n})\r\nexport class DetailsComponent {\r\n   constructor(private myDataService: MyDataService) {\r\n   }\r\n}\r\n<\/pre>\n
Notice we also need to register our service in the providers array either within the component or within the app.modules.ts inside the @NgModule.<\/p>\n
If the service is registered with providers in a component, then an instance is created when the component is created (and is available for any child components), whereas registering within @NgModule would be more like creating a singleton of the service as the service would be created when the module is created and then available to all components.<\/p>\n","protected":false},"excerpt":{"rendered":"
Note: This post is based heavily on the Angular 2 tutorial, Services, hopefully I can add something useful to this. We all know what dependency injection is about, right? Let’s see how we create and inject services using Angular 2. Naming convention With components, the convention is to create a TypeScript component class suffixed with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[170],"tags":[],"class_list":["post-4883","post","type-post","status-publish","format-standard","hentry","category-angular"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=4883"}],"version-history":[{"count":6,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4883\/revisions"}],"predecessor-version":[{"id":4903,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4883\/revisions\/4903"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=4883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=4883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=4883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}