Some developers call it the “superheroic JavaScript framework”, some the next jQuery, while others see it as the most popular front-end framework currently available. On the other hand, we like to look at AngularJS as “what the web browser would have been, had it been designed for applications“.
AngularJS is a JavaScript framework for Web applications, or simply said, a Web framework, which is sustained by Google and other corporations, and it’s considered the best framework for developing single-page web applications.
Originally developed in 2009 (by Miško Hevery and Adam Abrons), Angular has quickly climbed the ladder in popularity, thanks to features such as: dependency injection, directive writing, two way data-binding and testability.
Reasons for learning a thing or two about Angular
1. Angular supports parallel workflow: similar to XAML, Angular enables developers involved in the project to work in parallel on various tasks
2. Angular handles very well dependency injection: meaning that a developer can divide an app into logical modules, which will have dependencies on each other, although they are initialized separately
3. Angular allows developers to perform Test-Driven Development, Behavior-Driven Development, and other driven-development methodologies. Now, now don’t get upset, you don’t like testing, I know, but the alternative would be to fix (sometimes near the deadline) an endless number of issues… so do you see the importance of testing? 🙂
4. Angular supports Single Page Applications: do you need a simple website, perfectly suited for your needs? You need look no further – Angular can take care of this, providing developers with proper infrastructure, templates, journaling etc.
5. Developers can express UI declaratively, with benefits such as:
- A structured UI can be understood and manipulated better
- Designers that find programming hard can instead learn markup language
- The bindings are declared at the source
The Angular learning curve
Most developers agree that AngularJS is not the easiest thing to learn, and it has a steep learning curve… or at least for the more advanced stuff. Starting learning Angular is pretty easy, but there is no royal road for learning the more advanced stuff.
Also, when it comes to documentation, prepare to “dig deep” in order to find the help you need (I recommend reading some good tutorials, such as the ones from CodeCademy.
Angular at work
It would be impossible to list even the smallest part of the well known websites which use Angular, so I consider that the websites of Intel, Sprint, NBC and ABC News are enough to convey its usage and popularity. Now it’s time to get underway and see it in action.
The application that I’m boing to present lists a number of products that can be selected, their total price being updated and displayed in real time (using two way data-binding). This is done by creating an Angular module and attaching a custom controller to it.
The products are displayed using a ng-repeater and are selected using the ng-click functionality from Angular, where the new total is calculated and it’s automatically updated in the website, using two way data-binding.
Disclaimer: Please be advised that we are not responsible for any food or hunger related problems that you may encounter during this tutorial. 🙂
This is the HTML code sample:
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body ng-controller="productsController">
<div>
<ul class="productsList">
<li ng-repeat="product in products" ng-click="selectProduct(product)" ng-class="{selected: product.selected}">
{{ product.title }} <span>{{ product.price | currency }}</span>
</li>
</ul>
<div class="Total:">
Total: <span>{{ total | currency }}</span>
</div>
</div>
</body>
</html>This is the JS code:
var app = angular.module("myApp", []);
app.controller('productsController', ['$scope', function ($scope) {
$scope.total = 0.00;
$scope.products = [
{
title: 'Water',
selected: false,
price: 1.25
},{
title: 'Cold Soda',
selected: false,
price: 1.0
},{
title: 'Tasty Fries',
selected: false,
price: 3.25
},{
title: 'Fresh Hamburger',
selected: false,
price: 4.50
},{
title: 'Delicious Steak',
selected: false,
price: 15
}
];
$scope.selectProduct = function(product) {
product.selected = !product.selected;
$scope.total = getTotal();
};
function getTotal() {
var total = 0;
angular.forEach($scope.products, function(item) {
if (item.selected){
total += item.price;
}
});
return total;
}
$scope.total = getTotal();
}]);And this is the CSS code:
* {
font-weight: bold;
color: #FFFFFF;
}
div {
background-color: #14A27A;
width: auto;
padding: 20px 60px;
border-radius: 4px;
}
.productsList {
list-style: none;
color: #000000;
font-size: 18px;
}
.productsList li {
padding: 10px 20px;
background-color: rgba(2, 33, 65, 0.63);
box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.15) inset, 1px 1px 1px 0px rgba(0, 0, 0, 0.15);
cursor: pointer;
border-radius: 4px;
margin-bottom: 20px;
}
.productsList li span {
float:right;
}
.productsList li.selected {
background-color: rgba(146, 222, 147, 0.81);
color: #000;
}
.total {
padding: 10px 0px 0px 40px;
font-size: 20px;
}
.total span {
float: right;
}Now that you’ve seen it in action, it’s time to get underway and start practicing with Angular yourself. If you’ve created some interesting Angular snippets in the past, please feel free to share them.
