Heroic Web Applications with AngularJS
- The possibility to extend HTML with your own vocabulary for your application.
- Two-way data binding
- Directives and reusable components
Now, I will explain how to code a sample application with Angular.
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:
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:
The typical Angular application is organised as follows:
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:
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:
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:
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:
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:
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.
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.