Skocz do zawartości

Zdjęcie
- - - - -

[AngularJS] Pierwsze starcie


5 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 09 lipca 2014 - 20:48

#1

Siemanko!

 

Mam chwilę aby podzielić się z wami podstawami o AngularJS, którego mam nadzieje zacznie używać więcej ludzi w Polsce :)

 

Link do strony domowej: https://angularjs.org/

 

AngularJS to JavaScriptowski framework MVW, wypluty przez google, który jest dość łatwy w uzyciu, bardzo szybko wykonamy rzeczy, które w czystym JS zajmują o wiele więcej czasu i posiada on bardzo dużo plusów na tle pozostałych z tej kategorii.

 

Dobra, pierwsze co to zacznijmy od 'zainstalowania' biblioteki. Stwórzmy prosty dokument z dodanym frameworkiem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mój pierwszy skrypt!</title>
    <script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
    // document body here!
</body>
</html>

Jesli mamy już stworzony plik, który zawiera plik z AngularJS, teraz czas na wykonanie kilku prostych poleceń, które 'ożywią' nasz dokument!

 

Piwersze z nich to dodanie 'ng-app' jako wbudowanej dyrektywy, która definiuje naszą aplikacje. Wszystko pomiędzy tą dyrektywą co związane jest z Angularem, będzie brane pod uwagę przy wykonywaniu skryptu :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mój pierwszy skrypt!</title>
    <script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
    <div ng-app>
        <input type="text" ng-model="q">
        <span>{{q}}</span>    
    </div>
</body>
</html>

Tutaj mamy do czynienia także z wbudowaną dyrektywą jaką jest ng-model. Generalnie prefiks 'ng' jest zarezerwowany dla wbudowanych dyrektyw w tym frameworków.

ng-model definiuje model danych, które są sprawdzane pod kątem zmian oraz przetwarzane w tym frameworku. Działanie to jest trawione w definicji zwanej digest cycle ale o tym troszkę później. ng-model można określić jako model danych wysyłanych do rdzenia frameworka :) Czyli jak wpiszemy w pole tkstowe tekst, Angular przetrawi go i zwróci wynik końcowy natychmiast.

 

Jak widać, użyłem także tagów {{ }} typowych dla AngularJS, pomiędzy nim, w prostszy sposó (co nie znaczy że najlepszy) definiujemy naszą treść, którą Angular wypluje - dobrym porównaniem jest 'echo' w PHP.

 

Tutaj można zobaczyć proste demo: http://jsfiddle.net/5Tb88/

 

Czyż nie jest łatwe ? Jest. Jednakże to jest początek góry lodowej, która czeka nas do wyuczenia, jeśli chcemy oczywiście cokolwiek tworzyć w tym frameworku.

 

To są akurat podstawy podstaw, opisane moimi słowami, myślę że to taki przedsmak tego co opiszę w następnych tematach. Chciałbym je rozdzielić na więcej i mniejszych tematów, ponieważ z doświadczenia wiem, że z tym co za dużo to i nie zdrowo.

 

Także nie długo kolejna część, bardziej treściwa na temat ogólnie dyrektyw, wbudowanych dyrektyw w AngularJS oraz stworzymy jakiś prosty skrypcik, który będzie korzystał z ich mocy :)

 

Tymczasem zachęcam do czytania przede wszytskim dokumentacji i powodzenia w nacue tym, którzy są zainteresowani w tym temace :)


  • 4

2ed58r7.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 10 lipca 2014 - 09:30

#2

Fajne, mam tylko 3 uwagi:

1. Do czynienia, a nie doczynienia :D

2. Na początek przydałoby się krótkie info co to w ogóle jest angularjs jeżeli masz zamiar zachęcić tym fw :)

3. Koniec posta to trochę dziwne miejsce na pisanie "zachęcam do lektury posta" ;)

 

Poza tym świetna robota.


  • 0

webDeveloper


Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 10 lipca 2014 - 21:13

#3

Fajne, mam tylko 3 uwagi:

1. Do czynienia, a nie doczynienia :D

2. Na początek przydałoby się krótkie info co to w ogóle jest angularjs jeżeli masz zamiar zachęcić tym fw :)

3. Koniec posta to trochę dziwne miejsce na pisanie "zachęcam do lektury posta" ;)

 

Poza tym świetna robota.

 

Poprawiłem trochę wpis, dzięki za review :P Wybaczcie za takie pomyłki, ale chodzę już do tyłu z nadmiaru obowiązków :P

Co do opisu angulara to podałem stronę domową, ale także dodałem krótkie info o tym co to jest i po co :P


  • 0

2ed58r7.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 11 lipca 2014 - 07:14

#4

Dzięki, oglądnąłem tutorial na ich stronie i wygląda ciekawie. Choć z drugiej strony zastanawiam się w czym mogłoby to mieć takie praktyczne zastosowanie. Chyba jedynie w apkach mobilnych.


Chociaż w sumie nie, może mieć znacznie więcej zastosować. Przecież jsona z danymi można dynamicznie generować z bazy za pomocą server side scripta np PHP i wtedy strona ma pełną funkcjonalność i do tego działa bez przeładowywań :D


  • 0

webDeveloper


Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 11 lipca 2014 - 18:22

#5

Dokładnie jest tak jak piszesz. Kilka osób, które znam mówią iż nie wierzą w sukces tego frameworka, ale ja osobiscie nie widzę ograniczeń, ponieważ można napisać w nim bardzo dużo, aczkolwiek wiadomo, że na siłe nie będziemy pisać skoro znalazłoby się przykładowo narzędzie dedykowane które zrobi jakieś zadanie lepiej. Jednakże wiele jest możliwości. Autor Angulara Miško Hevery stwierdził ostatnio fakt, iż AngularJS nadaje się najlepiej dla formularzy i temu podobnych w aplikacjach SPA oczywiście.

 

Jesli chodzi o bazy danych to jest takie coś jak FireBase, gdzie Angular posiada do tego plugin, który umożliwia nam bindowanie danych pomiędzy Firebase a Angularem i powiedzmy, że wpisując cos w inpucie powyżej, widząc rezultat obok, tak też zapisujemy dane do Firebase'a, który od razu zwraca nam wynik. Jest to fajny efekt, kiedy dwóch użytkowników jest na stronie i jeden z nich pisze a drugi na żywo widzi co ten pierwszy pisze :P Fajna sprawa :P


  • 0

2ed58r7.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 14 lipca 2014 - 07:43

#6

No faktycznie, na tym - lub na czymś podobnym zapewne działa komunikator np na FB. Można mieć otwartych kilka okien a i tak na każdym masz najnowsze wiadomości :)

Będę musiał się przyjrzeć temu rozwiązaniu, bo czuję w nim potencjał :) Choć chyba nie jest to twór najnowszy :P


  • 0

webDeveloper






Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych