Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suissa/angularjs-redtube
Integração do AngularJS com a API do RedTube
https://github.com/suissa/angularjs-redtube
Last synced: 7 days ago
JSON representation
Integração do AngularJS com a API do RedTube
- Host: GitHub
- URL: https://github.com/suissa/angularjs-redtube
- Owner: suissa
- Created: 2014-09-09T04:46:24.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-08-29T04:00:43.000Z (about 9 years ago)
- Last Synced: 2024-04-10T21:19:03.969Z (7 months ago)
- Language: JavaScript
- Size: 537 KB
- Stars: 42
- Watchers: 6
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#Workshop Be MEAN - $http - exercício
Exercício sobre `$http` do AngularJs no Workshop Be MEAN, porém o código está todo agrupado, vou ensinar nesse repositório como modularizar seu código seguindo o [AngularJs styleguide do John Papa](https://github.com/johnpapa/angularjs-styleguide).
##Instalação
Para clonar o repositório:
> [email protected]:suissa/angularjs-redtube.git
Para instalar:
> cd angularjs-redutube
> npm install -g http-server
> http-server
Para visualizar entre com seu navegador em:
> localhost:8080x
##Problema 1
No arquivo `redtube.js` tem todo o código da nossa aplicação, vamos iniciar separando ele como um módulo e separando seu controller.
###Solução
Separamos o arquivo `redtube.js` em 2:
- modules/redtube/app.js
- modules/redtube/controllers.js
**modules/redtube/app.js**
Nesse arquivo deixamos apenas o módulo principal da nossa aplicação `workshopBeMean` com suas dependências, por enquanto apenas nosso módulo `workshopBeMean.redtube` bem como a definição do mesmo.
```javascript
angular.module('workshopBeMean', ['workshopBeMean.redtube']);
angular.module('workshopBeMean.redtube', []);
```
**modules/redtube/controllers.js**
Aqui nós colocamos toda a lógica do `controller` encapsulada por uma IIFE(Immediately Invoked Function Expression).
Pois no styleguide ele nos diz para encapsular nossos módulos em uma IIFE para não deixar as globais par trás e evitar colisões de nome, principalmente quando seu código é minificado.
```javascript
;(function(){
'use Strict';
angular.module('workshopBeMean.redtube')
.controller('RedtubeController', RedtubeController);
// Injetando as dependencias como o styleguide sugere
RedtubeController.$inject = ['$scope', '$http', '$sce', 'videosService'];
function RedtubeController($scope, $http, $sce, videosService) {
$scope.query = 'Sasha Gray';
$scope.$watch('query', function (data) {
console.log('watch', data);
videosService.search(data)
.success(function (data) {
console.log(data);
$scope.videos = data.videos;
})
.error(function (err){
console.log('Error: ', err);
});
});
$scope.currentVideo = null;
$scope.isModalActive = false;
$scope.videoModal = function (id) {
if (!id) {
$scope.isModalActive = false;
return;
}
var video = "http://embed.redtube.com/player/?id=" + id + "&autostart=true";
$scope.currentVideo = $sce.trustAsResourceUrl(video);
$scope.isModalActive = !$scope.isModalActive;
};
}
}())
```
##Problema 2
Nosso controller possui muitas responsabilidades, como a integração com a API via `$http`.
###Solução
Para separmos as responsabilidades vamos criar um `Service` para gerenciar a integração com a API do Redtube e no Controller apenas o usamos.
Dividimos o arquivo `modules/redtube/controllers.js` em 2:
- modules/redtube/controllers.js
- modules/redtube/services.js
**modules/redtube/services.js**
Aqui nós colocamos toda a camada de comunicação externa da aplicação, também encapsulada por uma IIFE, assim poderemos reaproveitar em outros controllers desse módulo futuramente.
```javascript
(function(){
'use strict';
angular.module('workshopBeMean.redtube')
.service('videosService', videosService);
videosService.$inject = ['$http'];
function videosService($http) {
var url = 'http://cors-server.getup.io/url/api.redtube.com/?data=redtube.Videos.searchVideos&search=';
return {
search : function(term){
return $http.get(url+term);
}
}
}
}());
```
**modules/redtube/controllers.js**
```javascript
(function(){
'use strict';
angular.module('workshopBeMean.redtube')
.controller('RedtubeController', RedtubeController);
// Injetando as dependencias como o styleguide sugere
RedtubeController.$inject = ['$scope', '$http', '$sce', 'videosService'];
function RedtubeController($scope, $http, $sce, videosService) {
$scope.query = 'Sasha Gray';
$scope.$watch('query', function (data) {
console.log('watch', data);
videosService.search(data)
.success(function (data) {
console.log(data);
$scope.videos = data.videos;
})
.error(function (err){
console.log('Error: ', err);
});
});
$scope.currentVideo = null;
$scope.isModalActive = false;
$scope.videoModal = function (id) {
if (!id) {
$scope.isModalActive = false;
return;
}
var video = "http://embed.redtube.com/player/?id=" + id + "&autostart=true";
$scope.currentVideo = $sce.trustAsResourceUrl(video);
$scope.isModalActive = !$scope.isModalActive;
};
}
}());
```
[http://suissacorp.com.br/redtube/](http://suissacorp.com.br/redtube/)