AngularJs - Simple Example
In Angular "-" is used because HTML specification says that anything with - will not be parsed by HTML. Means If you will use - in element naming then other needs to parse it. So in thins case Angular will parse elements.
$scope - Is a Angular Service for a scope management. As per the following code, Each ng-controller scope is different. $scope is parameter for your function and angular will inject $scope object into your function.
$rootScope - Application have only one rootScope and which is global.
This code will create object of customer class and this controller will have his scope under that scope he do have access to Customer Name and Customer Code.
<div ng-controller="customerObj">
$scope.$watch("CustomerAmount", function() - This is the customer watch code
ng-App - In one HTML file you can have only one ng-app.
{{::DatetimeCreated}}
********************************* Code ************************************
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var Customer = function ($scope, $rootScope) {
$rootScope.Counter = (($rootScope.Counter || 0) +1);
$scope.CustomerName = "Milind";
$scope.CustomerCode = "000001";
$scope.CustomerAmount = 100;
$scope.CustomerAmountColor = "red";
$scope.$watch("CustomerAmount", function() {
if ($scope.CustomerAmount > 100) {
$scope.CustomerAmountColor = "green";
}
else {
$scope.CustomerAmountColor = "blue";
}
})
$scope.onSubmit = function () {
if ($scope.CustomerName.length == 0) {
alert("Invalid Customer Name.");
}
else {
alert("It's Good...");
}
}
}
var myApp = angular.module("myApp", []);
myApp.controller("customerObj", Customer)
</script>
</head>
<body ng-app="myApp">
<div ng-controller="customerObj">
Global Counter:{{Counter}} <br />
Customer Name: <input ng-model="CustomerName" type="text" id="customerName" />
Customer Code: <input ng-model="CustomerCode" type="text" id="customerCode" />
Customer Code: <input ng-model="CustomerAmount" style="background-color:{{CustomerAmountColor}}" type="text" id="customerName" />
<input type="button" name="name" ng-click="onSubmit()" value="Submit" /><br/>
{{::DatetimeCreated}}
<div>{{CustomerName}}</div>
<div>{{CustomerCode}}</div>
</div>
<div ng-controller="customerObj">
Customer Name: <input ng-model="CustomerName" type="text" id="customerName" />
Customer Code: <input ng-model="CustomerCode" type="text" id="customerCode" />
<div>{{CustomerName}}</div>
<div>{{CustomerCode}}</div>
</div>
</body>
</html>
$scope - Is a Angular Service for a scope management. As per the following code, Each ng-controller scope is different. $scope is parameter for your function and angular will inject $scope object into your function.
$rootScope - Application have only one rootScope and which is global.
This code will create object of customer class and this controller will have his scope under that scope he do have access to Customer Name and Customer Code.
<div ng-controller="customerObj">
$scope.$watch("CustomerAmount", function() - This is the customer watch code
ng-App - In one HTML file you can have only one ng-app.
:: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value{{::DatetimeCreated}}
********************************* Code ************************************
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var Customer = function ($scope, $rootScope) {
$rootScope.Counter = (($rootScope.Counter || 0) +1);
$scope.CustomerName = "Milind";
$scope.CustomerCode = "000001";
$scope.CustomerAmount = 100;
$scope.CustomerAmountColor = "red";
$scope.$watch("CustomerAmount", function() {
if ($scope.CustomerAmount > 100) {
$scope.CustomerAmountColor = "green";
}
else {
$scope.CustomerAmountColor = "blue";
}
})
$scope.onSubmit = function () {
if ($scope.CustomerName.length == 0) {
alert("Invalid Customer Name.");
}
else {
alert("It's Good...");
}
}
}
var myApp = angular.module("myApp", []);
myApp.controller("customerObj", Customer)
</script>
</head>
<body ng-app="myApp">
<div ng-controller="customerObj">
Global Counter:{{Counter}} <br />
Customer Name: <input ng-model="CustomerName" type="text" id="customerName" />
Customer Code: <input ng-model="CustomerCode" type="text" id="customerCode" />
Customer Code: <input ng-model="CustomerAmount" style="background-color:{{CustomerAmountColor}}" type="text" id="customerName" />
<input type="button" name="name" ng-click="onSubmit()" value="Submit" /><br/>
{{::DatetimeCreated}}
<div>{{CustomerName}}</div>
<div>{{CustomerCode}}</div>
</div>
<div ng-controller="customerObj">
Customer Name: <input ng-model="CustomerName" type="text" id="customerName" />
Customer Code: <input ng-model="CustomerCode" type="text" id="customerCode" />
<div>{{CustomerName}}</div>
<div>{{CustomerCode}}</div>
</div>
</body>
</html>
Good one, helps to learn, keep posting.
ReplyDelete
ReplyDeletevery very amazing explaintion....many things gather about yourself...yes realy i enjoy it
Interesting blog post.This blog shows that you have a great future as a content writer.waiting for more updates...
Digital Marketing Company in India
Digital Marketing Services in India
Digital Marketing Agency in India
Nice Article
ReplyDelete8 ball pool coins generator
logistics companies in usa
ReplyDeleteবাণিজ্যিক ফাঁকা স্থান বিক্রয় করুন
ReplyDelete