Hover over the code to see how it all connects.
There are a lot of parts to Angular. When you are first learning it it can be very overwhelming. To help I created this small learning tool to let you see how different parts connect.
The way it works is simple simply move your mouse over an Angular element anywhere you see it and it will highlight it everywhere else. Visually showing you how it’s all connected.
The sample code simply counts the number of times you click a button. It’s a simple app that illustrated some of the commonly used components of angular:
- Contains the necessary part “ng-app” directive
- The very useful controller
- Data binding to a variable
- Binding to a function
Go ahead over over these bullets or the code and see what I mean. Let me know what you think in the comments below.
You can play around with a working version of this code using this JS Fiddle: http://jsfiddle.net/luisperezphd/JTU67/.
angular.module("MyModule", [])
.controller("MyController", function($scope) {
$scope.clickCount = 0;
$scope.userClick = function() {
$scope.clickCount++;
};
});
HTML
<!DOCTYPE html> <html ng-app="MyModule"> <head> <script src="angular.min.js"></script> <script src="myscript.js"></script> </head> <body><div ng-controller="MyController"> You clicked the button {{clickCount}} times.<br/> <button ng-click="userClick()">Click me!</button> </div></body> </html>
Simply cool. great going , hope to see more.
nice one, really helps to recount the connectivity of different parts
Hi Luis
I can see this being very useful within an text editor or IDE. It’s effortless to just hover over an element and see where it is referenced. Thanks for sharing.
All the best
Mulk