AngularJS - Part 5

Before continuing this, please refer AngularJS - Part 4

AngularJS - Forms

Controls (input, select, textarea) are ways for a user to enter data. A Form is a collection of controls for the purpose of grouping related controls together.
Form and controls provide validation services, so that the user can be notified of invalid input before submitting a form. This provides a better user experience than server-side validation alone because the user gets instant feedback on how to correct the error. Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted. Server-side validation is still necessary for a secure application.

Events

AngularJS provides multiple events which can be associated with the HTML controls. For example ng-click is normally associated with button. Following are supported events in Angular JS.

• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseup
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change

 

ng-click

Reset data of a form using on-click directive of a button.

<input name = "firstname" type = "text" ng-model = "firstName" required>

<input name = "lastname" type = "text" ng-model = "lastName" required>

<input name = "email" type = "email" ng-model = "email" required>

<button ng-click = "reset()">Reset</button>

<script>

   function studentController($scope) { 

      $scope.reset = function(){

         $scope.firstName = "Mahesh";

         $scope.lastName = "Parashar";

         $scope.email = "MaheshParashar@tutorialspoint.com";

      }   

      $scope.reset();

   }

</script>

 

Validate data

Following can be used to track error.

• $dirty − states that value has been changed.
• $invalid − states that value entered is invalid.
• $error − states the exact error.

AngularJS – Includes

HTML does not support embedding html pages within html page. To achieve this functionality following ways are used −

• Using Ajax − Make a server call to get the corresponding html page and set it in innerHTML of html control.
• Using Server Side Includes − JSP, PHP and other web side server technologies can include html pages within a dynamic page.

Using AngularJS, we can embedded HTML pages within a HTML page using ng-include directive.
<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

AngularJS – Scopes

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

 

Scope as Data-Model

Scope is the glue between application controller and the view. During the template linking phase the directives  set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.

In controllers, model data is accessed via $scope object.

<script>

   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {

      $scope.message = "In shape controller";

      $scope.type = "Shape";

   });

</script>

Following are the important points to be considered in above example.

• $scope is passed as first argument to controller during its constructor definition.
• $scope.message and $scope.type are the models which are to be used in the HTML page.
• We've set values to models which will be reflected in the application module whose controller is shapeController.
• We can define functions as well in $scope.

 

Scope Inheritance

Scope are controllers specific. If we defines nested controllers then child controller will inherit the scope of its parent controller.

<script>

   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {

      $scope.message = "In shape controller";

      $scope.type = "Shape";

   });

   mainApp.controller("circleController", function($scope) {

      $scope.message = "In circle controller";

   });   

</script>

Following are the important points to be considered in above example.

• We've set values to models in shapeController.
• We've overridden message in child controller circleController. When "message" is used within module of controller circleController, the overridden message will be used.

 <<Angular JS -Part 4                                                                                     Angular JS -Part 6>>