Let's take a look example of area calculation of different shapes using AngularJS Expression and Controller.
- Square and Rectangle shape's Area calculation using AngularJS expression
- Circle and Triangle shape's Area calculation using AngularJS controller.
Mentioned page is also design using bootstrap to give nice look and feel.
Please check my previous blog post related to following topics as mentioned.
Please check LIVE demo of given example here :
Click Here
AngularJS Expression
AngularJS binds data to HTML using Expressions. It can be written inside double braces as
{{ expression }}. It can also written inside
ng-bind directive. In example you will see Square and Rectangle area calculation expression inside AngularJS Expression. AngularJS will resolve the expression and return the value to the HTML element.
Square
square variable which is width/height of shape and we are initializing variable using
ng-init directive.
The same variable is bind with input textbox using
ng-model directive.
The Square shape area calculation equation added inside AngularJS Expression as
{{sqaure*sqaure}}
Rectangle
Rectangle shape's width rectwidth and height
rectheight initialize using
ng-init directive. Both variables are bind with input textbox using
ng-model directive. The Rectangle Area calculation equation is added inside AngularJS Expression as
{{rectwidth*rectheight}}
AngularJS Controller
AngularJS applications are controlled by controller. The
ng-controller directive is used to define a controller object. AngularJS Controller is javascript object created using JavaScript Object Constructor notation.
In my application
ng-app="myApp" directive which is defined AngularJS application. This application run inside define <div> element.The
ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller. When Controller object initialized from JavaScript language it also passes $scope object. Within $scope object we are initializing variables for Circle and Triangle which also contain methods to perform Area calculations.
Circle
Circle's radius variable or attribute is initialized inside controller object in javascript line
$scope.radius=6; The variable is also bind with input textbox using
ng-model directive. To perform circle area calculation we need MATH.PI variable so we are passing $window service also using AngularJS Service Injection feature.
$scope.circleArea = function do the calculation and which is added in HTML using AngularJS Expression as
{{circleArea()}}
Triagle
Triangle's shape base and height variable or attributes are initialized inside controller object in javascript line
$scope.base=4; $scope.height=7; Both variables are bind with input textboxes using
ng-model directive.
$scope.triangleArea = function do the calculation and which is added in HTML using AngularJS Expression as
{{triangleArea()}}
AngularExpression.html
Hope this example give you some basic idea about AngularJS Expression & Controller.
Please post your questions or comments bellow. Thank You !
