AngularJS Tutorial - 3, Refactor

New version Angular 9

Refactoring and routing

In this part we will refactor the application. And add the detail template.

Screenshot

Download

The source for this part is here: 03_routeanderrors.zip.

The samples can be run with Firefox, in general or by running, into the directory,

If you have Python 2.x: python -m SimpleHTTPServer 8000
If you have Python 3.x: python -m http.server 8000
If you have Perl:
- cpan HTTP::Server::Brick # install dependency
- perl -MHTTP::Server::Brick -e '$s=HTTP::Server::Brick->new(port=>8000); $s->mount("/"=>{path=>"."}); $s->start'
If you are under windows: "C:\Program Files (x86)\IIS Express\iisexpress.exe" /path:%CD% /port:8000

Refactoring

Rename the main module from customerModule to "app"
We will first move the main module declaration into the "app/app.js" file and will include it
into the html.
We will then move the CustomersController into the "app/customers/module.js" file and will include it
into the html and remove the ng-controller attribute
We will associate a new module called "customersModule" to the "CustomersController"
Now the "app" must add a dependency from customerModule to the app, and the ngRoute too
that will be used for the routing engine.

	var app = angular.module('app',['customersModule','ngRoute']);

We will move then the the controller div into the "app/customers/list.html" file.
This will become a "template" in the main page it will be replaced by:

	<div ng-view></div>

At this point -NOTHING WILL WORK- anymore!!

Routing

AngularJS uses an internal routing system based on what follows the hash symbol.
Each Angular address is associated with a route and a controller

The default route

Into the app.js file we will add the default route using the special "config"
function. This function is run before the the controllers.

Note that the standard address would be "list" for which will be loaded the
customers list template and will be associated the CustomersController.

In case no route is found (the otherwise) the user will be redirected to "list"

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/customers/', {
        templateUrl: 'app/customers/list.html',
        controller: 'CustomersController'
      }).
      otherwise({
        redirectTo: '/customers/'
      });
  }]);

At this point when reloading the page... everything will work :)

Going on the detail page

First we will create the route ,added after the first route.
The special ":customerId" means that the second part of the url will be stored
somewhere as customerId.

		when('/customers/:customerId', {
			templateUrl: 'app/customers/detail.html',
			controller: 'CustomerDetailController'
		}).

Now goes the controller, that will use (yes another..) service, $routeParams.
The route params service contains the parameters declared inside the route!
So we could have access to the customerId!

Note that the customer data is initialized as an object.

customers.controller('CustomerDetailController',['$scope','$http','$routeParams',
	function($scope,$http,$routeParams){
		$scope.customer = {};
		
		$http.get('/customers/'+$routeParams.customerId).
			success(function(data, status, headers, config) {
				$scope.customer=data;
			});
}]);

The new template will be pretty simple. Note the ng-model that sets the variable
on the scope.

<a href="#customers">Back to list</a><br>
<table>
<tr><td><label for="id">Id </label></td><td>{{customer.id}}</td></tr>
<tr><td><label for="first_name">First Name </label></td><td>{{customer.first_name}}</td></tr>
<tr><td><label for="last_name">Last Name </label></td><td>{{customer.last_name}}</td></tr>
</table>

Connecting all together

Now we should link the list page to the single item. To do this we will add on the
list the reference, we will make the id linkable.
Note the hash inside the href.

	<td><a href="#customers/{{customer.id}}">{{customer.id}}</a></td>

On the top of the detail we will add a link back to the list

	<a href="#customers">Back to list</a>

Another missing part is the automatic loading of the list.
Inside the list controller, at the end of the initialization we will add the call
to load data

customers.controller('CustomersController',['$scope','$http',function($scope,$http){
	$scope.customers = [];
	
	$scope.loadData = function(url){
		$http.get('/customers').
		success(function(data, status, headers, config) {
			$scope.customers=data;
		});
	}
	$scope.loadData();
}]);