example
explain:
angular js can do ajax, you don't actually need a back end server in order to use angular js $http method, you can use one of your blogger post as a "server". You retrieve the post's html with $http.get("/url") in order to add contents to your current blogger post.
For example, I have a post with url: http://xyzcode.blogspot.com/2018/01/hello.html, in my angular js, I call $http.get("/2018/01/hello.html"). Once getting the html content, I look for pattern "=====you-get-this-for-angular-start=====.*=====you-get-this-for-angular-end=====" in order to find the "server response". Notice, your hello.html post don't have to be located in the same domain as your angular js post.
Random cross domain $http.get without special header (simple request) is allowed by blogger.com, for example with url as http://jcip.net/listings/Sequence.java, we can get the content of that page with angular js ajax in a blogger post. For another example, you can consume public rest services
http://api.oceandrivers.com/v1.0/getWebCams/
The rest service from above returns a json, which can be parsed and used to construct your post's content.
There are numerous public rest services on internet, for example: https://quotes.rest/#!/qod/get_qod, you can use this url to get quote of the day: https://quotes.rest/qod
However random $http.post or request with special header (pre-flight request) is not allowed for security reason. blogger only allow trusted site for $http.post.There are numerous public rest services on internet, for example: https://quotes.rest/#!/qod/get_qod, you can use this url to get quote of the day: https://quotes.rest/qod
source
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("/2018/01/hello.html")
.then(function(response) {
var str = response.data;
var res = str.match(/=====you-get-this-for-angular-start=====.*=====you-get-this-for-angular-end=====/g);
$scope.myWelcome = res;
},
function errorCallback(response) {
$scope.myWelcome = response;
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("/2018/01/hello.html")
.then(function(response) {
var str = response.data;
var res = str.match(/=====you-get-this-for-angular-start=====.*=====you-get-this-for-angular-end=====/g);
$scope.myWelcome = res;
},
function errorCallback(response) {
$scope.myWelcome = response;
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});
</script>
