Τι είναι το $scope στο AngularJS; Οδηγός με παράδειγμα

Τι είναι το $scope στο AngularJS;

$scope στο AngularJS είναι ένα ενσωματωμένο αντικείμενο που ουσιαστικά δεσμεύει τον «ελεγκτή» και την «προβολή». Κάποιος μπορεί να ορίσει μεταβλητές μέλους στο πεδίο εφαρμογής μέσα στον ελεγκτή, στις οποίες στη συνέχεια μπορεί να προσπελαστεί η προβολή.

Κάθε ελεγκτής σε ένα AngularJS Η εφαρμογή λαμβάνει τη δική της παρουσία $scope μέσω της ένεσης εξάρτησης. Ό,τι επισυνάπτετε σε αυτό το αντικείμενο γίνεται ορατό στο πρότυπο που ελέγχει ο ελεγκτής, επομένως το $scope συμπεριφέρεται ως το κοινόχρηστο μοντέλο δεδομένων που βρίσκεται ανάμεσα σε εσάς. JavaΛογική σεναρίου και η σήμανση HTML σας.

Εξετάστε το παρακάτω παράδειγμα:

angular.module('app',[]).controller('HelloWorldCtrl',
	function($scope)
	{
		$scope.message = "Hello World"
	});

Code Επεξήγηση:

1. Το όνομα της ενότητας είναι "app"
2. Το όνομα του ελεγκτή είναι "HelloWorldCtrl"
3. Το αντικείμενο πεδίου είναι το κύριο αντικείμενο που χρησιμοποιείται για τη μετάδοση πληροφοριών από τον ελεγκτή στην προβολή.
4. Προστέθηκε μεταβλητή μέλους στο αντικείμενο εμβέλειας

Ένας μόνο ελεγκτής και μια μόνο προβολή είναι μόνο η μισή εικόνα. Οι πραγματικές εφαρμογές εναποθέτουν ελεγκτές, επαναλαμβανόμενες λίστες και επαναχρησιμοποιούν γραφικά στοιχεία, πράγμα που σημαίνει ότι υπάρχουν πολλά πεδία ταυτόχρονα.

Πώς λειτουργεί η ιεραρχία εμβέλειας και η κληρονομικότητα στο AngularJS

Κάθε εφαρμογή AngularJS έχει ακριβώς ένα βασικό πεδίο εφαρμογής και μπορεί να έχει οποιονδήποτε αριθμό θυγατρικών πεδίων εφαρμογής. Οι οδηγίες δημιουργούν αυτά τα θυγατρικά πεδία εφαρμογής και τα συνδέουν με το στοιχείο DOM που διακοσμούν, έτσι ώστε το δέντρο πεδίου εφαρμογής να αντικατοπτρίζει τη δομή της σελίδας που εμφανίζεται.

Όταν το AngularJS αξιολογεί μια έκφραση όπως {{siteName}}, αναζητά πρώτα αυτήν την ιδιότητα στο πεδίο εφαρμογής που είναι συνδεδεμένο στο στοιχείο. Εάν η ιδιότητα λείπει, η αναζήτηση μετακινείται στο γονικό πεδίο εφαρμογής και συνεχίζει να ανεβαίνει μέχρι να φτάσει στο ριζικό πεδίο εφαρμογής. JavaΟι προγραμματιστές σεναρίων γνωρίζουν αυτή τη συμπεριφορά ως πρωτότυπη κληρονομικότητα και τα θυγατρικά πεδία κληρονομούν από τους γονείς τους ακριβώς με αυτόν τον τρόπο.

Το παρακάτω παράδειγμα ενσωματώνει έναν ελεγκτή μέσα σε έναν άλλο, ώστε να μπορείτε να παρακολουθήσετε την κληρονομικότητα.

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code Επεξήγηση:

1. ParentCtrl ορίζει siteName στο δικό του πεδίο εφαρμογής.
2. ChildCtrl ποτέ δεν ορίζει siteName, ωστόσο το εσωτερικό div εξακολουθεί να εκτυπώνει Guru99 επειδή η αναζήτηση ανεβαίνει στο γονικό πεδίο εφαρμογής.
3. lesson βρίσκεται μόνο στο θυγατρικό πεδίο εφαρμογής, επομένως το γονικό div δεν μπορεί να το διαβάσει.

Ποιες οδηγίες δημιουργούν ένα νέο πεδίο εφαρμογής;

• ελεγκτής ng: δημιουργεί ένα θυγατρικό πεδίο εφαρμογής για το στοιχείο στο οποίο τοποθετείται.
• ng-επανάληψη: δημιουργεί ένα θυγατρικό πεδίο εφαρμογής ανά επανάληψη, γι' αυτό και κάθε γραμμή μπορεί να περιέχει διαφορετικές τιμές για την ίδια έκφραση.
• Προσαρμοσμένες οδηγίες: μπορεί να ζητήσει ένα θυγατρικό πεδίο εφαρμογής ή ένα απομόνωση πεδίο εφαρμογής που σκόπιμα δεν κληρονομεί από τον γονέα του.
• Οδηγίες στοιχείων: οτιδήποτε είναι καταχωρημένο στο .component() Ο βοηθός λαμβάνει πάντα ένα απομονωμένο πεδίο εφαρμογής.

Επειδή τα θυγατρικά πεδία διαβάζονται προς τα πάνω, οι προγραμματιστές συχνά αναρωτιούνται πού βρίσκεται η κορυφή αυτής της αλυσίδας. Αυτό το αντικείμενο ανώτατου επιπέδου ονομάζεται $rootScope.

$scope vs $rootScope: Ποια είναι η διαφορά;

Το AngularJS $rootScope είναι το πεδίο εφαρμογής για ολόκληρη την εφαρμογή. Μια εφαρμογή μπορεί να έχει μόνο ένα $rootScope και χρησιμοποιείται σαν καθολική μεταβλητή. Κάθε $scope είναι ένα θυγατρικό πεδίο εφαρμογής και το $rootScope είναι το γονικό αντικείμενο στην κορυφή του δέντρου. Ο παρακάτω πίνακας συγκρίνει τα δύο αντικείμενα.

Χρησιμοποιήστε το $rootScope με φειδώ. Οτιδήποτε τοποθετείται εκεί ισχύει για ολόκληρη την εφαρμογή και είναι ευανάγνωστο παντού, επομένως μια κοινόχρηστη υπηρεσία είναι συνήθως μια ασφαλέστερη βάση για την παγκόσμια κατάσταση. Η επίσημη Αναφορά $rootScope παραθέτει το πλήρες API.

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

Ρύθμιση ή προσθήκη Συμπεριφοράς στο AngularJS

Για να αντιδράσουμε σε συμβάντα ή να εκτελέσουμε κάποιο είδος υπολογισμού/επεξεργασίας στην προβολή, πρέπει να παρέχουμε συμπεριφορά στο εύρος.

Οι συμπεριφορές προστίθενται σε αντικείμενα εμβέλειας για να ανταποκρίνονται σε συγκεκριμένα συμβάντα που μπορεί να ενεργοποιηθούν από την προβολή. Μόλις καθοριστεί η συμπεριφορά στον ελεγκτή, μπορεί να προσπελαστεί από την προβολή.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

Code Επεξήγηση:

1. Δημιουργούμε μια συμπεριφορά που ονομάζεται "fullName". Αυτή η συμπεριφορά είναι μια συνάρτηση που δέχεται 2 παραμέτρους (όνομα, επώνυμο).
2. Στη συνέχεια, η συμπεριφορά επιστρέφει τη συνένωση αυτών των 2 παραμέτρων.
3. Στην προβολή καλούμε τη συμπεριφορά και εισάγουμε 2 τιμές "Guru” και “99” τα οποία διαβιβάζονται ως παράμετροι στη συμπεριφορά.

Εάν η εντολή εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικά σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Στο πρόγραμμα περιήγησης θα δείτε μια συνένωση και των δύο τιμών του Guru & 99 τα οποία μεταβιβάστηκαν στη συμπεριφορά στο ελεγκτής.

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

Γιατί οι Scope Watchers και ο κύκλος πέψης έχουν σημασία

Το AngularJS διατηρεί την προβολή σε αρμονία με το πεδίο εφαρμογής μέσω dirty checking και όχι μέσω συμβάντων αλλαγής. Τρία API πεδίου εφαρμογής καθοδηγούν αυτήν τη διαδικασία:

• $watch: εγγράφει έναν ακροατή για μια έκφραση. Παρεμβολές όπως {{fullName}} Εγγράψτε παρατηρητές για εσάς κατά τη σύνδεση προτύπου.
• $εφαρμογή: εισέρχεται στο περιβάλλον εκτέλεσης AngularJS, αξιολογεί τον κώδικά σας και στη συνέχεια ενεργοποιεί ένα digest. Χρειάζεται μόνο μέσα σε προσαρμοσμένες ανακλήσεις συμβάντων ή σε ανακλήσεις βιβλιοθήκης τρίτων, επειδή οι ενσωματωμένες οδηγίες το καλούν ήδη.
• $σύνοψη: Περιηγείται σε κάθε παρατηρητή στο $rootScope και τα παιδιά του, συγκρίνοντας την τρέχουσα τιμή με την προηγούμενη, και επαναλαμβάνει μέχρι να σταματήσει να αλλάζει το μοντέλο.

Επειδή ένα digest μπορεί να εκτελέσει πολλά περάσματα, οι εκφράσεις παρακολούθησης πρέπει να παραμένουν φθηνές. Αποφύγετε την πρόσβαση DOM στο εσωτερικό τους, καθώς η ανάγνωση του DOM είναι τάξεις μεγέθους πιο αργή από την ανάγνωση ενός JavaΙδιότητα σεναρίου.

Το βάθος παρακολούθησης επηρεάζει επίσης το κόστος. Η παρακολούθηση με αναφορά είναι η ταχύτερη και γίνεται αντιληπτή μόνο όταν αντικαθίσταται ολόκληρη η αξία. $watchCollection παρατηρεί στοιχεία που προστίθενται, αφαιρούνται ή αναδιατάσσονται μέσα σε έναν πίνακα ή ένα αντικείμενο. Η παρατήρηση κατά τιμή διασχίζει μια ένθετη δομή σε κάθε σύνοψη και είναι η πιο ακριβή επιλογή, οπότε επιλέξτε την τελευταία.

Συχνές Ερωτήσεις