Une analyse approfondie du rôle et du cycle de vie de $scope dans le framework AngularJS_AngularJS

$scope est utilisé dans toute l'application Angular App. Il est associé au modèle de données et constitue également le contexte d'exécution de l'expression. Avec $scope, un canal est établi entre la vue et le contrôleur. , Lorsque les données sont modifiées, $scope sera immédiatement mis à jour. De même, lorsque $scope sera modifié, la vue sera immédiatement restituée

.

Avec $scope comme pont, le code métier de l'application peut être entièrement dans le contrôleur et les données sont stockées dans le $scope du contrôleur.

$scope est un objet qui connecte la vue (un élément DOM) au contrôleur. Dans notre structure MVC, ce $scope deviendra le modèle, qui fournit un contexte d'exécution lié à l'élément DOM (et à ses enfants).

Bien que cela semble un peu compliqué, $scope est en fait un objet JavaScript accessible à la fois par le contrôleur et par la vue, nous pouvons donc l'utiliser pour transmettre des informations entre les deux. Dans cet objet $scope, nous stockons à la fois les données et les fonctions qui seront exécutées sur la vue.

Chaque application Angular aura un $rootScope. Ce $rootScope est la portée de niveau supérieur, qui correspond à l'élément DOM contenant l'attribut de directive ng-app.

Si $scope n'est pas explicitement défini sur la page, Angular liera les données et les fonctions ici. L'exemple de la première partie s'appuie sur cela pour s'exécuter correctement.

Dans cet exemple, nous utiliserons $rootScope. Dans le fichier main.js, nous ajoutons un attribut name à cette portée. En exécutant cette fonction dans la fonction app.run, nous garantissons qu'elle sera exécutée avant les autres parties de l'application. Vous pouvez considérer la fonction app.run comme la méthode principale de votre application Angular.

app.run(function($rootScope) {
 $rootScope.name = "Ari Lerner";
});

Maintenant, nous pouvons accéder à cet attribut de nom n'importe où dans la vue, en utilisant l'expression de modèle {{}}, comme ceci :

{{ name }}

$rootScope
Lorsque l'application Angular démarre et génère une vue, l'élément racine ng-app sera lié à $rootScope. $rootScope est l'objet de niveau supérieur de tous les $scopes et peut être compris comme un objet de portée globale dans Angular. application, donc y attacher trop de logique ou de variables n'est pas une bonne idée, cela revient à polluer la portée globale Javascript.

Le rôle de $scope
L'objet $scope agit comme un modèle de données dans Angular, ce qui est le rôle de Model dans le framework général MVC. Mais ce n'est pas exactement la même chose qu'un modèle de données au sens habituel, car $scope ne traite pas et. exploiter les données, cela vient d'établir un pont entre la vue et le HTML, permettant une communication conviviale entre la vue et le contrôleur

.

Divisons plus loin systématiquement ses fonctions et fonctions :

• Fournit des observateurs pour surveiller les changements dans le modèle de données
• Peut notifier l'ensemble de l'application des modifications du modèle de données
• Peut être imbriqué pour isoler les fonctions et les données métiers
• Fournir un environnement d'exécution contextuel pour les expressions

La création d'un nouveau contexte d'exécution en Javascript crée en fait un nouveau contexte local à l'aide d'une fonction. Dans Angular, lors de la création d'une nouvelle portée pour un élément DOM enfant, elle crée en fait une nouvelle portée pour le contexte d'exécution DOM enfant.

Cycle de vie du $scope
Angular a également le concept d '«événement». Par exemple, lorsqu'une valeur d'entrée liée au modèle ng change, ou lorsqu'un bouton ng-click est cliqué, la boucle d'événement d'Angular démarre. concept dans Angular. Comme ce n'est pas l'objet principal de cet article, je n'entrerai pas dans les détails. Si vous êtes intéressé, vous pouvez lire les informations vous-même. L'événement ici est traité dans le contexte d'exécution Angular et $scope l'évaluera. l'expression définie. À ce stade, la boucle d'événements est démarrée, Angular surveillera tous les objets de l'application et la boucle de vérification des valeurs sales sera également démarrée

.

Le cycle de vie de $scope comporte 4 étapes :

1. Créer

Lorsqu'un contrôleur ou une directive est créé, Angular utilisera $injector pour créer une nouvelle portée, puis lui transmettra la portée lorsque le contrôleur ou la directive sera exécuté.

2.Lien

Après le démarrage d'Angular, tous les objets $scope seront attachés ou liés à la vue, et toutes les fonctions qui créent des objets $scope seront également attachées à la vue. Ces étendues seront enregistrées pour s'exécuter lorsque le contexte Angular change. Fonction. Autrement dit, la fonction $watch utilise ces fonctions ou quand démarrer la boucle d'événement

.

3. Mise à jour

Une fois que la boucle d'événements commence à s'exécuter, elle commencera à effectuer sa propre détection de valeur sale. Une fois qu'un changement est détecté, la fonction de rappel spécifiée sur $scope sera déclenchée

.

4. Détruire

De manière générale, si un $scope n'est plus nécessaire dans la vue, Angular le nettoiera tout seul. Bien sûr, il peut également être nettoyé manuellement via la fonction $destroy().

ng-contrôleur

Pour créer explicitement un objet $scope, nous devons attacher un objet contrôleur à l'élément DOM, en utilisant l'attribut de directive ng-controller :

<div ng-controller="MyController">
 {{ person.name }}
</div>

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。这个scope链是这样的：

现在，MyController 给我们建立了一个可以从DOM元素内部直接访问的$scope 对象。下面我们在的这个$scope 里创建一个person对象，在main.js中：

app.controller('MyController', function($scope) {
 $scope.person = {
  name: "Ari Lerner"
 };
});

现在我们可以在有ng-controller='MyController'属性的DOM元素的任何子元素里访问这个person 对象，因为它在$scope上。
除了一个例外，所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$rootScope 上。

唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们。

举个例子，假设我们有一个ParentController ，含有一个person 对象，又有一个ChildController 想要访问这个对象：

app.controller('ParentController', function($scope) {
 $scope.person = {greeted: false};
});
 
app.controller('ChildController', function($scope) {
 $scope.sayHello = function() {
  $scope.person.greeted = true;
 }
});

当我们在view里把ChildController 绑定到ParentController 之下，在子元素里我们就能访问ParentController 创建的父scope的属性，像访问ChildController 自己的scope中的属性一样：

<div ng-controller="ParentController">
 <div ng-controller="ChildController">
  <input type="text" ng-model="person.name" placeholder="Name"></input>
  <a ng-click="sayHello()">Say hello</a>
 </div>
 {{ person }}
</div>