YouTip LogoYouTip

Angularjs Scopes

# AngularJS Scope * * * Scope is the link between the application's HTML (view) and JavaScript (controller). Scope is an object with available methods and properties. Scope can be applied to both views and controllers. * * * ## How to Use Scope When you create a controller in AngularJS, you can pass the **$scope** object as an argument: ## AngularJS Example Properties in the controller correspond to properties in the view:

{{carname}}

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "Volvo"; }); [Try it Β»](#) When you add the **$scope** object in the controller, the view (HTML) can access these properties. In the view, you do not need to add the **$scope** prefix, just add the property name, such as: **{{carname}}**. * * * ## Scope Overview An AngularJS application consists of the following: * View, which is HTML. * Model, which is the data available in the current view. * Controller, which is a JavaScript function that can add or modify properties. scope is the model. scope is a JavaScript object with properties and methods that can be used in views and controllers. ## AngularJS Example If you modify the view, the model and controller will update accordingly:

{{greeting}}

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope){ $scope.name = "Tutorial"; $scope.sayHello = function(){ $scope.greeting = 'Hello ' + $scope.name + '!'; }; }); [Try it Β»](#) * * * ## Scope Range It is very important to understand the scope you are currently using. In the two examples above, there is only one scope, so it is relatively simple to handle. However, in large projects, there are multiple scopes in the HTML DOM, and you need to know which scope corresponds to the scope you are using. ## AngularJS Example When we use the **ng-repeat** directive, each repeated item accesses the current repeated object:
  • {{x}}
var app = angular
← Angularjs ScopesWebpages Razor β†’