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