AngularJS - Part 4

Before continuing this, please refer Angular JS -Part 3

AngularJS - HTML DOM

Following directives can be used to bind application data to attributes of HTML DOM Elements.

Sr.No.	Name	Description
1	ng-disabled	disables a given control.
2	ng-show	shows a given control.
3	ng-hide	hides a given control.
4	ng-click	represents a AngularJS click event.

ng-disabled directive

Add ng-disabled attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button

<button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show directive

Add ng-show attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

<input type = "checkbox" ng-model = "showHide1">Show Button

<button ng-show = "showHide1">Click Me!</button>

 

ng-hide directive

Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

<input type = "checkbox" ng-model = "showHide2">Hide Button

<button ng-hide = "showHide2">Click Me!</button>

 

ng-click directive

Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.

<p>Total click: {{ clickCounter }}</p>

<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

AngularJS – Modules

You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

 

Why we use it?

Most applications have a main method that instantiates and wires together the different parts of the application.
Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:

• The declarative process is easier to understand.
• You can package code as reusable modules.
• The modules can be loaded in any order (or even in parallel) because modules delay execution.
• Unit tests only have to load relevant modules, which keeps them fast.
• End-to-end tests can use modules to override configuration.

We define modules in separate js files and name them as per the module.js file. In this example we're going to create two modules.

• Application Module − used to initialize an application with controller(s).
• Controller Module − used to define the controller.

 

Application Module

mainApp.js

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

Here we've declared an application mainApp module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules.

 

Controller Module

studentController.js

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

   $scope.student = {

      firstName: "Mahesh",

      lastName: "Parashar",

      fees:500,

      subjects:[

         {name:'Physics',marks:70},

         {name:'Chemistry',marks:80},

         {name:'Math',marks:65},

         {name:'English',marks:75},

         {name:'Hindi',marks:67}

      ],

      fullName: function() {

         var studentObject;

         studentObject = $scope.student;

         return studentObject.firstName + " " + studentObject.lastName;

      }

   };

});

Here we've declared a controller studentController module using mainApp.controller function.

 

Use Modules

<div ng-app = "mainApp" ng-controller = "studentController">

   ...

   <script src = "mainApp.js"></script>

   <script src = "studentController.js"></script>    

</div>

Here we've used application module using ng-app directive and controller using ng-controller directive. We've imported mainApp.js and studentController.js in the main html page.

 <<Angular JS -Part 3                                   Angular JS -Part 5>>