Ninja Squad - Become a ninja with Angular (v13.0.0)

1. 17. Send and receive data through HTTP
   1. 17.1. Getting data
   2. 17.2. Transforming data
   3. 17.3. Advanced options
   4. 17.4. Jsonp
   5. 17.5. Interceptors
   6. 17.6. Context
   7. 17.7. Tests

So you want to be a ninja, huh?Well, youre in good hands!

But we have a long road, you and me,with lots of things to learn :).

Were living exciting times in Web development.There is a new Angular. A complete rewrite of the good old AngularJS.Why a complete rewrite? Was AngularJS 1.x not enough?

I like the old AngularJS very much.In our small company, we have built several projects with it,contributed code to the core framework,trained hundreds of developers (yes, really),and even written a book about it (in French, but that still counts).

AngularJS is incredibly productive once you have mastered it.Despite all of this, it doesnt prevent us from seeing its weaknesses.AngularJS is not perfect, with some very difficult concepts to grasp, and traps hard to avoid.

Most of all, the Web has changed since AngularJS was conceived.JavaScript has changed.New frameworks have emerged, with great ideas, or better implementation.We are not the kind of developers to tell you that you should use this tool instead of that one.We just happen to know some tools very well, and know what fits the project.AngularJS was one of those tools, allowing us to build well-tested web applications,and to build them fast.We also tried to bend it where it didnt fit. Dont blame us, it happens to the best of us.

Will Angular be the tool we will use without hesitation in our future projects?Its hard to say right now, because the framework is really young and the ecosystem only just blooming.

But Angular has a lot of interesting points, and a vision that few other frameworks have.It has been designed for the Web of tomorrow, with ECMAScript 6, Web Components and Mobile in mind.When it was first announced, I was, like many, sad at firstthat the 2.0 version would not be a simple update (Im sorry if youre just learning about it).

But I was also eager to see what solution the talented Google team would come up with.

So I started to write this ebook, pretty much after the first commits,reading the design docs, watching the conference videos, reviewing every commit since the beginning.When I wrote my first ebook, about AngularJS 1.x, it was already a stable and known beast.This one is very different.It started when Angular was not even clear in the minds of its designers.Because I knew I would learn a lot, not only about Angularbut also about the concepts that would shape the future of Web development,some of which have nothing to do with Angular.And I did. I had to dig deep about some of these concepts,and I hope that you will enjoy the journey of learning about them, and how they relate to Angular, as much as I did.

The ambition of this ebook is to evolve with Angular.If it turns out that Angular is the great framework we hope,you will receive updates with the best practices and some new features as they emerge(and with fewer typos, because, despite our countless reviews, there are probably some left).And I would love to hear back from you - if some chapters arent clear enough,if you spot a mistake or if you have a better way for some parts.

Im fairly confident about the code samples, though,as they are all in a real project, with several hundred unit tests.It was the only way to write an ebook with a newborn framework,and to be able to catch all the problems that inevitably arose with each release.

Even if you are not convinced by Angular in the end,Im pretty sure you will have learnt a thing or two along your read.

If you have bought the "Pro package" (thank you!), youll build a small application piece by piece along the book.This application is called PonyRacer, and it is a website where you can bet on pony races.You can even test the application here!Go on, Ill wait for you.

Fun, isnt it?

But its not just a fun application, its a complete one.Youll have to write components, forms, tests, use the router, call an HTTP API (that we have already built)and even do Web Sockets.It has all the pieces youll need for writing a real app.Each exercise will come with a skeleton, a set of instructions and a few tests.Once you have all the tests in success, you have completed the exercise!

The first 6 exercises of the Pro Pack are free.The other ones are only accessible if you buy our online training.At the end of every chapter,we will link to the exercises of the Pro Pack that are related to the features explained in the chapter,mark the free ones with the following label:, and mark the other ones with the following label:.

If you did not buy the "Pro package" (but really you should), dont worry:youll learn everything thats needed.But you will not build this awesome application with beautiful ponies in pixel art.Your loss :)!

You will quickly see that, beyond Angular itself, we have tried to explain the core concepts the framework uses.The first chapters dont even talk about Angular:they are what I call the "Concept Chapters",here to help you level up with the new and exciting things happening in our field.

Then we will slowly build our knowledge of the framework, with components, templates, pipes, forms, http, routing, tests

And finally we will learn about the advanced topics.But thats another story.

Enough with the introduction,lets start with one of the things that will definitely change the way we code: ECMAScript 6.

The ebook is using Angular version 13.0.0 for the examples.

This book used to be named "Become a Ninja with Angular 2".Because, originally, Google named its framework Angular 2.But in October 2016, they reviewed their versioning and release policy.

We now have a major release every six months, according to the plan.And the framework should be called just Angular.

Dont worry, these releases are not a complete rewrite with no backward compatibility like Angular 2 was to AngularJS 1.x.

As this ebook will be updated (for free) with all the future major releases,it is now named "Become a Ninja with Angular" (without any number).

If youre reading this, we can be pretty sure you have heard of JavaScript.What we call JS is one implementation of a standard specification, called ECMAScript.The spec version you know the most about is version 5, that has been used these last years.

But, in 2015, a new version of the spec was released,called ECMAScript 2015, ES2015, or sometimes ES6,as it was the sixth version of the specification.And since then, we have had a yearly release of the specification (ES2016, ES2017, etc.),with a few new features every year.From now on, Ill mainly say ES2015, as it is the most popular way to reference it,or ES2015+ to reference ES2015, ES2016, ES2017, etc.It adds A LOT of things to JavaScript, like classes, constants, arrow functions, generatorsIt has so much stuff that we cant go through all of it, as it would take the whole book.But Angular has been designed to take advantage of the brand new version of JavaScript.And, even if you can still use your old JavaScript, things will be more awesome if you use ES2015+.So were going to spend some time in this chapter to get a grip on what ES2015+ is,and what will be useful to us when building an Angular app.

That means were going to leave a lot of stuff aside, and we wont be exhaustive on the rest,but it will be a great starting point. If you already know ES2015+, you can skip these pages.And if you dont, you will learn some pretty amazing things that will be useful to you evenif you end up not using Angular in the future!