AngularJS

Στις επόμενες αναρτήσεις θα ασχοληθούμε με την AngularJS η οποία είναι ένα JavaScript framework που προσθέτει στην HTML νέα χαρακτηριστικά. Με την AngularJS είναι πολύ εύκολο να κάνουμε εφαρμογές SPA(Single Page Applications), όλα τα quiz στα μαθήματα μας έχουν γίνει με την AngularJS. Αρχικά θα ασχοληθούμε με βασικές έννοιες όπως τι είναι οι controllers, expressions, directives, modules και μετά θα εξετάσουμε έννοιες όπως DOM, Forms, Validation και άλλες. Απαραίτητες γνώσεις για την κατανόηση της AngularJS είναι οι βασικές έννοιες σε HTML, CSS, και JavaScript.

 

Δοκιμάστε!

 

AngularJS Expressions

Η AngularJS δεσμεύει δεδομένα HTML χρησιμοποιώντας εκφράσεις(Expressions). Οι AngularJS εκφράσεις μπορούν να γραφούν με δύο τρόπους είτε μέσα σε διπλές αγκύλες {{ expression }}, είτε με τη μορφή ng-bind= ‘expression’ .

 

Δοκιμάστε!

 

AngularJS Ενότητες(Modules)

Μια ενότητα(module) της AngularJS καθορίζει μια εφαρμογή με τη χρήση της συνάρτησης angular.module. Μέσα στην εφαρμογή μπορούμε να προσθέσουμε controllers, directives, filters, και άλλα στοιχεία της AngularJS.

 

Δοκιμάστε!

 

AngularJS Scope

Μία εφαρμογή της AngularJS αποτελείται από:

  • View, που είναι η HTML.
  • Model, που είναι τα διαθέσιμα στοιχεία για την τρέχουσα προβολή δεδομένων(Scope).
  • Controller, που είναι η JavaScript συνάρτηση που ελέγχει τα δεδομένα.

Το scope είναι ένα αντικείμενο JavaScript με ιδιότητες και μεθόδους, που είναι διαθέσιμο και στο Model και στον Controller.

 

Δοκιμάστε!

 

AngularJS Filters(φίλτρα)

Στην AngularJS μπορούμε να προσθέσουμε φίλτρα(filters) για να μορφοποιήσουμε τα δεδομένα μας. Η AngularJS έχει τα εξής φίλτρα: currency, date, json, limitTo, lowercase, number, orderBy, uppercase. Μπορούν να προστεθούν με τη χρήση του χαρακτήρα | που ακολουθείται από ένα φίλτρο.

 

Δοκιμάστε!

 

AngularJS Services(Υπηρεσίες)

Στην AngularJS η υπηρεσία(service) είναι μία συνάρτηση(function) ή ένα αντικείμενο(object) που εκτελείται μέσα σε μία AngularJS εφαρμογή. Υπάρχουν τριάντα έτοιμα services(π.χ. $location, $http, $timeout, $interval). Στο παράδειγμά μας θα δούμε το $timeout service.

 

Δοκιμάστε!

 

AngularJS Events

H AngularJS έχει τις δικές της HTML οδηγίες γεγονότων(events), όπως οι ng-click, ng-dblclick , ng-mousedown, ng-mouseenter κ.α.

 

Δοκιμάστε!

 

AngularJS Tables

Στην AngularJS μπορούμε να εμφανίσουμε πολύ εύκολα tables με τη χρήση της ng-repeat.

 

Δοκιμάστε!

 

AngularJS Forms

Στις εφαρμογές μας με την AngularJS μπορούμε να μεταφέρουμε εύκολα δεδομένα στα στοιχεία input, select, button, textarea της HTML με τη χρήση της ng-model οδηγίας.

 

Δοκιμάστε!

 

AngularJS Form Validation(επικύρωση)

Στις εφαρμογές μας με την AngularJS μπορούμε να ελέγξουμε τα δεδομένα εισόδου (input, textarea, select). Αν θέλουμε να επικυρώσουμε την είσοδο ενός χρήστη στην εφαρμογή μας είναι απαραίτητη η επικύρωση στον server.

 

Δοκιμάστε!

 

AngularJS API

Το AngularJS API(Application Programming Interface) είναι ένα σύνολο λειτουργιών JavaScript για την εκτέλεση κοινών εργασιών, όπως η σύγκριση, η επανάληψη και η μετατροπή δεδομένων. Μερικές API λειτουργίες είναι οι angular.isNumber, angular.lowercase, angular.uppercase, angular.isString.

 

Δοκιμάστε!

 

Σχεδιασμός ιστοσελίδας με Angularjs και Bootstrap.

Έχουμε καλύψει τις βασικές έννοιες της Angularjs και θα αλλάξουμε την ιστοσελίδα που είχαμε σχεδιάσει με το Bootstrap έτσι ώστε να φορτώνει ορισμένα από τα δεδομένα της με τη χρήση της Angularjs. Δείτε τα σχόλια στο κώδικα για να κατανοήσετε τα επιμέρους τμήματα της σελίδας. Μπορείτε να αντιγράψτε να τροποποιήστε και να χρησιμοποιήστε το θέμα για τις δικές σας ιστοσελίδες.

 

Δοκιμάστε!