Sunday, 26 April 2015

AngularJS Modules



An AngularJS module defines an application.
A module is a container for the different parts of an application.
All application controllers should belong to a module.

A Module With One Controller:
This application ("myApp"), has one controller ("myCtrl"):
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "Ravi";
    $scope.lastName = "Gupta";
});
</script>

</body>
</html>


Modules and Controllers in Files:
It is common in AngularJS applications to put the module and the controllers in JavaScript files.
In this example, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

myApp.js

var app = angular.module("myApp", []);
The [] parameter in the module definition can be used to define dependent modules.

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "Ravi";
    $scope.lastName= "Gupta";
});


Functions can Pollute the Global Namespace:
Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.
AngularJS modules reduces this problem, by keeping all functions local to the module.

When to Load the Library?
In all our examples, the AngularJS library is loaded in the <head> section.
A common advise for HTML applications, is to place scripts at the very bottom of the <body> element.
But, in many AngularJS examples, you will see the library in the <head> element.
This is because calls to angular.module can only be compiled after the library has been loaded.
Another solution is to load the AngularJS library in the <body> element, before your own AngularJS scripts:
<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script>
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "Ravi";
    $scope.lastName = "Gupta";
});
</script>

</body>
</html>



AngularJS Events

AngularJS has its own HTML events directives.

The ng-click Directive:
The ng-click directive defines an AngularJS click event.
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>


Hiding HTML Elements:
The ng-hide directive can be used to set the visibility of a part of an application.
The value ng-hide="true" makes an HTML element invisible.
The value ng-hide="false" makes the element visible.
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-hide="myVar">
First Name: 
<input type="text" ng-model="firstName"><br>
Last Name: 
<input type="text" ng-model="lastName"><br>
<br>
Full Name: 
{{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Ravi",
    $scope.lastName = "Gupta"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

Application explained:
The application has a default property (a variable): $scope.myVar = false;
The ng-hide directive sets the visibility, of a <p> element with two input fields, according to the value (true or false) of myVar.
The function toggle() toggles myVar between true and false.
The value ng-hide="true" makes the element invisible.

Showing HTML Elements:
The ng-show directive can also be used to set the visibility of a part of an application.
The value ng-show="false" makes an HTML element invisible.
The value ng-show="true" makes the element visible.
Here is the same example as above, using ng-show instead of ng-hide:
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-show="myVar">
First Name: 
<input type="text" ng-model="firstName"><br>
Last Name: 
<input type="text" ng-model="lastName"><br>
<br>
Full Name: 
{{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Ravi",
    $scope.lastName = "Gupta"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>