All geek questions in one place

Angular scope variables and regular controller variables

I have two sets of code, for example:

First set of code:

var app=angular.module('demo', []); app.controller('mainController',function(){ this.myVar='hai'; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <html ng-app="demo"> <div ng-controller="mainController as mainControl"> <p>{{mainControl.myVar}}</p> </div> </html>

Second set of codes:

 var app = angular.module('demo', []); app.controller('mainController', ['$scope', function($scope) { $scope.myVar = 'hai'; } ]); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html ng-app="demo"> <div ng-controller="mainController"> <p>{{myVar}}</p> </div> </html>

I want to know the difference between two ways of declaring models in a view. Can someone explain. I'm new to Angular JS

+6
source share
3 answers
  • controllerAs View Syntax: Use the controllerAs syntax over the classic controller with the $ scope syntax.

Why ?: The controllers are built, "innovated" up and provide one new instance, and the controllerAs syntax is closer to the JavaScript constructor syntax than the classic $ scope syntax.

Why? This facilitates the use of binding to the "punctuated" object in the view (for example, customer.name instead of the name), which is more contextual, easier to read, and avoids any problems with the link that may occur without "arranging".

Why ?: Helps to avoid using $ parent calls in views with nested controllers.

 <!-- avoid --> <div ng-controller="Customer"> {{ name }} </div> <!-- recommended --> <div ng-controller="Customer as customer"> {{ customer.name }} </div>
  • controllerAs Controller syntax: use controllerAs syntax over a classic controller with $ scope syntax.

The controllerAs syntax uses these internal controllers that are tied to $ scope

Why ?: controllerAs is syntactic sugar for $ scope. You can still get attached to the View tools and still access the $ scope methods.

Why ?: It helps to avoid the temptation to use the $ scope methods inside the controller when otherwise it is better to avoid them or move them to the factory. Consider using $ scope in the factory, or if in the controller, when necessary. For example, when publishing and subscribing to events using $ emit, $ broadcast or $ on, it is recommended to move these uses to the factory and call from the controller.

 /* avoid */ function Customer ($scope) { $scope.name = {}; $scope.sendMessage = function () { }; } /* recommended - but see next section */ function Customer () { this.name = {}; this.sendMessage = function () { }; }
  • controllerAs with vm: use the capture variable for this when using the controllerAs syntax. Select a constant variable name, such as vm, which means ViewModel.

Why ?: This keyword is contextual and, when used inside a function inside a controller, can change its context. Capturing the context of this avoids this problem.

 /* avoid */ function Customer () { this.name = {}; this.sendMessage = function () { }; } /* recommended */ function Customer () { var vm = this; vm.name = {}; vm.sendMessage = function () { }; }

Note. You can avoid any jshint warnings by posting a comment below the line of code. / * jshint validthis: true / var vm = this; Note. When creating a watch in a controller using a controller, you can watch vm. member using the following syntax. (Create watches with caution as they add more load to the digest cycle.)

 $scope.$watch('vm.title', function(current, original) { $log.info('vm.title was %s', original); $log.info('vm.title is now %s', current); });

https://github.com/johnpapa/angularjs-styleguide#controllers

+7
source

You really shouldn't use this to declare a model that binds to the user interface using Angular. Your first example is very rare in Angular. In my experience, even smoothing the controller is not so noticeable.

The difference between the two examples is that $scope , and the other is not. Using $scope is fundamental to how Angular associates (and two-way bindings) data with the user interface. $scope is not just a replacement for this . $scope inherited from the parent controller of $scope objects to the tree until $rootScope .

Thus, there is a tree of $scope objects that determine the state of the Angular application. Each time Angular is warned about this (via the $digest loop), Angular checks the values ​​on all $scope objects in the tree. If the values ​​change, Angular can restore the interface. This is essentially how two-way binding works.

So, using your first example will work, but it won’t give you the many benefits of using Angular.

In the example below, you can see that when the click event is triggered, the data is not updated, as follows:

 var app=angular.module('demo', []); app.controller('mainController',function($scope){ this.myVar='hai'; $scope.clickMe = function() { this.myVar = "changed"; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <html ng-app="demo"> <div ng-controller="mainController as mainControl"> <p>{{mainControl.myVar}}</p> <button ng-click="clickMe()">click me</button> </div> </html>
+2
source 

 var app=angular.module('demo', []); app.controller('mainController',function($scope){ this.myVar='hai'; this.clickMe = function() { this.myVar = "changed"; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <html ng-app="demo"> <div ng-controller="mainController as mainControl"> <p>{{mainControl.myVar}}</p> <button ng-click="mainControl.clickMe()">click me</button> </div> </html>

The above code will work, and also performs two-way data binding. Therefore, by declaring functions and variables inside the controller using "this", I can specifically use these variables and functions only inside these functions, and not using the $ scope that the tree will grow on. In this case, I can reduce the memory size of variables and functions. Can someone please correct me if I am wrong

0
source

Source: https://habr.com/ru/post/976099/

More articles:


All Articles