Let's take a look example of area calculation of different shapes using AngularJS Expression and Controller.
Please check my previous blog post related to following topics as mentioned.
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 !
- Square and Rectangle shape's Area calculation using AngularJS expression
- Circle and Triangle shape's Area calculation using AngularJS controller.
Please check my previous blog post related to following topics as mentioned.
- What Is AngularJS? Introduction and Basic Example.
- What is Bootstrap? Setup and Basic Template Example !
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 !
