117 lines
2.5 KiB
Markdown
117 lines
2.5 KiB
Markdown
|
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 = <Post> object;
|
||
|
|
||
|
console.log(post.getTitle());
|
||
|
|
||
|
d)
|
||
|
|
||
|
let a = 1;
|
||
|
let b = '1';
|
||
|
a = <number> 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
|
||
|
|