Heroic Web Applications with AngularJS

Have you been coding dynamic web applications and you still feel like struggling when need complex behaviour? Have you used BackboneJS, EmberJS or another MVC-like framework and still wonder what could be better? If your answer is: Yes!, then cry no more and meet your new friend: AngularJS.

AngularJS is an Open Source and Client-side Javascript framework maintained by Google. Some of its main features are:

MVC
The possibility to extend HTML with your own vocabulary for your application.
Two-way data binding
Services
Directives and reusable components
Testable

Now, I will explain how to code a sample application with Angular.

Requirements

You need an HTTP server on your machine. You can use your favourite thing here (e.g. Apache Server, Ruby's WEBrick server or anything else).

For simplicity, I will just use Python because it is already included on Ubuntu. So, just do on your terminal:

1	$ python3 -m http.server

This will start an HTTP server on your current directory. You should configure your server to serve files from your desired directory (e.g., your application directory or another one).

Step 1: Creating a project

The quickest way to start an Angular project is to use the Angular-Seed (an application skeleton to quickly bootstrap a new project). The seed includes all the needed libraries and files. Clone the Angular-Seed repository and host the files on your server.

Then, you should be able to access in your browser:

http://localhost:your_port/angular-seed/app/index.html

Great!

The typical Angular application is organised as follows:

angular-app/
---app/
----css/
----img/
----js/
----lib/
----partials/
--config/
--logs/
--scripts/
--test/

If you have experience with Ruby on Rails applications and other similar Web frameworks, this structure should be familiar enough.

Step 2: Initial Configuration

It is time to change the default seed project and explain some concepts. Open your 'index.html' and you will see something like this:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>AngularJS Sample App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>

The 'ng-app' is a reference that tells Angular to bootstrap your application with a Module named 'MyApp'. You define this Module on the 'app/js/app.js' file:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: UsersController});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

You can see the definition of the Module and its RouteProvider, which deals with routing to the different URLs of your application as follows:

1- URL path: A section of your Web application
2- A templateUrl to be rendered as a partial view
3- The Controller responsible for retrieving data and pass it to the view.

*See documentation for additional configurations and parameters.

As we defined a 'UsersController', then we need to implement it!

Step 3: Controllers and Models

Controllers are defined on the 'app/js/controller.js' file:

function UsersController($scope) {
  $scope.users = [
    {"name":"John"},
    {"name":"Sarah"},
    {"name":"Michael"},
    {"name":"Michelle"}
  ]
}

As you can see, we just need a plain old JavaScript function. Forget about extending proprietary framework objects (e.g. Ember.ObjectController.extend, Backbone.Model.extend).

The scope is a special declaration that serves as the glue between the application controller and the view. That sounds like the missing piece in our application.

Thus, we can use the '$scope' to define a Model (or in this case: a collection of User models). Using '$scope.users' we define a small collection of users (you can change the name to your desired Model).

*In this example we are coding data directly into '$scope.users'. However, we can actually communicate with a Back-end Server to retrieve real data. HTTP calls are performed using Angular Services.

Step 4: Views

We are almost done with our first Angular application. Let's go back to the 'index.html' file, and add these changes:

1
2
3

<body ng-controller="UsersController">

  <div ng-view></div>

The 'ng-controller' declaration is used by Angular to retrieve data for this View. Then, we put an 'ng-view' declaration to define a place to render a partial view.

*If you look back to the 'app/js/app.js' file, you will see that we defined a 'templateUrl'. That template comes from 'partials/partial1.html'. This is the partial:

<p>This is the partial for view 1.</p>

<ul>
  <li ng-repeat="user in users">
    {{user.name}}
  </li>
</ul>

We use an 'ng-repeat' declaration that tells Angular to loop over each 'user' in our Users collection. Thus, Angular retrieves data using the controller and renders the partial view directly into the 'ng-view' declaration, printing all the available names.

Next steps...

Now that you have a first AngularJS application, it is time for you to start coding something interesting. This post shows only the minimum functionality of Angular. I encourage you to dive into the documentation and explore the more advanced features of this great client-side Web framework.

Sample application repository

You can fork the repository of this sample application if you want to modify the code directly.

Search This Blog

Paul Estrada

Heroic Web Applications with AngularJS

Comments

Post a Comment

Popular posts from this blog

Android Testing in Headless Emulator

Automating Android builds with Gradle