Add readme
This commit is contained in:
parent
c97290c13b
commit
2da320d262
116
README.md
Normal file
116
README.md
Normal file
@ -0,0 +1,116 @@
|
||||
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
|
||||
|
Loading…
Reference in New Issue
Block a user