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:
1 2 3 4 5 6 7 | <!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> |
1 2 3 4 5 | 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'}); }]); |
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:
1 2 3 4 5 6 7 8 | function UsersController($scope) { $scope.users = [ {"name":"John"}, {"name":"Sarah"}, {"name":"Michael"}, {"name":"Michelle"} ] } |
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:
1 2 3 4 5 6 7 | <p>This is the partial for view 1.</p> <ul> <li ng-repeat="user in users"> {{user.name}} </li> </ul> |
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.
Comments
Post a Comment