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:

  1. var sampleApp = angular.module('sampleApp', []);
  3. sampleApp.config(['$routeProvider',
  4. function($routeProvider)
  5. {
  6. $routeProvider.
  7. when('/ShowOrder/:orderId',
  8. {
  9. templateUrl: 'templates/show_order.html',
  10. controller: 'ShowOrderController'
  11. });
  12. }
  13. ]);
  14. sampleApp.controller('ShowOrderController', function($scope, $routeParams)
  15. {
  17. $scope.order_id = $routeParams.orderId;
  19. });
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:

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <title>Event Demo</title>
  6. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
  7. </script>
  9. </head>
  11. <body>
  12. <h3> Angular JS change Events</h3>
  13. <br/>
  15. <script>
  16. var app = angular.module("app", []);
  17. app.controller("ChangeController", function($scope)
  18. {
  20. $scope.CheckBoxChanged = function()
  21. {
  22. $scope.CheckBoxStatus = $scope.chkValue;
  23. };
  24. $scope.KeyDown = function()
  25. {
  26. $scope.keydown = " Key down executes " + new Date().getTime();
  27. }
  28. $scope.TextBoxChanged = function()
  29. {
  30. $scope.TextBoxStatus = $scope.txtValue;
  31. };
  32. $scope.KeyPress = function()
  33. {
  34. $scope.keypress = " Key press executes " + new Date().getTime();
  35. }
  36. $scope.DropDownChnaged = function()
  37. {
  38. $scope.DropDownStatus = $scope.dropValue;
  39. };
  41. });
  42. </script>
  43. <div ng-app="app" ng-controller="ChangeController">
  44. <input type="checkbox" name="chk1" ng-model="chkValue" ng-change="CheckBoxChanged()" />
  45. <p>Check box status: {{ CheckBoxStatus }}</p>
  46. <br/>
  47. <inputtype="text" name="txt1" ng-model="txtValue" ng-change="TextBoxChanged()" />
  48. <p>Text box status: {{ TextBoxStatus }}</p>
  49. <input type="text" ng-keydown="KeyDown()" ng-keypress="KeyPress()" ng-keyup="KeyUp()" />
  50. <br/>
  51. <p>Key down - {{ keydown }}</p>
  52. <p>Key press - {{ keypress }}</p>
  54. <br/>
  55. <select name="dropChange" ng-model="dropValue" ng-change="DropDownChnaged()">
  56. <option value="Male">Male</option>
  57. <option value="Female">Female</option>
  58. </select>
  59. <p>Dropdown box status: {{ DropDownStatus }}</p>
  60. </div>
  61. </body>
  63. </html>
  64. <!DOCTYPE html>
  65. <html>
Output

output

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