How easy is Angular JS
First, I'd strongy suggest to read this completely. Try out all of the samples there. I started there and I swear that it will be a great read for you too. When you have tried out all the samples and you feel more confident, you will itch to come with something more than what's in the sample, may be a simple SPA (Single Page application).I wanted to come up with a variety of applications on AngularJS. And immediately I felt like a burst in my head and wanted to do gazillion things at the same time. I wrote them down and narrowed my choice to 2.
- Tweet search
- Weather Report
I tried to kick-on with Tweet search but was stymied by some API issues and soon gave up (for now). Then I started on the weather application, my intention was to get a SPA and I am not going to be stopped by Twitter issues. With absolutely no formatting and just consuming the raw JSON response, I did not take anything more than 30 - 40 mins. And I think that's good enough on any technology.
Right into the business
A lot of examples out there will have the controller JS in the HTML itself. That's alright as long as the controller is simple, but for people who have real-world experience that's a NO-NO. So I started with creating a simple controller and called it "WeatherController".weatherApp.js
var twitterApp = angular.module('WeatherApp', ['ngResource']);
function WeatherAppController($scope, $http) {
$scope.title='Get weather information';
$scope.data = 'unknown';
requestParams = {
'q': 'Columbus,usa'
};
$http.jsonp('http://api.openweathermap.org/data/2.5/weather?callback=JSON_CALLBACK', {params:requestParams}).success(function(data) {
$scope.data = data;
console.log('Main: ' + data.weather[0].main);
console.log('Description: ' + data.weather[0].description);
})
.error(function(data, status, headers, config) {
$scope.data = data;
$scope.error = true;
$scope.status = status;
$scope.headers = headers;
$status.config = config;
console.log('Ahhhhhhh, failed with error');
});
}
Now that we have a basic controller, our next step is to get the HTML piece and display some data.
WeatherApp.html
<html ng-app="WeatherApp">
<head>
<title>Weather Report</title>
<script type="text/javascript" src="../lib/angular/angular.min.js"></script>
<script type="text/javascript" src="../lib/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="./js/twitterAppController.js"></script>
</head>
<body>
<div ng-controller="WeatherAppController">
<p>
<h2>{{ title }}</h2>
</p>
<div>
<p>
<h3>Location information</h3>
Longitude: {{ data.coord.lon }}, Latitude: {{ data.coord.lat }}
</p>
<p>
<h3>Weather information</h3>
Mostly: <i> {{ data.weather[0].main }}</i><br />
{{ data.weather[0].description }}
</p>
<p>
<h3>Temprature information (yet to be decrypted)</h3>
<table>
<tr>
<td>Current</td>
<td>{{ data.main.temp }}</td>
</tr>
<tr>
<td>Pressure</td>
<td>{{ data.main.pressure }}</td>
</tr>
<tr>
<td>Minimum Temprature</td>
<td>{{ data.main.temp_min }}</td>
</tr>
<tr>
<td>Maximum temprature</td>
<td>{{ data.main.temp_max }}</td>
</tr>
<tr>
<td>Humidity</td>
<td>{{ data.main.humidity }}</td>
</tr>
<tr>
<td>Wind Speed</td>
<td>{{ data.wind.speed }}</td>
</tr>
</table>
</p>
</div>
</div>
</body>
</html>
Questions
There are couple of things you may have noticed in thisWhy Am I hard-coding the array values for weather 'data.weather[0].main'
That's a temporary code and in the subsequent examples we will get rid of it when we use 'ng-repeat'
What's the Twitter bug I am talking about
Oh yeah, welcome to the complicated world. We need to talk a lot about errors and error handling. That's in my next post!!!
