How to Build an Angular 2 Service
- So subscribe() is going to get our projects list as its parameter, and we can just say this.projects , which refers to our array of projects, will equal projects .
- Right now, the projects that we are displaying to the user are just hard coded right into our projects component.
- Import the Function in the Projects Component
- So in the video, we are going to create a project service.
- Now the value from extractData() will be returned inside of our getProjects() call, and Angular will see that this matches our return type because it will be an observable array of projects.
Angular 2 is a powerful and feature-complete framework that you can use to build the best web apps. Built with TypeScript in mind, Angular 2 takes advantage of futuristic language features such as…
@smokenight: How to Build an Angular 2 Service – @tutsplus @angularjs
Angular 2 is a powerful and feature-complete framework that you can use to build the best web apps. Built with TypeScript in mind, Angular 2 takes advantage of futuristic language features such as decorators and interfaces, which make coding faster and easier.
In this video from my course, Modern Web Apps With Angular 2, I’ll show you how to use Angular 2 to build a service which will interact with the server. Note that in this video, we’re building on code from earlier in the course, and you can find the full source code for the course on GitHub.
In the course so far, we’ve been building a project management application. Right now, the projects that we are displaying to the user are just hard coded right into our projects component. However, that’s not a long-term solution. We want to have some way of getting a list of projects from our server. So in this video, we are going to create a project service.
makes this class something that Angular can use as dependency injection. As we’ll see a bit later on, we use dependency injection to get an instance of this project service within a component that uses the project’s service. An Angular queue uses dependency injection in this way so that it can easily inject mock services and things like that if you want to test your components.
that we imported into our app module, and it will inject an instance of that into the constructor.
. This is going to be the method that we call to get our list of projects.
So what is an observable? Unfortunately there’s no way I could give you a complete introduction to observables here, but Angular 2 does depend quite a bit on observables, and I will try and make them as simple as possible as we go through this.
Basically, an observable is a wrapper similar to a promise or an array. Both promises, arrays, and observables have other items inside of them. In the case of an array, we have multiple items. In the case of a promise, we basically have some single value that we will get at some time in the future.
With observables, it could be one value or it could be many values. One definition that’s sometimes used is an asynchronous array. Basically, an observable is a stream of data that we may get more of at any time. And I think you’ll see over the course of some lessons here how we can use observables to make getting and setting some of our data quite a bit easier. For now, if you haven’t seen observables before, you can just think of them as a type of promise.
will perform some operation on each one of the values inside that array and then return a new array with those new values.
on a promise to call some function on the value inside of a promise. And then that returns a new promise with whatever new value you created..
on the response that’s inside this observable, and what we will return from this is an observable that wraps a project.
call, and Angular will see that this matches our return type here because it will be an observable array of projects.
inside this component. So let’s add a constructor, and we can use dependency injection in the same way that we did in our service.
keyword here so that it sets that immediately as a property.
in that it receives whatever is inside of the array, or in this case the observable.
. That way we can unwrap its value from the observable and the value will now be available from within the class.
And if we go back to the browser to see our list of projects, we will see the three projects that I put in the server.
In the full course, Modern Web Apps With Angular 2, I’ll show you how to code a complete web app with Angular 2, using the most current features and architectural patterns.
You can follow along with me and build a full-featured project management app, with user login and validation and real-time chat. You’ll get lessons on the Angular 2 template language, structuring your app, routing, form validation, services, observables, and more.
If you’ve never used Angular 2, learn everything you need to know in our course Get Started With Angular 2. If you want to build on your Angular 2 experience, why not check out: