This is part #2 of the "AngularJS: From 0 To 100" series developed for absolute Beginners. The Part #1 can be found here.
For this series of tutorials we'll be using the open-source Brackets Web Editor, which is lightweight, powerful and optimized for AngularJS . The Brackets 5 minutes' setup can be seen in this post.
For this article we'll create an AngularJS List , dynamically bound to an input textarea , and a button bound to an AngularJS Expression.
Our AngularJS App will look like this:
What are Directives in AngularJS?
The simple AngularJS App that we're building will be based on the one at Tutorial #1:
Please copy-paste the HTML5 code that can be found at that Tutorial #1.
First thing we will do is to check the AngularJS framework is loaded: just click on the "Live Preview" button at the top right side of Brackets, and see if the browser displays the prices:
If there are no prices, just check that you added the "data-ng-app" Directive to the <html> tag:
The "data-ng-app" Directive is used to bootstrap an AngularJS App. Here you can find the documentation.
Provided that everything is ok so far, we'll create a button and use an "data-ng-click" Directive, which documentation you can see here in the AngularJS official site. Then add the HTML5 code for the button and the output span tag:
The code is this (copy-paste to your App):
<div >
<button data-ng-click="likes = likes + 1" data-ng-init="likes=0">
Like!!!
</button>
<span >
Likes: {{likes}}
</span>
</div>
Now you can run the App and see at the browser how the counter can be updated per click:
Next, we'll add a textarea and an AngularJS Expression, to build and output an Array of the typed songs , in Json format: as it can be seen at the AngularJS official documentation, we'll make use of the directives data-ng-model , data-ng-list and data-ng-trim :
The first one is used to BIND some HTML input element (text, checkbox, radio,week, month, time, number, email, url, date, select and textarea) to some property: in our case, the property will be called "FavoriteTracks". More details, at the documentation.
The second directive sets what sign will represent the separator in the list: " , " in our case.
The last one says to the AngularJS engine to keep white spaces, thus including them in the phrases.
Add the TextArea and the {{ Expression }} :
The code is the following (copy-paste to your App):
<div>
<h3>My Favorite Fragile State Songs :</h3>
<textarea data-ng-model="FavoriteTracks"
data-ng-list=","
data-ng-trim="false"
cols="60" rows="10">
</textarea>
<pre><b>Json Array of Selected Songs : </b><br>{{ FavoriteTracks | json }}</pre>
</div>
Press again the "Live Preview" icon to see the HTML in the browser:
And the final AngularJS View will show as follows:
The entire AngularJS HTML5 code is this:
<!doctype html>
<html data-ng-app>
<head>
<title>
My First AngularJS App
</title>
<style>div{width:500px;margin:0 auto;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
</head>
<body>
<h1>Fragile State Discography</h1>
<h2>Neil Cowley (Zero 7) and Ben Mynott</h2>
<ol>
<li ><img src="Nocturnal.jpg" >
<span id="no-fractions">Nocturnal Beats {{11.8 | currency:"USD$":0}} </span>
</li>
<li ><img src="Facts.jpg" >
<span id="fractions">The Facts And The Dreams (2003)
{{12.7 | currency:"USD$"}}</span>
</li>
<li ><img src="Voices.jpg" >
<span>Voices From The Dust Bowl (2004) {{10.4 | currency}}</span>
</li>
<li ><img src="Pretz.jpg" >
<span>Soundcastles (2006) {{9.9 | currency | uppercase}}</span>
</li>
</ol>
<div >
<button data-ng-click="likes = likes + 1" data-ng-init="likes=0">
Like!!!
</button>
<span >
Likes: {{likes}}
</span>
</div>
<div>
<h3>My Favorite Fragile State Songs :</h3>
<textarea data-ng-model="FavoriteTracks"
data-ng-list=","
data-ng-trim="false"
cols="60" rows="10">
</textarea>
<pre><b>Json Array of Selected Songs : </b><br>{{ FavoriteTracks | json }}</pre>
</div>
</body>
</html>
That All!!! You have begun using the AngularJS Directives . In the next article we will learn Step by Step What are Models and Data Binding in AngularJS.
Happy programming.....
by Carmel Schvartzman
<<<< PREVIOUS LESSON NEXT LESSON >>>>
כתב: כרמל שוורצמן
No comments:
Post a Comment