Monday 30 January 2017

AngularJS

AngularJS All :

Difference between $scope vs $rootscope :

1. $rootScope is available globally (for all controllers) whereas $scope is only available to the controller that has created it and its children
2. An Angular application mainly contains Controllers,Models and views.
3. Here View are plain HTML that take care of displaying data to user and acting to user actions.
4. Controller will take care of all communication between server and client(Actually this communication is done by services which are part of Controller).

These Controller and views are communicates by using a shared object called $scope .

Examples: 
Step 1: Create One JavaScript File and Write below Code


/// <reference path="angular.min.js" />
var app = angular
.module("Demo", [])
.controller("blueColourController", function ($scope, $rootScope) {
    $scope.blueColour = "I am Blue Colour";
    $rootScope.rootScopeColour = "I am Root Scope Colour";

})
.controller("greenColourController", function ($scope) {
    $scope.greenColour = "I am Green Colour";
})


Step 2: Create One Html Page With Reference to given JavaScript write below code

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/ScopeJavaScript.js"></script>
       <meta charset="utf-8" />
</head>
<body>
    <div ng-controller="blueColourController">
        Roort scope Colour:{{rootScopeColour}}<br />
        Blue Colour Controller:{{blueColour}}<br />
        Green Colour Controller :{{greenColour}}

    </div>
    <br />
    <div ng-controller="greenColourController">
        Roort scope Colour:{{rootScopeColour}}<br />
        Green Colour Controller:{{greenColour}}<br />
        Blue Colour Controller :{{blueColour}}

    </div>
</body>
</html>

Step 3 : Out Put


No comments:

Post a Comment