ugrás a tartalomhoz

Milyen Angular mintaprogramot készítsek?

mahoo · 2017. Okt. 12. (Cs), 06.29
Most kezdtem el Angularral (2/4) foglalkozni és egyelőre tetszik.
Cél, hogy minél előbb valami kézzelfogható tudást összeszedjek, ami a már az álláskeresésben is jól jöhet.

Ennek érdekében a Mozilla MDN javascriptes, a typescriptlang.org illetve az angular.io anyagát olvasgatom.
Arra gondoltam, hogy egy olyan weboldalt/programot készítenék, ami csak néhány oldalból áll, de igyekszik felhasználni a lehető legtöbb funkciónalitást az Angulárból.

Egy webshopra esett a választás, aminek az alapja egy ingyenes bootstrap sablon, mert úgy gondolom egy ilyen feladat jó lehetőséget a gyakorlásra.

Mit gondoltok erről a 'tervről', milyen más típusú feladatot ajánlanátok?
‹ Hogyan csináljunk valamit rosszul? Az OTP oldala google recaptcha beillesztése ›
 ■
1

Szabvany

janoszen · 2017. Okt. 12. (Cs), 09.25
Sztem a webshop egyreszt nem feltetlenul hasznalja ki az Angular elonyeit, masreszt talan kicsit bonyolult is. Erdemes lenne valami egyszerubbel kezdeni, pl. user bejelentkezhet es szerkeszthet szoveges dokumentumokat amiket egy konyvtarszerkezetben helyez el. Ha ezt korrektul megcsinalod, szerver oldali tamogatassal, akkor ezzel mar epp eleg munka lesz.
2

Köszönöm a

mahoo · 2017. Okt. 12. (Cs), 13.17
Köszönöm a válaszod!!
Gondolkodtam a dolgon... teljesen igazad van, hallgatok rád. Minden bizonnyal túl nagy falat lenne elsőre.

Már csak azért is, mert az eddigi szerény ismereteim alapján már a könyvtárszerkezet kialakításán is sokat gondolkodok. Persze lehet, hogy ez nem olyan fontos, de jó lenne valami konvenciót kialakítanom.

Mivel nagyon frissek még az ismereteim (pár naposak), tegnap azon járt az agyam, hogy akkor innentől kezdve nuku jQuery?
Nem biztos, hogy jól gondolom, de úgy látom, hogy Angularral mindent meg lehet oldani, amit jQuery-vel is. Arról nem beszélve, hogy a kód szervezés, felhasználhatóság össze sem hasonlítható.
DE van esetleg olyan feladat amikor azt mondjuk, hogy bár mindekettővel meg lehet csinálni, de ez most legyen inkább jQuery?

De visszatérve a feladathoz, mert ha őszinte akarok lenni, nem tudom megítélni, hogy mik azok a feladatok, milyen típusúak, amelyek kihasználják az Angular előnyeit. Kicsit felvilágosítanál ezzel kapcsolatban?
3

Igen

janoszen · 2017. Okt. 12. (Cs), 13.48
innentől kezdve nuku jQuery?


Ha belejossz ebbe az Angular/React vilagba es vissza kell menned a jQueryhez, sikitva fogsz menekulni. Nem mindent lehet megoldani vele, de minden masra meg ott a nyers JS.

Ha erdekel, keress meg privatban, mutatok projekteket / forraskodot.

De visszatérve a feladathoz, mert ha őszinte akarok lenni, nem tudom megítélni, hogy mik azok a feladatok, milyen típusúak, amelyek kihasználják az Angular előnyeit. Kicsit felvilágosítanál ezzel kapcsolatban?


Jellemzoen ahol 10 evvel ezelott desktop klienst irtal volna.
4

Szia, csak megerositened

mahoo · 2017. Okt. 13. (P), 12.39
Szia, csak megerositened kerlek, hogy kaptal-e tolem privat uzit, eljutott hozzad?
Koszonom!
5

Eljutott

janoszen · 2017. Okt. 13. (P), 19.30
Eljutott, irtam. :)
6

Alap kérdés(ek)

mahoo · 2018. Feb. 25. (V), 13.09
Végre belekezdtem egy nagyon egyszerű ToDo program elkészítésébe, de már az elején komplikáció lépet fel (és valószínűleg még fog is).

Létrehoztam egy Task osztályt, ami az adattagokat definiálja és segít a típusvizsgálatban:
export class Task {
    id: number;
    name: string;
    description: string;
    priority: number;
    deadline: Date;
    createdAt?: Date;
    finishedAt?: Date;
    deletedAt?: Date;
}
Majd létrehoztam egy service-t, melynek a getAllTasks metódusa jelenleg localStorage-ból felolvassa a tárolt Task-okat.
  tasks: Task[];

  getAllTasks(): Task[] {
    this.tasks = JSON.parse(localStorage.getItem('tasks'));
    console.log(this.tasks);
    return this.tasks;
  }
És én azt vártam, ha a LS-ban nem megfelelő adat van, tahát pl. hiányzik bármelyik kötelező property, akkor hibára fut a program. De nem... szó nélkül beolvassa és letárolja a Task[] típusú tömben.

Természetesen, ha ugyanebben a fájlban, a konstruktorban az alábbi kódot helyezem el, akkor szól a fordító, hogy nem megfelelő adatstruktúra, mert hiányoznak a kötelező propertik.
  constructor() {
    this.tasks = [{
      id: 1,
    }];
  }
A kérdésem, hogy miért nem validál a getAllTasks(): Task[] ebben az esetben? Vagy mit néztem be? :)
7

Miért?

Hidvégi Gábor · 2018. Feb. 26. (H), 12.57
Miért foglalkozol az Angularral? Mit vársz tőle?
8

Szerintem

Pepita · 2018. Feb. 26. (H), 14.19
egyértelműen leírta:
Cél, hogy minél előbb valami kézzelfogható tudást összeszedjek, ami a már az álláskeresésben is jól jöhet.
9

Pepita megelőzött a válasszal

mahoo · 2018. Feb. 26. (H), 18.05
Pepita megelőzött a válasszal :).


Én úgy gondolom, hogy:

- natív JS ismerete nélkül senki ne akarjon keretrendszerben fejleszteni. Nem vagyok profi, de ez elmúlt időben elég sokat tudtam tanulni.

- de aki ma munkát szerentne találni FE területen, elengedhetetlen valamelyik ismert keretrendszer ismerete IS. Ergo, mondhatnám, hogy nem akarok és lehet hogy nagyon penge vagyok JS-ből, de akkor is az esetek 95%-ban a munkahelyen, egy keretrendszerben várják el, hogy fejlessz.

- és mivel (még) nem vagyok JS Ninja :) ezért "kénytelen" vagyok sodródni az árral és nem lenyűgőzni a leendő munkadóm a natív JS tudásommal.

De lehet, hogy nem jól gondolom...
10

Jól gondolod

Pepita · 2018. Feb. 26. (H), 18.24
Annyit pontosítanék azért, hogy egyáltalán nem baj az, ha a natív js tudásoddal IS le tudod nyűgözni a munkáltatót, de - tekintve, hogy többnyire záros idő- és pénz kerettel dolgoznak - muszáj valamilyen "divatos" fw-öt ismerni / használni.
Gábor a ritka kivétel (aki erősíti a szabályt), aki megteheti, hogy az "összes" projektjén, amin dolgozik, feltalálja az összes kereket natívan.

A FE fejlesztőket kereső cégeknél ez nem így van, hogy ez jó-e vagy rossz, nem lehet egyértelműen kijelenteni.
11

Angular

Hidvégi Gábor · 2018. Feb. 27. (K), 09.05
Nem jól tettem fel a kérdést, igazából arra szerettem volna kilyukadni, hogy miért pont Angular, és miért nem mondjuk React vagy Vue?

A React-et lehet natív JS-ben programozni, míg az Angularhoz meg kell tanulni a TypeScriptet.

A Vue-t is JS-ben lehet meghajtani, ráadásul a sablonnyelve rugalmasabb, mint az Angularé.
12

Jó kérdés,

Pepita · 2018. Feb. 27. (K), 10.37
erre én is kíváncsi vagyok.
Elképzelhetőnek tartom, hogy ma még elterjedtebb az Angular, mint a React, emiatt több rá a kereslet. Vue-t nem tudom.
Mindenesetre ha én akarnék most komolyabban FE-ezni, valószínűleg React-et választanám, és olyan céget, ahol erre van igény.
13

React-et is lehet TS-ben

smokey · 2018. Feb. 27. (K), 15.50
React-et is lehet TS-ben programozni, meg Angulart is natívban.
14

Dokumentáció

Hidvégi Gábor · 2018. Feb. 27. (K), 17.16
Hol találom az Angular API javascript dokumentációját? A neten az összes példa TypeScriptben készült.
15

Itt van par pelda. Angular2

smokey · 2018. Feb. 27. (K), 21.32
Itt van par pelda.

Angular2 nek volt olyan regen a doksija, hogy kivalaszthattad, hogy ts, van plain js kodot akarsz latni. Ugy nez ki ez mar nincs.

Egyebkent semmi gond a ts-el.
17

Natív

Hidvégi Gábor · 2018. Feb. 27. (K), 23.04
Kenyérrel is lehet szöget beverni.
Sajtreszelővel is lehet önkielégítést végezni.
Angulart is lehet JS-ben programozni.

Tudom, hogy nincs gond a TypeScripttel, de például mahoo azt írta, hogy natív JS-t szeretne tanulni.

Egyébként a React-et is már csak EcmaScript nemtudom hányban lehet művelni, ami gondot okozhat, ha páréves mobiltelefonokon is használnák az alkalmazást, amiket már nagy valószínűséggel nem frissítenek.
18

Kenyérrel is lehet szöget

smokey · 2018. Feb. 28. (Sze), 01.46
Kenyérrel is lehet szöget beverni.
Sajtreszelővel is lehet önkielégítést végezni.
Angulart is lehet JS-ben programozni.


Most ez pont úgy jön le, mintha nem is te kérdeztél volna rá a dokumentációra...

páréves mobiltelefonokon


Ennyire azért talán nem gáz a helyzet, hogy egy 3 éves androidon nem fut el egy mai technológiával megírt app. Egyébként pont ezért érdemes TS-t használni, hogy tudj olyan JS verziót támogatni, amit akarsz, anélkül, hogy televágnád feltételekkel a kódodat.
19

Használat

Hidvégi Gábor · 2018. Feb. 28. (Sze), 09.18
Azt állítottad, hogy Angulart lehet JS-ben programozni. Igen, lehet, csak kutya sem fogja, mert nincs hozzá normális dokumentáció, minden példát TypeScripthez írtak, és feltételezem, hogy a letölthető komponensek is jórészt ebben készülnek. Azért kérdeztem rá a doksira, hogy amikor ennek utánajársz, ezt belásd – vagy megcáfold erős érvekkel.

Ennyire azért talán nem gáz a helyzet, hogy egy 3 éves androidon nem fut el egy mai technológiával megírt app.
Nem az? A statisztikák szerint 2017 szeptemberében az összes android eszköz 30%-a M, 21%-a L, de az aktuális számok is hasonlóan magasak.

Tehát az Androidosok felének átlagosan három éves rendszere van. Tavaly májusban a Google szerint kétmilliárd aktivált Android eszköz volt a világon, ennek a felét ignorálni elég merész üzleti döntésnek tűnik.
16

Itt van par pelda. Angular2

smokey · 2018. Feb. 27. (K), 21.32
-