AngularJs και διαδικασία Log in/out

[dimitris21gr]

Καλησπέρα σε όλους,

 

Χρησιμοποιώ για πρώτη φορά AngularJs και μάλλον δεν την έχω κατανοήσει πλήρως.

 

Μέχρι τώρα έχω φτιάξει ένα index.html στο οποίο έχω έχω nav bar tag,  ένα div tag το οποίο έχει το ui-view και το footer. Στο div με το ui-view ανάλογα με το path της σελίδας που αλλάζει πατώντας τα κουμπιά του navbar φορτώνω html για την αρχική σελίδα, την σελίδα log in, register κλπ. Φτιάχνοντας το log in έχω το εξής πρόβλημα: Σε περίπτωση επιτυχίας θα πρέπει τα κουμπιά Log In και Register να φύγουν και να αντικατασταθούν με το κουμπί Log out. Τα κουμπιά αυτά, που είναι στο nav bar, είναι φυσικά έξω από το div tag του ui-view.

Πως θα καταφέρω να κάνω αυτό που θέλω; Ευχαριστώ.

[booZe]

Το πιο απλό (όχι ίσως το πιο δόκιμο) που μπορείς να κάνεις, είναι να αρχικοποιείς ένα property (πχ userContext) μετά το login στο root controller/scope και βάσει αυτού να κρύβεις/δείχνεις το UI που χρειάζεται.

 

Κάτι σαν αυτό:

function LoginController($rootScope, $scope, [other dependencies go here]){
   $scope.login = function() {
       // μετά από επιτυχημένο login
       $rootScope.userContext = {
           username: 'foo-user',
           isAuthenticated: true
       };
   }
} 

[dimitris21gr]

Ναι αυτό είναι μια λύση. Κάτι πιο σωστό από αυτό; Πχ θα μπορούσε να γίνει με ένα δεύτερο view αφού χρησιμοποιώ ui-router?

[ZAKKWYLDE]

Για  να κρύψεις 2 κουμπιά, όχι δεν θα έβαζα άλλο view, καντο με ng-if....και γιατί γράφεις Angular 1???

[dimitris21gr]

Πριν μια εβδομάδα δεν ήξερα καθόλου angular. Επίσης οι σημειώσεις του μαθηματος που είχα ήταν για angular 1. Είδα πως και η 2 ειναι σε beta και δεν το έψαξα παραπάνω. Με το ng-if ποια θα ήταν η διαφορα με την την πιο πάνω λύση; Επίσης τι παραπάνω χοντρικά προσφέρει η 2η έκδοση;

[ZAKKWYLDE]

H Angular 2 πλέον δεν είναι σε Beta, οπότε είναι η ιδανική περίοδος να ξεκινήσεις να τη μαθαίνεις. Έχει εντελώς διαφορετική φιλοσοφία σε σχέση με την 1, και είναι εντελώς component based (όπως ReactJS). Είναι έτσι σχεδιασμένη που ο κώδικας πλέον είναι πολύ πιό δομημένος, ιδιαίτερα σε συνδυασμό με ES6/Typescript

 

Ασε που πλέον κανείς δεν θα χρησιμοποιήσει angular 1, ούτε βέβαια σου προσφέρει καμία βάση να ξεκινήσεις τη 2.

 

Τώρα για το ng-if. Αν έχεις 1 view με login κουμπιά, και ένα view με logout κουμπιά, θα έχεις επαναλαμβανόμενο  HTML κώδικα χωρίς λόγο. Στη άλλη περίτπωση έχεις  2 div με ng-if="isLoggedin" και τέλος.

[dimitris21gr]

Θα την τσεκάρω αν και πιθανότατα δεν με παίρνει για να κάνω την αλλαγή τώρα.

 

Επίσης μια ακόμη ερώτηση περί ui-router. Έστω ότι έχω δύο 3 states που είναι κάπως έτσι: profile, profile.settings και profile.view. Τα 2 τελευταία είναι παιδιά του πρώτου. Όταν πηγαίνω στο path των παιδιών  τρέχει ο controller του πατέρα; Η για να τρέξει ο controller του πατέρα πρέπει να πάω στο path του state profile?

[alou]

Δεν είναι ακριβώς ο τρόπος που θα το περιέγραφα αλλά ναι, έχεις πρόσβαση και σε ότι τρέχει στο parent scope και υπάρχει και η $parent που σου δίνει πρόσβαση μέσα από child controllers. Όμως αφού θες να παίξεις με ng1, τουλάχιστον καθιέρωσε το controller-as pattern,  που θα σε διευκολύνει σε πολλά πράγματα, ένα από τα οποία θα είναι ο τρόπος που αντιλαμβάνεσαι τις μεταβλητές σου στα views, ειδικά όταν υπάρχουν nested scopes.

 

To parent scope μπορεί ακόμα και να είναι abstract, αν θυμάμαι καλά τα περί ui-router που σημαίνει ότι δεν καλείται από μόνο του.

 

Πάντως,  είτε φτιάχνεις κάτι είτε απλά "παίζεις", θα σε συμβούλευα και εγώ να κοιτάξεις ng2 γιατί δεν είναι απλά εξέλιξη αλλά τελείως διαφορετική προσέγγιση.