This is the Part #1 of the "AngularJS: From 0 To 100" series designed for absolute Beginners.
For this tutorial we'll make use of the open-source Brackets Web Editor, which is lightweight, powerful and very AngularJS friendly. The Brackets installation is explained in this post.
Our AngularJS App will look like this:
First AngularJS Application For Beginners in 10 minutes
The simple AngularJS App that we're building here will look as follows:
First thing we need to do is to get the AngularJS framework. But instead of downloading it to our machine, we'll load the script using CDN (Content Delivery Network) . Browse to the official AngularJS web site :
Click on the "Download" button:
Here choose the latest Branch (version) "Minified" and copy the "CDN" URL: that will give us access to the latest AngularJS version at the GoogleAPIs Ajax library:
Open Brackets and type the following HTML:
Insert the CDN AngularJS script that you copy before, and add the AngularJS "ng-app" directive to the HTML tag:
Now we'll continue building our example with some headings...
...and a list of the high quality "Fragile State" discography:
At the top-right Brackets menu, press the "Live Preview" icon to see the HTML in the browser:
AngularJS Expressions is code inside double brackets {{ expression }}: take a look at the documentation in the AngularJS web site :
We'll use AngularJS expressions together with Filters , so read the AngularJS Filters documentation:
In order to show the prices we'll use the Expressions and Filters as follows:
This AngularJS expression tell simply that the price is "11.8" , and the Filter says that is "currency" with the type "USD$" , and that there will not be fractions, the price being therefore rounded upwards.
We'll append also expressions for the other prices, but this time , using fractions :
Because you enabled the Brackets "Live Preview", every time you SAVE the HTML file, the browser is automatically refreshed:
And the final AngularJS View will be as follows:
The full AngularJS HTML code is here , to copy-paste:
<!doctype html>
<html ng-app>
<head>
<title>
My First AngularJS App
</title>
<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>
</body>
</html>
That All!!! You have begun using the AngularJS javascript framework . In this article we learned Step by Step How to create a First AngularJS Application For Beginners in 10 minutes.
In the next article we will learn Step by Step What are Directives in AngularJS.
Happy programming.....
by Carmel Schvartzman
NEXT LESSON >>>>
כתב: כרמל שוורצמן
No comments:
Post a Comment