By now you’ve probably heard of
AngularJS
– the exciting open source framework, developed by Google, that changes
the way you think about web apps. There has been much written about it,
but I have yet to find something that is written for developers who
prefer quick and practical examples. This changes today. Below you will
find the basic building blocks of Angular apps - Models, Views,
Controllers, Services and Filters - explained in 5 practical examples
that you can edit directly in your browser. If you prefer to open them
up in your favorite code editor, grab the zip above.
What is AngularJS?
On a high level,
AngularJS
is a framework that binds your HTML (views) to JavaScript objects
(models). When your models change, the page updates automatically. The
opposite is also true – a model, associated with a text field, is
updated when the content of the field is changed. Angular handles all
the glue code, so you don’t have to update HTML manually or listen for
events, like you do with jQuery. As a matter of fact, none of the
examples here even include jQuery!
To use AngularJS, you have to include it in your page before the closing <body> tag.
Google’s CDN is recommended for a faster load time:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
AngularJS gives you a large number of
directives that let you associate HTML elements to models. They are attributes that start with
ng-
and can be added to any element. The most important attribute that you
have to include in any page, if you wish to use Angular, is
ng-app:
<body ng-app>
It should be added to an element that encloses the rest of the page,
like the body element or an outermost div. Angular looks for it when the
page loads and automatically evaluates all directives it sees on its
child elements.
Enough with the theory! Now let’s see some code.
1. Navigation Menu
As a first example, we will build a navigation menu that highlights the selected entry. The example uses only Angular’s
directives, and is the simplest app possible using the framework. Click the “
Edit” button to see the source code. It is ready for experimentation!
In the code above, we are using Angular’s directives to set and read the
active
variable. When it changes, it causes the HTML that uses it to be
updated automatically. In Angular’s terminology, this variable is called
a model. It is available to all directives in the current scope, and
can be accessed in your controllers (more on that in the next example).
If you have used JavaScript templates before, you are familiar with the
{{var}}
syntax. When the framework sees such a string, it replaces it with the
contents of the variable. This operation is repeated every time var is
changed.
2. Inline Editor
For the second example, we will create a simple inline editor –
clicking a paragraph will show a tooltip with a text field. We will use a
controller that will initialize the models and declare two methods for
toggling the visibility of the tooltip. Controllers are regular
JavaScript functions which are executed automatically by Angular, and
which are associated with your page using the
ng-controller directive.
When the controller function is executed, it gets the special
$scope object as a parameter. Adding properties or functions to it makes them available to the view. Using the
ng-model
binding on the text field tells Angular to update that variable when
the value of the field changes (this in turn re-renders the paragraph
with the value).
3. Order Form
In this example, we will code an order form with a total price
updated in real time, using another one of Angular’s useful features –
filters. Filters let you modify models and can be chained together using the pipe character
|. In the example below, I am using the
currency filter,
to turn a number into a properly formatted price, complete with a
dollar sign and cents. You can easily make your own filters, as you will
see in example #4.
The
ng-repeat binding (
docs)
is another useful feature of the framework. It lets you loop through an
array of items and generate markup for them. It is intelligently
updated when an item is changed or deleted.
Note: For a more complete version, see
this tutorial, which is based on
this one, written with Backbone.js.
4. Instant Search
This example will allow users to filter a list of items by typing
into a text field. This is another place where Angular shines, and is
the perfect use case for writing a custom filter. To do this though, we
first have to turn our application into a module.
Modules are a way of organizing JavaScript applications into
self-contained components that can be combined in new and interesting
ways. Angular relies on this technique for code isolation and requires
that your application follows it before you can create a filter. There
are only two things that you need to do to turn your app into a module:
- Use the
angular.module("name",[]) function call in your JS. This will instantiate and return a new module;
- Pass the name of the module as the value of the
ng-app directive.
Creating a filter then is as simple as calling the
filter() method on the module object returned by
angular.module("name", []).
Filters follow the Angular.js philosophy – every piece of code that
you write should be self-contained, testable and reusable. You can use
this filter in all your views and even combine it with others through
chaining.
5. Switchable Grid
Another popular UI interaction is switching between different layout
modes (grid or list) with a click of a button. This is very easy to do
in Angular. In addition, I will introduce another important concept –
Services.
They are objects that can be used by your application to communicate
with a server, an API, or another data source. In our case, we will
write a service that communicates with
Instagram’s API and returns an array with the most popular photos at the moment.
Note that for this code to work, we will have to include one additional Angular.js file in the page:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
This includes the
ngResource module for easily working with AJAX APIs (the module is exposed as the
$resource variable in the code). This file is automatically included in the editor below.
Services are entirely self-contained, which makes it possible to write
different implementations without affecting the rest of your code. For
example, while testing, you might prefer to return a hard-coded array of
photos which would speed up your tests.
more info:
http://tutorialzine.com/2013/08/learn-angularjs-5-examples/
RSS Feed
Twitter
Facebook