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”;
}]);

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.

Angularjs – SnippetBox

Folks,

No code, no explanation, no examples nothing here..just only sharing links from stackoverflow/jsfiddle/plunker/other for some useful concepts.

Communication between controllers – clickhere

Broadcasting example – clickhere

AngularJS Directive – Receiving a broadcast from $rootscope – check this

Send $scope from one controller to another controller – how? use $broadcast and $on for downwards hierarchy and $emit and $on on upward hierarchy – clickhere

If you want to $broadcast use the $rootScope: clickhere

Understanding Angular’s $scope and $rootScope event system $emit, $broadcast and $on: clickhere

World’s Smartest Motorcycle Helmet

20140808223942-Hero_helmet

While the Skully AR-1 may look like a normal helmet, the self-proclaimed “world’s smartest motorcycle helmet” will likely do more than protect your head —The AR-1 boasts a rear-view camera, as well as a “heads-up display” that shows informations such as speed, directions, fuel levels and caller ID — all within the motorcyclist’s line of sight, according to Skully Systems, the San Francisco-based startup that created the wearable-tech helmet. The visor is also glare-, fog- and scratch-resistant.

What’s more, the AR-1 connects with a smartphone via Bluetooth to provide the information that is displayed its visor. For GPS services, it can connect to the Internet via smartphone, or use on-board map storage in case web connectivity is a problem.

While the helmet has access to basic phone, music and GPS features via your smartphone.

Watch: here

With Android One, Google is poised to own the entire world

Android One is a reference platform — it’s a set of rules that device makers can follow to make low-cost phones.

The first Android One devices will be produced by Indian manufacturers this fall. An example device that Google demonstrated this week featured a 4.5-inch display, support for two SIM cards at once (an important feature for many in developing markets), an SD card slot, and an FM radio. Critically, it is said to cost less than $100 to make, far less than the cost of most smartphones sold in the developed world.

Google isn’t just controlling the hardware with Android One, either — it’s also making sure the devices run the latest versions of Android.

Micromax, Karbonn Mobile and Spice Mobile will also be making Android One phones.

12-08-2014 10-31-09

DSC_3248_verge_super_wide

More: http://www.theverge.com/2014/6/26/5845562/android-one-google-the-next-billion

Angularjs – Directives

What are Directives?

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Matching Directives

Before we can write a directive, we need to know how Angular’s HTML compiler determines when to use a given directive.

$compile can match directives based on element names, attributes, class names, as well as comments.

All of the Angular-provided directives match attribute name, tag name, comments, or class name. The following demonstrates the various ways a directive (myDir in this case) can be referenced from within a template:

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

Template-expanding directive

Let’s say you have a chunk of your template that represents a customer’s information. This template is repeated many times in your code. When you change it in one place, you have to change it in several others. This is a good opportunity to use a directive to simplify your template.

Let’s create a directive that simply replaces its contents with a static template:

Script.js:

angular.module('docsSimpleDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
  }])
  .directive('myCustomer', function() {
    return {
      template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
  });
index.html:
<div ng-controller="Controller">
  <div my-customer></div>
</div>

Great! But what if we wanted to have our directive match the tag name <my-customer> instead? If we simply put a <my-customer>element into the HTML, it doesn’t work.

Note: When you create a directive, it is restricted to attribute only by default. In order to create directives that are triggered by element or class name, you need to use the restrict option.

The restrict option is typically set to:

  • 'A' – only matches attribute name
  • 'E' – only matches element name
  • 'C' – only matches class name

These restrictions can all be combined as needed:

  • 'AEC' – matches either attribute or element or class name

Let’s change our directive to use restrict: 'E':

Script.js:

angular.module(‘docsRestrictDirective’, [])
.controller(‘Controller’, [‘$scope’, function($scope) {
$scope
.customer = {
name
: ‘Naomi’,
address
: ‘1600 Amphitheatre’
};
}])
.directive(‘myCustomer’, function() {
return {
restrict
: ‘E’,
templateUrl
: ‘my-customer.html’
};
});

index.html

<div ng-controller="Controller">
  <my-customer></my-customer>
</div>

my-customer.html

Name: {{customer.name}} Address: {{customer.address}}

More: https://docs.angularjs.org/guide/directive