Angular Js Tutorial Part-4

Hi Friend if you are fresher read my previous post of angular Js tutorial.

Today you teach scope & expression.

$Scope InheritanceIf you define nested controllers then child controller will inherit the $scope of its parent controller.

It has two types:

$root Scope: An app can have only one $root scope which will be shared among all the components of an app. It is available in the entire application. It acts like a global variable.

Now you create your project.

Open old visual studio project.
Add new html file with name of inheritance.

<!DOCTYPE html>

<html>

<head>

</script>

var app = angular.module('app', []);

app.controller('AdminController', ['$scope', function ($scope) {

$scope.Admin1name = 'Shiva';

$scope.Name = 'Shukla ';

}]);

app.controller('SalsemanController', ['$scope', function ($scope) {

$scope.salsemanname = 'Rakesh';

$scope.Name = 'Kumar ';

}]);

app.controller('UserController', ['$scope', function ($scope) {

$scope.Name = 'Rahul';

}]);

</script>

</head>

<body>

<p>Controller Inheritance</p>

Admin1name : {{ Name }} {{ Admin1name }}

Salsemanname : {{ Name }} {{ salsemanname }} {{ Admin1name }}

<div ng-controller="UserController"> User name : {{ Name }} {{ salsemanname }} {{ Admin1name }} </div>

</div>

</body>

</html>

Output:

$Scope: $Scope is a JavaScript object that refers to the application model. It acts as glue between controller and view. $scope is passed as first argument to controller during its constructor definition.

<!DOCTYPE html>

<html>

</script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function ($scope) {

$scope.Adminname = "Shiva";

});

</script>

<body>

<h1>{{Adminname}}</h1>

</div>

</body>

</html>

OutPut:-

Expression

Expressions are used to bind application data to HTML. AngularJS expressions can be written inside double braces: {{expression}}. It used for bindings to insert dynamic values into the html pages.