What is $scope in angularjs – MVC


Scope is an object that refers to the application model.

the scope will carry the data between View and controller.

The scope is simple javascript object with properties and methods.

$scope Example

@{
ViewBag.Title = “$scope”;
}
<script src=”~/Scripts/angular.min.js”></script>
<h2>$scope</h2>

<div ng-app=”myApp ng-controller=”myCtrl“>
First Name: <input type=”text” ng-model=”firstName“><br/>
Last Name: <input type=”text” ng-model=”lastName“><br/><br/>
Full Name: {{firstName + + lastName}}
</div>

<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName = “Venki”;
$scope.lastName = “Chikkanti”;
});
</script>

$Scope Explantiaon

MVC architecture using AngularJS

Here controller and view are using $scope to carry the data in-between.

How to consume $scope properties inside view

We can consume $scope properties inside view in two ways

1. using ng-model directive

Ex:

$scope properties :

$scope.firstName = “Venki”;
        $scope.lastName = “Chikkanti”;

using in view :

        First Name: <input type=”text” ng-model=”firstName“><br/>
        Last Name: <input type=”text” ng-model=”lastName“><br/><br/>

2. using angularJS expression

Ex:

$scope properties :

$scope.firstName = “Venki”;
        $scope.lastName = “Chikkanti”;

using in view :

First Name: {{firstName}}
        Last Name: {{lastName}}
        Full Name: {{firstName + + lastName}}

Happy coding….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s