Skip to content

Commit c0e8e4b

Browse files
zafaralizafarali
committed
demonstrates ngResource
1 parent 6fce6a2 commit c0e8e4b

File tree

2 files changed

+75
-3
lines changed

2 files changed

+75
-3
lines changed

‎08-1-ngResource.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ngResource</title>
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
6+
<script src="https://code.angularjs.org/1.3.0-beta.11/angular-resource.min.js"></script>
7+
<script>
8+
var app = angular.module('citySearchAPP', ['ngResource']);
9+
10+
/*
11+
Here we define the CitySearch Factory which will a $resource for cities in the vicinity.
12+
The first parameter we pass in is the parameterized URL with :version and :action as placeholders
13+
The second parameter is an object 'options' which sets the default values for each parameter
14+
Any parameter not mapped to a ':' value in the url becomes a query value i.e. ?
15+
Since its crossdomain we need to supply a callback, and angularJS handles that for us if we
16+
pass in JSON_CALLBACK.
17+
the thir parameter 'actions' object is where we are overriding the default .get() functionality
18+
to deal with JSONP and non-arrays.
19+
*/
20+
app.factory('CitySearch', ['$resource', function($resource){
21+
return $resource('http://api.meetup.com/:version/:action',
22+
{version:'2', action:'cities', radius:'50', callback:'JSON_CALLBACK'},
23+
{get:{method:'JSONP', isArray:false}});
24+
}]);
25+
26+
27+
/*
28+
Here we have a data object on the scope which has a done and places property.
29+
$resource.get() returns a promise which we utilize below using the $promise property.
30+
By invoking the .then() function we can load data onto the scope and change done to yes.
31+
At this point the data will appear in the browser. All this is wrapped into an update function
32+
that allows us to manipulate using the search queries.
33+
*/
34+
app.controller('citySearchCtrl', ['CitySearch', '$scope', function(CitySearch, $scope){
35+
36+
$scope.results = {done:'no'};
37+
$scope.search = {query:'', radius:'50'};
38+
39+
40+
$scope.update = function(){
41+
42+
$scope.results.done='no';
43+
var citySearchPromise = CitySearch.get(
44+
{query:$scope.search.query,
45+
radius:$scope.search.radius
46+
}).$promise;
47+
48+
citySearchPromise.then(function(response){
49+
$scope.results.places = response.results;
50+
$scope.results.done= 'yes';
51+
});
52+
};
53+
54+
$scope.update();
55+
}]);
56+
57+
</script>
58+
</head>
59+
<body ng-app="citySearchAPP" ng-controller="citySearchCtrl">
60+
This page demonstrates ngResource.
61+
<br/>
62+
<!-- Basic Search box here -->
63+
Type in a place to search: <input type="text" ng-model="search.query">, Radius: <input type="number" ng-model="search.radius"><button ng-click="update()">Search</button>
64+
65+
<!-- Displaying the data using binding and ng-repeat -->
66+
<h1>Done? {{results.done}}</h1>
67+
<div ng-repeat="place in results.places">
68+
<p>{{place.city}}, {{place.country | uppercase}}</p></div>
69+
</body>
70+
</html>

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,9 @@ Notes.update({id:'2'}, "This is amazing!");
514514
```
515515
We can now call `Notes.update({id:id}, data);` after injecting the `Notes` factory into our controller.
516516
This makes our code easier to deal with by only dealing with objects and not with repeated instances of urls. We must note that `$resource` depends on `$http` which will be discussed shortly.
517-
- [ ] Make examples
517+
518+
##### Notes Regarding Cross Domain Requests
519+
You may or may not know that Javascript cannot make AJAX calls to a domain thats not their own. i.e. your website (assuming you don't work for twitter) cannot ping twitter to get tweets. However, there is a method around this known as padding or *JSONP*. (I found out after the video that Twitter no longer offers this API without authentication, Instead I decided to use the [Meetup API for cities](http://www.meetup.com/meetup_api/docs/2/cities/)) . In the example [08-1-ngResource.html](https://github.com/zafarali/learning-angular/blob/master/08-1-ngResource.html) I override the usual GET method of the resource object with the JSONP method which allows me to access the Meetup API and retrieve nearest cities. Note that not all websites provide a JSONP enabled API. The page is made following the tutorial from [egghead.io](https://www.youtube.com/watch?v=IRelx4-ISbs). [Meetup Cities API](http://www.meetup.com/meetup_api/docs/2/cities/). **Read the comments in 08-1-ngResource.html for in depth explanation of what is happening**
518520
519521
### Interesting things to know
520522
Here are a few things I felt like covering to give us a nice break from the very serious factory, provider, module, routing stuff we have been getting into
@@ -538,6 +540,6 @@ scope.$broadcast('myEventName', 'Bye', 'World');
538540
What is the difference between `$emit` and `$broadcast`? As mentioned previously `$emit` propogates the event upwards and all controllers listening for `myEventName` in the parent scopes will be alerted. `$broadcast` does the opposite and propogates the event downwards. Note that both these events will also execute in their own scopes.
539541
540542
#### Providers and Injectors (advanced)
541-
- [ ] To be completed:
542-
#### Providers
543+
- [ ] To be completed:
544+
#### Providers
543545
#### Injectors

0 commit comments

Comments
 (0)