4.2.6.2. One page apps with Angular

Angular simplifies web applications to the degree that some of them (simplest) can be developed as a single page, while using powerful features of AngularJS.

$http.get(url) is the function for reading server data.
Of course, when we send request with a URL to a server, the server must be expecting this URL. Let us assume that we have a web service on a server. This web service expects the URL, such as http://server.com/getAddresses.
Upon this URL web service will access a database and return a list of addresses in a JSON format:

{

"addresses": [

 {

    "street" : "123 Abc ave",

    "City" : "Green",

    "zip" : "54321"

  },



  {

    "street" : "321 Abc ave",

    "City" : "Blue",

    "zip" : "12345"

  }

]

}

AngularJS allows developers not only retrieve this data from the server but also very efficiently visualize this repetitive records in a nice table.
Check this source below:


 







  
    {{ address.street }}    
    {{ address.city }}  
    {{ address.zip }}

The resulting view:
123 Abc ave	Green	54321
321 Abc ave	Blue	12345

Let us add more reality to the previous example.
Our web page will have the Get Data button, which calls our AngularJS function. This function, which we call getData() will send a request to the server by using the function $http.get($scope, $http).
We will use the URL that returns a list of companies with their countries in the JSON format. Our page will display the row JSON message and also a nice table. We add some style to the table, so odd lines will have the yellow background and even lines ? white.

To support the described functionality we provide an HTML file and a controller, which is stored in a library file myControllers.js. (There might be more than one controller, each with its name, in this file.)

Here is the HTML source:













 







JSON data: {{records}}















  # Company Country
  

    {{ $index + 1 }}    
    {{ $index + 1 }}    
    {{ x.Name}}    
    {{ record.Name}}    
     {{x.Country }}     
     {{ record.Country}}

#	Company	Country
{{ $index + 1 }}	{{ $index + 1 }}	{{ x.Name}}	{{ record.Name}}	{{x.Country }}	{{ record.Country}}

Was it clear so far?

And this is the myControllers.js


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

app.controller('myGetExampleCtrl', function($scope, $http) {

	    $scope.getData = function() {

	        var response = $http.get('http://www.w3schools.com/angular/customers_mysql.php');

	        response.success(function(data, status, headers, config) {

	        	$scope.records = data.records;

	        });

	        response.error(function(data, status, headers, config) {

	            alert("Error getting data from the web.");

	        });

	   }

});

It is easy to make an error while preparing JavaScript sources. Use JavaScript Console ? one of the development tools embedded in a browser.
In Google Chrome go to Tools ? More Tools ? JavaScript Console.
This is a very helpful instrument.
AngularJS offers its own error handling. As you can see in the controller source above, getting response from the web can be successful or not. The response object has built-in method response.success() and response.error(), which are extensively used by developers.

Assignments:
1. In the project 4.2.6.Angular add to the html folder the html source above as 4.2.6.angular6.html
2. Add the JavaScript file myControllers.js to the js folder.
3. Start the JavaScript Console in your browser.
4. Use Windows Explorer to navigate to your 4.2.6.angular6.html file in the workspace and open the file.
5. Check JavaScript errors in the console and then press the Get Data button. Make sure that this file works friendly with your JavaScript myControllers.js library.
6. You can also check with the copy of that file deployed as http://itofthefuture.com/BASE/html/4.2.6.angular6.html
7. Read more about Angular in the w3c-school tutorials:
http://www.w3schools.com/angular
8. Focus on the following: Angular forms and validation, Angular Bootstrap and Application.
9. Create two more HTML examples: one with the form and validation and another with Bootstrap and Application features. Add more controllers to the file myControllers.js to support these web pages.
10. 7. Enhance your CLICKER type game with more events. The game is still about your progression (building city or financial gain or traveling around the world). Each click can add score or subtract the score depending on the image/event.
Here is the sample game: http://orteil.dashnet.org/cookieclicker/

11. Email these files (in a zip) to dean@ituniversity.us

{ <br/>"addresses": [ <br/> { <br/> "street" : "123 Abc ave", <br/> "City" : "Green", <br/> "zip" : "54321" <br/> }, <br/> <br/> { <br/> "street" : "321 Abc ave", <br/> "City" : "Blue", <br/> "zip" : "12345" <br/> } <br/>] <br/>}

<br/><div ng-app="myApp" ng-controller="myCtrl"> <br/><table> <br/> <tr ng-repeat="address in addresses"> <br/> <td>{{ address.street }}</td> <br/> <td>{{ address.city }}</td> <br/> <td>{{ address.zip }}</td> <br/> </tr></table></div> <br/><script> <br/>var app = angular.module('myApp', []); <br/>app.controller('myCtrl', function($scope, $http) { <br/> $http.get("http://server.com/getAddresses") <br/> .success(function(response) { <br/> $scope.names = response.addresses;}); <br/>}); <br/></script>

The resulting view:

123 Abc ave

Green

54321

321 Abc ave

Blue

12345

<!DOCTYPE html> <br/><html> <br/><script src="../js/angular.min.js"></script> <br/><script src="../js/myControllers.js"></script> <br/><body> <br/><div ng-app="myApp"> <br/><div ng-controller="myGetExampleCtrl"> <br/> <br/><button ng-click="getData()">Press this button to Get Data</button> <br/> <br/>JSON data: {{records}} <br/> <br/> <br/><table border="2"> <br/> <tr><th>#</th><th>Company</th><th>Country</th> <br/> <tr ng-repeat="record in records | orderBy : 'Country'" > <br/> <td ng-if="$odd" style="background-color:yellow">{{ $index + 1 }}</td> <br/> <td ng-if="$even">{{ $index + 1 }}</td> <br/> <td ng-if="$odd" style="background-color:yellow">{{ x.Name}}</td> <br/> <td ng-if="$even">{{ record.Name}}</td> <br/> <td ng-if="$odd" style="background-color:yellow">{{x.Country }}</td> <br/> <td ng-if="$even">{{ record.Country}}</td> <br/> </tr></table> <br/></div> <br/></body></html>

<br/>var app = angular.module('myApp', []); <br/>app.controller('myGetExampleCtrl', function($scope, $http) { <br/> $scope.getData = function() { <br/> var response = $http.get('http://www.w3schools.com/angular/customers_mysql.php'); <br/> response.success(function(data, status, headers, config) { <br/> $scope.records = data.records; <br/> }); <br/> response.error(function(data, status, headers, config) { <br/> alert("Error getting data from the web."); <br/> }); <br/> } <br/>}); <br/>