Basic angular template

Download script from https://code.angularjs.org/1.3.14/angular.js and name it as angularjs.js in your folder

index.html:

<!DOCTYPE html>
<html>
  <head>
    <script  src=”angularjs.js”></script>
  </head>
  <body>
 <div ng-app=”myApp”>
    <div ng-controller=”AvengersCtrl”><div ng-show=”true”>{{1+2}}</div>
        <input type=”text” ng-model=”search.$” />
        <table>
            <tr ng-repeat=”actor in avengers.cast | filter:search”>
                <td>{{actor.name}}</td>
                <td>{{actor.character}}</td>
                {{name}}
            </tr>
        </table>
    </div>
</div>
<script type=”text/javascript”>
  myApp.controller(‘AvengersCtrl’,function($scope){
   $scope.name =’TEST NE’;
  });
</script>
<script src=”script.js”></script>
</body>
</html>
You can use either inside script for using controller or even an external script like as follows..
var myApp = angular.module(‘myApp’, []);
// myApp.factory(‘Avengers’, function () {
//     var Avengers = {};
//     Avengers.cast = [
//         {
//         name: “Robert Downey Jr.”,
//         character: “Tony Stark / Iron Man”
//         },
//         {
//         name: “Chris Evans”,
//         character: “Steve Rogers / Captain America”
//         },
//         {
//         name: “Mark Buffalo”,
//         character: “Bruce Banner / The Hulk”
//         }
//     ];
//     return Avengers;
// })
myApp.controller(‘AvengersCtrl’,[‘$scope’,function($scope){
    $scope.name=”thoufeeq”;
}]);
Advertisements

Understanding $rootScope event with $broadcast and $on

Pals,

Please refer my previous article for better explanation. Now directly i am moving to the execution of code.

Like how we used $scope just replace with $rootScope. Thats it. For reference here is the code..

index.html:

<html>
<head>
<script src=”angular.min.js”></script>
</head>
<body>
<script src=”script.js”></script>
<div ng-app=”sathya”>
<div ng-controller=”ParentCtrl”>
<button ng-click=”go()”>Button </button>
<div ng-controller=”SiblingCtrl”>
</div>
</div>
</div>
</body>
</html>

script.js:

var app = angular.module(‘sathya’,[]);

app.controller(‘ParentCtrl’,
function ParentCtrl ($scope,$rootScope) {
$scope.go = function() {
$rootScope.$broadcast(‘Sathyalog’,”How are you”)

}
});

app.controller(‘SiblingCtrl’,
function SiblingCtrl ($scope,$rootScope) {
$rootScope.$on(‘Sathyalog’, function (event, data) {
alert(“Iam executed”);
console.log(data);
});

});

Understanding Angular’s $scope event system with $broadcast and $on

Firstly, you should know one thing that you can use $scope or $rootScope to pass data from one controller to another controller.

In this case, we will use only $scope and only in downward direction for now.

First of all, parent-child scope relation does matter. You have two possibilities to emit some event:

  • $broadcast — dispatches the event downwards to all child scopes,
  • $emit — dispatches the event upwards through the scope hierarchy.
  1. If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl:
    function firstCtrl($scope){
        $scope.$broadcast('someEvent', [1,2,3]);
    }
    
    function secondCtrl($scope){
        $scope.$on('someEvent', function(event, mass) {console.log(mass)});
    }
  2. In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl).
    function firstCtrl($rootScope){
        $rootScope.$broadcast('someEvent', [1,2,3]);
    }
  3. Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope:
    function firstCtrl($scope){
        $scope.$on('someEvent', function(event, data) { console.log(data); });
    }
    
    function secondCtrl($scope){
        $scope.$emit('someEvent', [1,2,3]);
    }

More on this : http://stackoverflow.com/questions/14502006/scope-emit-and-on-angularjs

http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

My Example:

Scenario: When i click on a button, i should be able to see a message “Sathyalog” in console.log like shown below.
13-08-2014 17-16-33

index.html:

<html>
<head>
<script src=”angular.min.js”></script>
</head>
<body>
<script src=”script.js”></script>
<div ng-app=”sathya”>
<div ng-controller=”ParentCtrl”>
<button ng-click=”go()”>Button </button>
<div ng-controller=”SiblingCtrl”>
</div>
</div>
</div>
</body>
</html>

script.js:

var app = angular.module(‘sathya’,[]);

app.controller(‘ParentCtrl’,
function ParentCtrl ($scope) {
console.log(“this is parent”);
// going down!

$scope.go = function() {
$scope.$broadcast(‘parent’, ‘Sathyalog’)

}

});

app.controller(‘SiblingCtrl’,
function SiblingCtrl ($scope) {
console.log(“this is child”);
$scope.$on(‘parent’, function (event, data) {
console.log(data); // My broad cast message
});

});

You can check the same in my jsfiddle here.

 

For $rootScope example..check here.