AngularJS :Module
AngularJS declare a new application with module.Module is top level of an AngularJS Application.Every element of an AngularJS application comes under Module.Controller,Scope,Directive comes under Module.The element declared under a module , is accessible throughout the module .A module can hold multiple controller and directives.Module is defined as regular javascript object.
Here is example of module declaration.
ng-app is the module directive . ng-app accept the module name , which actually instruction to load
an module.It is entry point of an application.
Here is example of module directive initialization.
AngularJS :Controller
AngularJS controller is an JavaScript object.Each controller comes under a module.
Example
Controller control the application.Controller is reffed as ng-controller directive.Controller is a constructor function , an object $scope is passed as an argument to the controller.
Below is an example of Controller with array of object .The object value displays as in output.
Example
Output :
Name : User 1
Name : User 2
Name : User 3
Name : Person 1
Name : Person 2
Name : Person 3
AngularJS declare a new application with module.Module is top level of an AngularJS Application.Every element of an AngularJS application comes under Module.Controller,Scope,Directive comes under Module.The element declared under a module , is accessible throughout the module .A module can hold multiple controller and directives.Module is defined as regular javascript object.
Here is example of module declaration.
<script>
var
app = angular.module("myApp",
[]);
</script>
ng-app is the module directive . ng-app accept the module name , which actually instruction to load
an module.It is entry point of an application.
Here is example of module directive initialization.
<div
ng-app="myApp">
</div>
AngularJS controller is an JavaScript object.Each controller comes under a module.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myCtrl",
function
($scope) {
$scope.Message
= "I am Learing AngularJs";
});
</script>
</body>
<div
ng-app="myApp"
ng-controller="myCtrl">
{{
Message }}
</div>
Output:
I am Learing AngularJs
Controller control the application.Controller is reffed as ng-controller directive.Controller is a constructor function , an object $scope is passed as an argument to the controller.
Below is an example of Controller with array of object .The object value displays as in output.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="myapp">
<script>
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.items
= ['User 1',
'User 2',
'User 3'];
});
</script>
<div
ng-controller="myController">
<table>
<tr
ng-repeat="obj
in items">
<td>
Name
:
</td>
<td>
{{obj}}
</td>
</tr>
</table>
</div>
</body>
Output:
| Name : | User 1 | |
| Name : | User 2 | |
| Name : | User 3 |
Below is an example of multiple Controller in a single application.
Example
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="myapp">
<script>
angular.module("myapp",
[])
.controller("myController1",
function
($scope) {
$scope.items
= ['User 1',
'User 2',
'User 3'];
})
.controller("myController2",
function
($scope)
{
{
$scope.items
= ['Person 1',
'Person 2',
'Person 3'];
});
</script>
<div
ng-controller="myController1">
<table>
<tr
ng-repeat="obj
in items">
<td>
Name
:
</td>
<td>
{{obj}}
</td>
</tr>
</table>
</div>
<div
ng-controller="myController2">
<table>
<tr
ng-repeat="obj
in items">
<td>
Name
:
</td>
<td>
{{obj}}
</td>
</tr>
</table>
</div>
</body>
Output :
Name : User 2
Name : User 3
Name : Person 1
Name : Person 2
Name : Person 3
AngularJS :Directive
Directive add functionality to the application .There are a set of inbuilt Directive in the AngularJS.Each has a specific functionality.Below are some of the inbuilt Directive.
ng-app : Defines a an application.
ng-bind : Bind the HTML to application data.
ng-click : When clicked , some operation is done.
ng-controller : Defines the controller object.
ng-disabled : Detect an element is disabled or not.
ng-init : Set initial values for an application variable.
Below is a simple example of directive usage.
Example
Output :
A directive can be made custom.Below is a example of Custom Directive.
The directive name is 'myCustomDirective' , when mouse is take over the place , where is directive is placed , the back ground color change , when click text change automatically
Example
Directive add functionality to the application .There are a set of inbuilt Directive in the AngularJS.Each has a specific functionality.Below are some of the inbuilt Directive.
ng-app : Defines a an application.
ng-bind : Bind the HTML to application data.
ng-click : When clicked , some operation is done.
ng-controller : Defines the controller object.
ng-disabled : Detect an element is disabled or not.
ng-init : Set initial values for an application variable.
Below is a simple example of directive usage.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myCtrl",
function
($scope)
{
$scope.firstString
= "I am Learing ";
$scope.secondString
= " AngularJS ";
});
</script>
</body>
<div
ng-app="myApp"
ng-controller="myCtrl">
{{
firstString + " " + secondString }}
</div>
Output :
I
am Learing AngularJS
A directive can be made custom.Below is a example of Custom Directive.
The directive name is 'myCustomDirective' , when mouse is take over the place , where is directive is placed , the back ground color change , when click text change automatically
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.directive('myCustomDirective',
function
() {
return
{
link:
function
($scope, element, attrs) {
element.bind('click',
function
() {
element.html('Success
your First Directive Test');
});
element.bind('mouseover',
function
() {
element.css('background-color',
'red');
});
element.bind('mouseleave',
function
() {
element.css('background-color',
'white');
});
}
};
});
</script>
<div
ng-app="myApp"
>
<div
my-custom-directive>Here
is the Result</div>
</div>
</body>
Output: Here is the Result Here is the Result Success your First Directive Test Generally directive name are written in CamelCase . It is recommend to write directive name dash delimited format . For example 'StudentName' should be written as 'Student-Name'. Below is another example of custom directives. Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<style>
.myClass
{
background-color:
red;
font-size:
large;
height:
100px;
width:
200px;
color:
aqua;
}
</style>
<script>
var
app = angular.module("myApp",
[]);
app.directive('myCustomDirective',
function
()
{
return
{
link:
function
($scope, element, attrs) {
restrict:
'A',
element.bind('click',
function
() {
element.html('
This is simple Custom Directive
');
});
}
};
});
</script>
<div
ng-app="myApp">
<div
my-custom-directive>
Click
Me!</div>
</div>
</body>
Output:
Click
Me!-->>Click>>
An AngularJS can create the custom directive for the following types of elements.Restrict mode ensure that directive will activate with the matching element only.
Element directives : Restriction mode 'E'. This mode activate for type element only.
Example :
<
my-custom-directive></my-custom-directive>Attribute : Restriction mode 'A'.This mode activate for type attribute only.
Example :
my-custom-directive></my-custom-directive>
CSS : Restriction mode 'C'.This mode activate for class only.
Example :
my-custom-directive"></
my-custom-directive>
Comment : Restriction mode 'M'.This mode activate for comments only.
| |||||||||||
No comments:
Post a Comment