Menu
I have two sets of code like the following
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 Code:
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 this two way of declaring models to the view. Can some one please explain. I am new to Angular JS
427
The Scope in AngularJS is the binding part between HTML (view) and JavaScript (controller) and it is a built-in object. It contains application data and objects. It is available for both the view and the controller. It is an object with available properties and methods. There are two types of scopes in Angular JS.
No difference. It is same object.
The $ in "$scope" indicates that the scope value is being injected into the current context. $scope is a service provided by $scopeProvider . You can inject it into controllers, directives or other services using Angular's built-in dependency injector: module.
The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.
Why?: Controllers are constructed, "newed" up, and provide a single new instance, and the controllerAs syntax is closer to that of a JavaScript constructor than the classic $scope syntax.
Why?: It promotes the use of binding to a "dotted" object in the View (e.g. customer.name instead of name), which is more contextual, easier to read, and avoids any reference issues that may occur without "dotting".
Why?: Helps 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>
The controllerAs syntax uses this inside controllers which gets bound to $scope
Why?: controllerAs is syntactic sugar over $scope. You can still bind to the View and still access $scope methods.
Why?: Helps avoid the temptation of using $scope methods inside a controller when it may otherwise be better to avoid them or move them to a factory. Consider using $scope in a factory, or if in a controller just when needed. For example when publishing and subscribing events using $emit, $broadcast, or $on consider moving these uses to a factory and invoke from the controller.
/* avoid */
function Customer ($scope) {
$scope.name = {};
$scope.sendMessage = function () { };
}
/* recommended - but see next section */
function Customer () {
this.name = {};
this.sendMessage = function () { };
}
Why?: The this keyword is contextual and when used within a function inside a controller may change its context. Capturing the context of this avoids encountering 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 placing the comment below above the line of code. /* jshint validthis: true / var vm = this; Note: When creating watches in a controller using controller as, you can watch the 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
78
You really shouldn't use this to declare model that bind to the UI with Angular. Your first example is very rarely seen in Angular. In my experience, even controller aliasing isn't seen that much.
The difference between the two examples is that one uses $scope while the other does not. Using $scope is fundamental to how Angular binds (and 2-way binds) data to the UI. The $scope is not just a replacement for this. $scope is inherited from parent controller $scope objects up the tree until reaching $rootScope.
So there is a tree of $scope objects that define the state of an Angular application. Each time Angular is alerted to do so (through its $digest cycle), Angular checks the values on all $scope objects in the tree. If the values have changed, Angular can rebind the UI. This is essentially how 2-way binding works.
So, using your first example will work, but will not give you many benefits of using Angular.
You can see from the example below that when a click event is fired, the data does not update as it should:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
