TypeScript ja AngularJS

Kloonige https://bitbucket.org/mkalmo/i399exng1ts repo ja importige see IDE-sse.

1. Laadige teegid

   npm install

2. Uurige TypeScripti tüüpide käitumist (failis sample.ts). Enne IDE-sse kopeerimist ja käivitamist arvake, kas kood on õige ja kuidas see käitub.

   Koodi käivitamiseks:

   npm run build-sample

   käivitab webpack-i, mis loob faili build/bundle.js

   node build/bundle.js

   käivitab kompileeritud (transleeritud) koodi.

   a)

   let a: number = 3; a = '3';

   b)

   let c: any; c = 1; c = '1';

   c)

   let post = new Post('title 1', 'text 1');

   console.log(post.getTitle());

   let object = {}; post = object;

   console.log(post.getTitle());

   d)

   let a = 1; let b = '1'; a = b;

   e)

   let dao = new Dao(); let post = dao.getPost(); post.date = new Date();

   f)

   let dao = new Dao(); let post = dao.getPostTyped(); post.date = new Date();

   g) Uurige build/bundle.js faili sisu.

3. Käivitage webpack-dev-server

   npm run serve

   See peaks serveerima rakenduse aadressilt: http://localhost:3001 Koodi muutes peaks rakendus ennast ise värskendama.

4. Tõlkige rakendus TypeScrpit-i.

   function AddCtrl($location: any, dataService: any) { ... }

   saab olema

   export class AddCtrl { ...

   kontrollerite registreerimine läheb app.ts faili.

   Tüübid: $location: ILocationService $routeProvider: angular.route.IRouteProvider $locationProvider: ILocationProvider $q: IQService

5. Kasutage MemDataService klassi asemel RestDataService klassi.

   a) Määrake app.ts failis andmete teenuseks RestDataService.

   b) käivitage back-end teenus

   npm run back-end

   c) lisage webpack-i konfiguratioonile (webpack.config.js) proxy back-end teenusele:

   devServer: { proxy: { '/api': { target: 'http://localhost:3000', secure: false } } }

6. Ehitage rakendus ja serveerige see staatiliselt.

   a) sulgege webpack-dev-server b) ehitage rakendus

   npm run build tekkis fail build/bundle.js, milles on kogu rakendus c) lugege rakendus läbi back-end teenuse aadressilt http://localhost:3000 ja kontrollige, et kõik, töötab.

Lahendused: https://youtu.be/2Ncy50LWCK4