What will we learn?
- AngularJS , We will learn the directives / Part 3
Requirements:
- Notepad+
- Linux Operating System
- HTML
Difficulty Level:
- Easy Level
Let's Start the Course :
NG-CLICK Directive
With the ng-click directive, you can run an expression or an AngularJS function to be executed each time the HTML element used is clicked.
You can see its use with a small scrolling example:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<title> Angular Directive Example </title>
<body>
<div ng-app="" ng init="increase=0">
<b>Number: </b> {{increase}} <br>
<br>
<input type="button" ng-click="increase = increase + 1" value=" İncrease Count / utopian.io" />
<br>
{{name}}
</div>
</body>
</html>
In the example, we initialize the incrementing variable with ng-init, and link it with {{increase}} expression in the data page. We added the input button element we added on this to the ng-click directive so that the increase variable increases by 1 each time. Accordingly, each time the button is clicked, the expression bound to the increase variable will increase.
NG-CLASS Directive
The ng-class directive is used to manipulate whether or not an element has a class with the notation of the object it provides.
I'll show you how to use it with a very simple example:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<title> Angular Directive Example </title>
<body>
<style>
.red { color:#FF0000; }
</style>
</head>
<div ng-app="">
<p ng-class="{red: 0}">The color of this article is not red.</p><br>
<p ng-class="{red: 1}">The color of this article is red.</p><br>
</div>
</body>
</html>
As you can see, according to the red object element being 1 or 0, the element 'p' will have a class of red.
Now let's try to see how to use the ng-class directive with ng-model with a checkbox in the simplest case;
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<title> Angular Directive Example </title>
<body>
<style>
p { color:#000; }
.red { color:#FF0000; }
</style>
</head>
<div ng-app="">
<p ng-class="{red: redVariable}">Test Writing / Utopian.io / Kingmaggot.</p><br>
<input type="checkbox" ng-model="redVariable"> Make Red<br>
</div>
</body>
</html>
The input chechbox element we see in the example is closed on open, ie it returns 1 or 0 values. Here you can understand the ng-model directive by comparing it with the input text elements we always use. In the input text elements, those inside the text boxes were instantiated by the ng-model.
The same is true of the Checkbox. If you examine the ng-class directive here you will see that you get an object string. The redVariable variable, which will determine whether the red class will be applied, will determine this by the value it gets through the ng-model.
Let's continue by examining the complexity of this example a bit more:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title> Angular Directive Example </title>
<body>
<style>
p { color:#000; }
.red { color:#FF0000; }
.big { font-size:21px; }
</style>
</head>
<div ng-app="">
<p ng-class="{red: redVariable, big:bigVariable}">Test Writing / Utopian.io / Kingmaggot.</p>
<label><input type="checkbox" ng-model="redVariable"> <b>Make Red</b>label><br>
<label><input type="checkbox" ng-model="bigVariable"> <b>Make Big</b>label><br>
</div>
</body>
</html>
In our ng-class directive, this time we have 2 elements, so if redVariable and bigVariable are 1 in both, p element is both .red and It will have .big classes. You can see this by examining the screen citations.
What Have You Learned :
In all the series of our article, we talked about the directive descriptor concept, the more complicated examples and the more used directives. We made our final preparations before we dived into AngularJ's MVC sea. And we are ready for our other talents.
For the rest of the article, follow our series.
Series :
1 - Angularjs Basic Directive Descriptors / Series 1 #1
2 - Angularjs Basic Directive Descriptors / Series 2 #2
3 - Angularjs Basic Directive Descriptors / Series 3 #3
Posted on Utopian.io - Rewarding Open Source Contributors