Feed RSS com AngularJS

Developer
Emerson Thompson
Size
3,284 Kb
Views
127,512
  1. Feed RSS com AngularJS Previews
  2. Feed RSS com AngularJS HTML Codes
  3. Feed RSS com AngularJS CSS Codes
  4. Feed RSS com AngularJS JS Codes

How do I make an feed rss com angularjs?

Exemplo simples de como carregar feed's de notícias com AngularJS, com a inserção de um buscador (filtro).. What is a feed rss com angularjs? How do you make a feed rss com angularjs? This script and codes were developed by Emerson Thompson on 09 August 2022, Tuesday.

Feed RSS com AngularJS Previews
IQ Test

Feed RSS com AngularJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Feed RSS com AngularJS</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="RSSFeedApp"> <div class="container-fluid"> <div data-ng-controller="FeedCtrl"> <div class="container"> <h4>Feed RSS com AngularJS</h4> <form> <div class="input-prepend"> <div class="btn-group"> <button class="btn btn-warning" type="button" tabindex="-1" ng-click="loadFeed($event)">{{loadBtnText}}</button> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#" ng-click="feedSrc='http://rss.uol.com.br/feed/economia.xml';loadFeed($event)">UOL Economia</a></li> <li><a href="#" ng-click="feedSrc='http://www.band.uol.com.br/rss/noticias.xml';loadFeed($event)">Band News</a></li> <li><a href="#" ng-click="feedSrc='http://globoesporte.globo.com/servico/semantica/editorias/plantao/feed.rss';loadFeed($event);">Globo Esporte</a></li> <li><a href="#" ng-click="feedSrc='http://www1.caixa.gov.br/rss/asp/geraXML_rss_loterias.asp?canal=TODOSJOGOS&titulo=Todas%20as%20modalidades';loadFeed($event)">Loterias Caixa</a></li> <li><a href="#" ng-click="feedSrc='http://www.mtv.com.br/services/scenic/feeds/get/rss/mgid:hcx:content:mtvmusic-br.com:7e51eca8-4942-4d64-a180-b020d6719b1a/';loadFeed($event)">MTV Brasil</a></li> </ul> </div> <input type="text" class="span6" autocomplete="off" placeholder="URL da Feed" data-ng-model="feedSrc" /> </div> <div class="input-prepend pull-right"> <span class="add-on"><i class=" icon-search"></i></span>contador <input class="span4" type="text" data-ng-model="buscarTexto" placeholder="Buscar Rápida" /> </div> </form> </div> <div class="container"> <ul class="unstyled"> <span class="badge badge-warning" ng-show="feeds.length > 0">{{(feeds | filter:buscarTexto).length}} Itens</span> <li class="item" ng-repeat="feed in feeds | filter:buscarTexto"> <h5><a target="_blank" href="{{feed.link}}">{{feed.title}}</a></h5> <p class="text-left">{{feed.contentSnippet}}</p> <span class="small">{{feed.publishedDate}}</span> </li> </ul> </div> </div> </div>
</body> <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Feed RSS com AngularJS - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
* { font-family:roboto,arial,helvetica;
}
.small { font-size:11px;
}
h4 { font-size: 2em; text-align: center; padding: 10px 0 20px; border-bottom: 1px solid #CCC; margin-bottom: 10px;
}
span.badge { margin-bottom: 10px;
}
li.item { display: table; width: 100%; padding: 8px; background-color: #EFEFEF; margin-bottom: 10px; border-radius: 5px; border-left: 3px solid #EFEFEF; border-right: 3px solid #EFEFEF;
}
li.item:hover { border-color: #f89406; background-color: #EEEEEE;
}
li.item h5, li.item p { padding-top: 0; margin-top: 0;
}

Feed RSS com AngularJS - Script Codes JS Codes

var App = angular.module('RSSFeedApp', []);	App.controller("FeedCtrl", ['$scope','FeedService', function ($scope,Feed) {	$scope.loadBtnText="Carregar";	$scope.loadFeed=function(e){	Feed.parseFeed($scope.feedSrc).then(function(res){	$scope.loadBtnText=angular.element(e.target).text();	$scope.feeds=res.data.responseData.feed.entries; //console.log($scope.feeds);	});	}	}]);	App.factory('FeedService',['$http',function($http){	return {	parseFeed : function(url){	return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(url));	}	}	}]);
Feed RSS com AngularJS - Script Codes
Feed RSS com AngularJS - Script Codes
Home Page Home
Developer Emerson Thompson
Username thompsonemerson
Uploaded August 09, 2022
Rating 3.5
Size 3,284 Kb
Views 127,512
Do you need developer help for Feed RSS com AngularJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emerson Thompson (thompsonemerson) Script Codes
Name
Hello World - Angular 2
A Pen by Emerson Thompson
CardMove
Pagination JSON
Smooth Scrolling - Vanilla
Brazil Map SVG
Hashtag Instagram - AngularJS
Hashtag Instagram - jQuery
Hello World - ReactJS
Custom Audio Player with YouTube API
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!