Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .

kurs tworzenie witryn www
szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

 

Angular tworzenie nowoczesnej strony poradnik framework JavaScript Angular

flag language

Angular tworzenie nowoczesnej strony poradnik framework JavaScript Angular

ANGULAR - JavaScript wprowadzenie - poradnik Angular

Wbrew temu co możesz przeczytać w wielu miejscach Angular nie jest niczym bardzo skomplikowanym. Wręcz powiedziałbym, że jego opanowanie jest dużo prostsze niż jakiegokolwiek języka programowania. Aby Angular zrozumieć, trzeba rozumieć podstawy programowania obiektowego. Wiedzieć musisz co to jest obiekt, jak się go tworzy, najlepiej w odniesieniu do JavaScript. Fajnie byłoby znać JavaScript, ale jeżeli nie znasz, nie przejmuj się. Ze mną nauczysz się tyle JavaScript ile będzie niezbędne do posługiwania się Angularem.

Wspominałem o programowaniu obiektowym – to jest podstawa. Musisz zrozumieć i zapamiętać, że istnieje jeden najważniejszy obiekt, superobiekt o nazwie .. angular . Na nim opiera się cała idea działania Angulara. Poprzez odniesienie się do właściwości i metod obiektu angular, tworzymy aplikacje oparte o angular.

Wezmę pod uwagę metodę  module:

angular.module() - czyli wywołujemy metodę module na obiekcie angular, w wyniku czego zwrócony zostaje obiekt Module Angulara.

Stworzę teraz zmienną poswojskuApp i przypiszę do niej zależność do Angular

var poswojskuApp = angular.module(„poswojskuApp”, []);

Zwróć uwagę na pustą tablicę umieszczoną na końcu wyrażenia w zwykłym nawiasie. Ta tablica dla Angular i dla Twojej przyszłej aplikacji jest niezbędna. Pokazuje ona zależności – elementy konieczne do funkcjonowania modułu poswojskuApp. Pusta tablica oznacza, że Twoja aplikacja nie potrzebuje żadnych dodatkowych modułów do poprawnego funkcjonowania. Ale tablicy usunąć nie możesz, nawet wtedy gdy jest ona pusta. Dlaczego? Bo takie są zasady funkcjonowania technologii angularowej.

 Plikiem, w którym zakodowane są obiekty,  właściwości i metody angulara jest angular.js. Dlatego, aby angular zadziałał, musisz podłączyć go do pliku html w taki sam sposób jak podłączasz inne pliki JavaScript, czyli:

<script src="//poswojsku.info/angular.js"></script>

Plik angular.js możesz sobie pobrać np. ze strony internetowej projektu Angularjs.

Poza podłączeniem Angular, aby zadziałał on wewnątrz pliku html, muszę określić zależności, czyli wskazać html, jaką jego częścią będą zarządzały tworzone elementy Angular. Jeżeli cały html będzie zarządzany przez stworzony moduł poswojskuApp, wówczas na początku dokumentu wskazujemy na tę możliwość:

<!DOCTYPE html>

<html ng-app=" poswojskuApp ">

Zapis <html ng-app=" poswojskuApp "> - nakazuje html słuchać poleceń dyrektywy poswojskuApp.

ANGULAR - początek pracy z Angular.js zrozumienie logiki framework’a Angular - poradnik Angular

 

framework JavaScript po polsku

Na początek podobnie jak z plikami css czy javascript, trzeba dołączyć Angular do naszej strony www:

<script src="//poswojsku.info/http%20%3A//%20ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Angulara można także dołączyć lokalnie, ale wówczas trzeba ściągnąć Angular na własny dysk.

Angular musi być poinformowany, że będzie wykorzystany na stronie www- poprzez kod: ng- lub data-ng - dyrektywy umieszczane w tagach HTML rozszerzają i definiują działanie zgodne z wytycznymi Angular.

 

framework JavaScript poswojsku

 

 

Ciekawostka Angular kontra validatory html:

 

Angular: ng- czy data-ng? Właściwie nie ma różnicy między zapisami, ale niektóre validatory HTML5 wygenerują błąd przy zapisie ng- , a nie wygenerują błędu z przedrostkiem data-ng-app. Dlatego zwykle bezpieczniej jest użyć data-ng-app - walidacja kodu HTML będzie nieco łatwiejsza.

Przykład dołączenia (zainkludowania) dyrektywy Angular:

<div data-ng-app="mojaApp" data-ng-controller="myCtrl"></div>

.. i już kontener będzie “uzależniony” od Angulara :).

 

Przypomnę, aby kod był w pełni walidowalny do kodu HTML5, należy dodać przedrostek data- .

data-ng-app definiuje aplikację AngularJS  - element jest “zarządcą” aplikacji (wg dokumentacji Angular)

 

Zapewne zauważyłeś/aś w tagu div: data-ng-controller, cóż to oznacza w świecie Angular? data-ng-controller definiuje kontroler czyli .. powolutku, wyjaśni się to w dalszej części poradnika :). A z grubsza:

Controller Angularjs kontroluje dane aplikacji angularjs, kontrolery są regularnymi obiektami JavaScript.

ng-controller jest obiektem JavaScript, stworzonym przez konstruktora obiektu standardowego JavaScript. Proste jak cały Angular, prawda?

Angularjs Expressions – WYRAŻENIA ANGULARA

Wyrażenia Angular’a wpisuje się wewnątrz podwójnych szelek: {{Twoje wyrażenie}}. Wyrażenia Angular’a można wrzucać bezpośrednio do zawartości tagów HTML poprzez umieszczenie ich jak wspomniałem w podwójnych nawiasach wąsiastych.

Wyrażenie Angular wiąże dane do HTML w taki sam sposób, jak w dyrektywie ng-bind, o której zaraz opowiem. Wyrażenia Angular dają coś czego zawsze brakowało mi w JavieScript – piszę wyrażenie w kodzie i widzę je od razu na stronie html, oczywiście o ile cała reszta angulara jest poprawnie zaimplementowana.

Wyrażenie Angular są podobne do wyrażeń języka JavaScript: mogą zawierać ciągi znaków, operatory i zmienne.

Przykład wyrażenia Angular:

 {{firstName + " " + lastName}} (daje na stronie np. Jasio Kowalski)

 

Początek pracy z AngularJS - MODUŁY ANGULAR - poradnik Angular

 

AngularJS Modules – Moduły Angular

Moduł angularjs określa aplikację.

Moduł Angular jest pojemnikiem na różne części aplikacji, moduł definiuje aplikację. Wszystkie kontrolery (sterowniki) aplikacyji powinny należeć do modułu.

Popatrz poniżej i zauważ, że aplikacja mojaApp posiada jeden kontroler MojKontoler oraz moduł:

<!DOCTYPE html>
<html>
<script src="//poswojsku.info/%3Ca%20href%3D"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>">https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"><...
<body>

<div ng-app="mojaApp" ng-controller=" MojKontoler ">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("mojaApp", []);
app.controller("MojKontoler ", function($scope) {
    $scope.firstName = "Darek";
    $scope.lastName = "Gołębiowski";
});
</script>

</body>
</html>

Warto dodać, że kod nie musi być cały w stronie html. Możemy przenieść go do plików .js:

Moduł Angular:

var app = angular.module("mojaApp", []);
przeniesiemy do pliku: mojaApp.js. Teraz plik mojaApp.js zawiera definicję modułu.

Kontroler – MojKontoler, przeniesiemy do pliku MojKontoler.js, czyli plik  będzie miał zapisane:

app.controller("MojKontoler ", function($scope) {
    $scope.firstName = "Darek";
    $scope.lastName = "Gołębiowski";
});
Ciekawi Ciebie co to jest [] ? Nawias kwadratowy [] w definicji parametrów modułu może być wykorzystany do określenia powiązanych modułów. Ale to już temat na kolejną bajkę o Angular. W tej części porad z Angular wspomnę jeszcze o: data-ng-model, data-ng-bind, data-ng-init, data-ng-repeat

data-ng-model - łączy wartość elementu HTML, np.: textarea, input, select - do danych aplikacji,

data-ng-bind - łączy wartość danych aplikacji do widoku HTML, wypełnia tzw. innerHTML,

data-ng-init - inicjalizuje aplikację , czyli np. ustawia dane wejściowe

data-ng-repeat - zapętla wstawianie elementów HTML do kodu strony.

 

framework JavaScript angular poswojsku

Artykuł "Angular tworzenie nowoczesnej strony poradnik framework JavaScript Angular" jest pierwszą częścią poradnika z tworzenia aplikacji internetowych we framework'u Angular. Na kolejne części porad dotyczących framework'a Angular zapraszam za 2-3 tygodnie. A jakby się komuś śpieszyło zawsze może "popędzić" autora przysyłając zachęcającego maila pod adres: marketing@poswojsku.eu . Zobacz także porównanie React i Angular https://www.poswojsku.info/internet-it/React-Angular-framework-js-porown...

Pozdrawiam: Darek Gołębiowski, Autor poradnika: "Angular tworzenie nowoczesnej strony poradnik framework JavaScript Angular" marketing@poswojsku.eu .

Część druga poradnika z obsługi i zastosowania framework'a Angular: Angular budowa sklepu pierwszy produkt wizualizacja poradnik ..

Zobacz w menu podobne artykuły do: Angular tworzenie nowoczesnej strony poradnik framework JavaScript Angular

 

Polski

Budowa responsywnych i mobilnych stron internetowych

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym