AJAX and TypeScript

In this section, we will use TypeScript to compose an AJAX service.

Creating the connection service

This service wishes to connect to the internet, and so needs to be able to talk to http. In order to do this we need to inject http into it.

As before, we're going to use JSONP, because we want to talk to a service that doesn't support CORS.

First we add the JSON providers to our global injector, like so (app.ts):

Making HTTP available

HTTP lives in a separate JavaScript file which you will need to include.

You will need to import node_modules/angular2/bundles/http.dev.js

Your HTML will look like this:

<html>
            <head>
              <title>AJAX</title>
          
              <script src="node_modules/es6-shim/es6-shim.min.js"></script>
              <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
              <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
              <script src="node_modules/systemjs/dist/system.src.js"></script>
              <script src="node_modules/rxjs/bundles/Rx.js"></script>
              <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
              <script src="node_modules/angular2/bundles/http.dev.js"></script>
          
              <script>
                System.config({
                  packages: {
                    app: {
                      format: 'register',
                      defaultExtension: 'js'
                    }
                  }
                });
                System.import('app/app')
                      .then(null, console.error.bind(console));
              </script>
          
          
            </head>
            <body>
              <app></app>
            </body>
          </html>

Configuring the injector

I would like to make JSONP available globally, so I configure the injector in my app.ts file, like so:

import {bootstrap}    from 'angular2/platform/browser'
          import {AppComponent} from './app.component'
          import {JSONP_PROVIDERS} from 'angular2/http'
          
          bootstrap(AppComponent, [JSONP_PROVIDERS]);

Creating the Service and Making it Injectable

Now we can create our service. Here is a weather.service.ts

import {Injectable} from 'angular2/core';
          import {Jsonp} from 'angular2/http';
          
          @Injectable()
          export class WeatherService {
            cats
            constructor(jsonp: Jsonp) {
              this.url = "http://www.myweather.com/getweather" // Note this is not a real weather URL!
              this.jsonp = jsonp;
            }
            get() {
                return jsonp.get(this.url)
            }
          }

Notice the @Injectable decorator. This is essentially an empty decorator.

TypeScript will only emit typing metadata if there is a decorator that might depend on it. Using this decorator forces TypeScript to emit the metadata, which allows Angular to determine the types for injection.

Injecting the Service

Now we have our service, we can inject it into a weather component (weather.component.ts).

import {Component} from 'angular2/core';
          import {WeatherService} from './weather.service';
          
          @Component({
              selector: 'weather',
              template: `
                <pre>{{weather | json}}</pre>
              `,
              directives: [],
              providers: [WeatherService]
          
          })
          export class WeatherComponent {
            constructor(weather: WeatherService) {
              var vm = this;
              weather.get()
                .subscribe(function(response) {
                  vm.weather = response.json()
                })
            }
          }

Exercise - Flickr

We are going to extend the Flickr code from earlier. Using the above as a base. grab a feed from Flickr, and us an *ngFor to render it on the page.

The flickr JSONP endpoint looks like this:

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=JSONP_CALLBACK