J'ai lu la nouvelle syntaxe d'angularJS concernantcontroller as xxx
La syntaxe
InvoiceController as invoice
indique à Angular d'instancier le contrôleur et de l'enregistrer dans la facture variable dans la portée actuelle.
Visualisation:
Ok, donc je n'aurai pas le paramètre $scope
dans mon contrôleur et le code sera beaucoup plus propre dans le contrôleur.
Mais
Je devrai spécifier un autre alias dans la vue
Donc, jusqu'à présent, je pouvais faire:
<input type="number" ng-model="qty" />
....controller('InvoiceController', function($scope) {
// do something with $scope.qty <--notice
Et maintenant je peux faire:
<input type="number" ng-model="invoic.qty" /> <-- notice
....controller('InvoiceController', function() {
// do something with this.qty <--notice
Question
Quel est le but de le faire? supprimer d'un endroit et ajouter à un autre endroit?
Je serai heureux de voir ce qui me manque.
javascript
angularjs
Royi Namir
la source
la source
controller as
corrige).Réponses:
Il y a plusieurs choses à ce sujet.
Certaines personnes n'aiment pas la
$scope
syntaxe (ne me demandez pas pourquoi). Ils disent qu'ils pourraient simplement utiliserthis
. C'était l'un des objectifs.Il est également très utile d'indiquer clairement l'origine d'une propriété.
Vous pouvez imbriquer des contrôleurs et lors de la lecture du html, il est assez clair d'où vient chaque propriété.
Vous pouvez également éviter certains des problèmes de règle de point .
Par exemple, ayant deux contrôleurs, tous deux avec le même nom 'nom', vous pouvez faire ceci:
Vous pouvez modifier à la fois le parent et l'enfant, pas de problème à ce sujet. Mais vous devez utiliser
$parent
pour voir le nom du parent, car vous l'avez observé dans votre contrôleur enfant. En code html massif$parent
peut être problématique, vous ne savez pas d'où vient ce nom.Avec
controller as
vous pouvez faire:Même exemple, mais il est beaucoup plus clair à lire.
$scope
plunkercontroller as
plunkerla source
foo() { ... }
est bien plus propre que$scope.foo = function() { ... }
.Le principal avantage de la
controller as
syntaxe que je vois est que vous pouvez travailler avec des contrôleurs en tant que classes, pas seulement quelques fonctions de décoration $ scope, et tirer parti de l'héritage. Je rencontre souvent une situation où il y a une fonctionnalité qui est très similaire à un certain nombre de contrôleurs, et la chose la plus évidente à faire est de créer uneBaseController
classe et d'en hériter.Même s'il y a l'héritage $ scope, qui résout partiellement ce problème, certaines personnes préfèrent écrire du code d'une manière plus POO, ce qui, à mon avis, rend le code plus facile à raisonner et à tester.
Voici un violon à démontrer: http://jsfiddle.net/HB7LU/5796/
la source
Je pense qu'un avantage particulier est clair lorsque vous avez des étendues imbriquées. Il sera maintenant complètement clair de quelle portée provient une référence de propriété.
la source
La source
Différence entre la création d'un contrôleur à l'aide de
$scope object
et l'utilisation de la“controller as”
syntaxe et de vmCréation d'un contrôleur à l'aide de l'objet $ scope
Habituellement, nous créons un contrôleur en utilisant l'objet $ scope comme indiqué dans la liste ci-dessous:
Ci-dessus, nous créons l'AddController avec trois variables et un comportement, en utilisant le contrôleur d'objet $ scope et la vue, qui se parlent. L'objet $ scope est utilisé pour transmettre des données et un comportement à la vue. Il colle la vue et le contrôleur ensemble.
Essentiellement, l'objet $ scope effectue les tâches suivantes:
Passer les données du contrôleur à la vue
Passer le comportement du contrôleur à la vue
Colle le contrôleur et la vue ensemble
L'objet $ scope est modifié lorsqu'une vue change et une vue est modifiée lorsque les propriétés de l'objet $ scope changent
Nous attachons des propriétés à un objet $ scope pour transmettre des données et un comportement à la vue. Avant d'utiliser l'objet $ scope dans le contrôleur, nous devons le passer dans la fonction de contrôleur en tant que dépendances.
Utilisation de la syntaxe «controller as» et de vm
Nous pouvons réécrire le contrôleur ci-dessus en utilisant le contrôleur comme syntaxe et la variable vm comme indiqué dans la liste ci-dessous:
Essentiellement, nous attribuons ceci à une variable vm, puis nous y attachons une propriété et un comportement. Sur la vue, nous pouvons accéder à AddVmController en utilisant le contrôleur comme syntaxe. Ceci est montré dans la liste ci-dessous:
Bien sûr, nous pouvons utiliser un autre nom que «vm» dans le contrôleur comme syntaxe. Sous le capot, AngularJS crée l'objet $ scope et attache les propriétés et le comportement. Cependant, en utilisant le contrôleur comme syntaxe, le code est très propre au niveau du contrôleur et seul le nom d'alias est visible sur la vue.
Voici quelques étapes pour utiliser le contrôleur comme syntaxe:
Créez un contrôleur sans objet $ scope.
Affectez-le à une variable locale. J'ai préféré le nom de variable comme vm, vous pouvez choisir n'importe quel nom de votre choix.
Attachez les données et le comportement à la variable vm.
Sur la vue, donnez un alias au contrôleur en utilisant le contrôleur comme syntaxe.
Vous pouvez donner n'importe quel nom à l'alias. Je préfère utiliser vm sauf si je ne travaille pas avec des contrôleurs imbriqués.
Lors de la création du contrôleur, il n'y a pas d'avantages ou d'inconvénients directs à utiliser l'approche objet $ scope ou le contrôleur comme syntaxe. C'est purement une question de choix, cependant, l'utilisation du contrôleur comme syntaxe rend le code JavaScript du contrôleur plus lisible et évite tout problème lié à ce contexte.
Contrôleurs imbriqués dans l'approche objet $ scope
Nous avons deux contrôleurs comme indiqué dans la liste ci-dessous:
La propriété «age» se trouve à l'intérieur des deux contrôleurs, et sur la vue, ces deux contrôleurs peuvent être imbriqués comme indiqué dans la liste ci-dessous:
Comme vous le voyez, pour accéder à la propriété age du contrôleur parent, nous utilisons le $ parent.age. La séparation des contextes n'est pas très claire ici. Mais en utilisant le contrôleur comme syntaxe, nous pouvons travailler avec des contrôleurs imbriqués d'une manière plus élégante. Disons que nous avons des contrôleurs comme indiqué dans la liste ci-dessous:
Sur la vue, ces deux contrôleurs peuvent être imbriqués comme indiqué dans la liste ci-dessous:
Dans le contrôleur comme syntaxe, nous avons un code plus lisible et la propriété parent est accessible en utilisant le nom d'alias du contrôleur parent au lieu d'utiliser la syntaxe $ parent.
Je conclurai cet article en disant que c'est uniquement à vous de choisir si vous voulez utiliser le contrôleur comme syntaxe ou l'objet $ scope. Il n'y a ni avantage ni inconvénient énorme, simplement que le contrôleur en tant que syntaxe que vous contrôlez sur le contexte est un peu plus facile à utiliser, étant donné la séparation claire des contrôleurs imbriqués sur la vue.
la source
Je trouve que le principal avantage est une API plus intuitive car les méthodes / propriétés sont associées directement à l'instance du contrôleur et non à l'objet scope. Fondamentalement, avec l'ancienne approche, le contrôleur devient simplement une décoration pour la construction de l'objet scope.
Voici quelques informations supplémentaires à ce sujet: http://www.syntaxsuccess.com/viewarticle/551798f20c5f3f3c0ffcc9ff
la source
D'après ce que j'ai lu, $ scope sera supprimé dans Angular 2.0, ou du moins comment nous voyons l'utilisation de $ scope. Il pourrait être bon de commencer à utiliser le contrôleur à l'approche de la sortie de 2.0.
Lien vidéo ici pour plus de discussion à ce sujet.
la source