JanaDotNet: Start With AngularJS: Part 7

Thank you for reading my previous articles. If you have not read them, then study from the following links. After reading them it will be easier to understand today’s topics.

Routing in AngularJS

It helps us to divide your app into multiple view and bind it different views to Controllers. A route is specified in the URL after the # sign.

Like:

$ rout Provider taken care by AngularJS. To define the routes for your app$route Provider service provides method when () and otherwise ().

Example:

var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider)
{
$routeProvider.
when('/ShowOrder/:orderId',
{
templateUrl: 'templates/show_order.html',
controller: 'ShowOrderController'
});
}
]);
sampleApp.controller('ShowOrderController', function($scope, $routeParams)
{
$scope.order_id = $routeParams.orderId;
});

AngularJS Events

That directive allows you to run its functions at user event. It is not overwriting with HTML5 event. In page both events can be executed at a time.

It has several types:

Ng-Mouse enters: it execute of mouse when itenter on element area.
Ng-mouse over: it execute of mouse when it over on element area.
Ng-mouse move: it execute of mouse when it move on element area.
Ng-mouse leave: it execute of mouse when it leave on element area.
Ng-mouse down: it execute of mouse when it down on element area.
Ng-mouse up: it execute of mouse when it up on element area.
Ng-click: it execute when click on element area.
Ng-change: it execute when changed on element area.
Ng-key press: After key press that event execute.
Ng-Submit: it execute of mouse click on element area.
Ng-blur: it execute after blur on element area.
Ng-copy: it execute after copy text on element area.
Ng-cut: it execute after cut text on element area.
Ng-dblclick: it execute after dbl click on element area.
Ng-focus: it execute after focusing on element area.
Ng-paste: it execute after paste on element area.

<!DOCTYPE html>
<html>
<head>
<title>Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h3> Angular JS change Events</h3>
<br/>
<script>
var app = angular.module("app", []);
app.controller("ChangeController", function($scope)
{
$scope.CheckBoxChanged = function()
{
$scope.CheckBoxStatus = $scope.chkValue;
};
$scope.KeyDown = function()
{
$scope.keydown = " Key down executes " + new Date().getTime();
}
$scope.TextBoxChanged = function()
{
$scope.TextBoxStatus = $scope.txtValue;
};
$scope.KeyPress = function()
{
$scope.keypress = " Key press executes " + new Date().getTime();
}
$scope.DropDownChnaged = function()
{
$scope.DropDownStatus = $scope.dropValue;
};
});
</script>
<div ng-app="app" ng-controller="ChangeController">
<input type="checkbox" name="chk1" ng-model="chkValue" ng-change="CheckBoxChanged()" />
<p>Check box status: {{ CheckBoxStatus }}</p>
<br/>
<inputtype="text" name="txt1" ng-model="txtValue" ng-change="TextBoxChanged()" />
<p>Text box status: {{ TextBoxStatus }}</p>
<input type="text" ng-keydown="KeyDown()" ng-keypress="KeyPress()" ng-keyup="KeyUp()" />
<br/>
<p>Key down - {{ keydown }}</p>
<p>Key press - {{ keypress }}</p>
<br/>
<select name="dropChange" ng-model="dropValue" ng-change="DropDownChnaged()">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<p>Dropdown box status: {{ DropDownStatus }}</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>

Output

output

I hope you will understand and will practice with my demo.

JanaDotNet

Tuesday, 2 February 2016

Start With AngularJS: Part 7

No comments:

Post a Comment