A Pen by Sten Hougaard.

AngularJS-making-AJAX-request-using-$resource.markdown

AngularJS making AJAX request using $resource

AngularJS has a module which handles requests using AJAX. In this pen I request data from a Dynamicweb CMS based website.

A Pen by Sten Hougaard on CodePen.

License.

index.html

<div class="jumbotron">
	<div class="container">
		<h2 class="col-md-12">AngularJS making <code>AJAX</code> request using <code>$resource</code></h2>
		<blockquote class="col-md-5">AngularJS has a module "<a href="http://docs.angularjs.org/api/ngResource">ngResource</a>" which handles AJAX <em>requests</em>. In this pen I request <code>JSON</code> data from a <a href="http://www.dynamicweb-cms.com/" target="_blank">Dynamicweb CMS</a> based website and use them in the <code>model</code>.</blockquote>
    <blockquote class="col-md-7">The data can be edited in the backend of the CMS and used on any external website as I add a <code>http header</code> using <code>C#</code> based <code>Razor</code> template: <code>response.AddHeader("Access-Control-Allow-Origin","*")</code></blockquote>
  </div> </div>
<div class="container" ng-app="myApp" ng-controller="Example">
  <div class="row">
    <h3>Recent CodePens RSS - fetched using <a href="http://www.dynamicweb-cms.com/" target="_blank">Dynamicweb CMS</a> and served as JSON to this AngularJS pen</h3>
    <div class="media col-md-3" ng-repeat="rss in content.content.main.ParagraphModule" ng-show="rss.RSSItemtitle">
  <div class="media-body col-md-12">
    <h4 class="media-heading">{{rss.RSSItemtitle}}</h4>
        <em>Author: {{rss.RSSItemAuthor}}</em>
<small ng-bind-html="rss.RSSItemdescription"></small>

  </div>
</div>
  </div>
</div>

script.js

window.onerror = function() {
console.log(arguments);
};
angular.module("myApp",["ngResource", "ngSanitize"])
.controller("Example", function($scope, $resource) {
  var DWPage = $resource("http://sho.1stweb-dev.net/da-DK/JSON.aspx", {}, 
    {
        query: {method:'GET',responseMethod:"JSON"}
    }).query(function() {
     $scope.content = DWPage;
  });
  $scope.clicked = 0;
  $scope.click = function() {
    if ($scope.firstClick==="")     $scope.firstClick = new Date(); 
    $scope.clicked++;
  };
});  

style.css

.media .media-body {
  padding: 8px 6px;
  border-radius: 8px 20px 20px 0px;
  min-height: 300px;
  background-color: rgba(235,191,98,.5);
}
.media h4 {
  height: 3em;
}
.media:nth-child(2n) {
  background-color: transparent;
}
.media-body small {
  font-size: 10pt;
}
.media-body small img {
  display: none;
}

.media-body small p:nth-child(2) a {
 display: inline;
}