AngularJS订阅API服务
本篇使用AngularJS实现订阅某个API服务。
首页大致是：
其中，what's on显示首页内容，Search通过输入关键词调用API服务显示到页面，MyShows显示订阅的内容。
Sarch页界面如下：
通过在搜索框中输入关键词，把查询到信息显示在当前页面，并且可以点击订阅和取消订阅按钮。
My Shows页界面如下：
显示订阅的内容，并且提供取消订阅按钮。
首先，需要了解API提供方所要求的格式。大致是：http://api.themoviedb.org/3/search/tv?api_key=87de9079e74c828116acce677f6f255b&query=Star%20Trek
文件结构：
node_modules/ [通过node下载的module存放于此]
sections/
.....my-shows/
..........my-shows.ctrl.js
..........my-shows.tpl.html
.....search/
..........search.css
..........search.ctrl.js
..........search.tpl.html
.....show/
..........show.ctrl.js
..........show.tpl.html
.....whats-on/
..........whats-on.ctrl.js
..........whats-on.tpl.html
services/
.....show.fct.js [search页需要的查询服务封装在这里]
.....store.fct.js [search需要的操作服务封装在这里]
app.core.js
app.js
app.routes.js [设置路由]
app.services.js
index.html
各个module之间的关系是重中之重，如下：
通过node需要安装的module命令如下：
npm install bootstrap
npm install angular
npm install angular-route
npm install angular-animate
npm i angular-local-storage
index.html
<a href="#/">What's on</a> <a href="#/my-shows">My Shows</a> <a href="#/search">Search</a> <main ng-view=""></main> <!--js引用--> angular.min.js angular-route.min.js angular-animate.min.js angular-local-storage.min.js ui-bootstrap-tpls-0.12.1.min.js app.js app.core.js app.routes.js app.services.js <!--SERVICES--> show.fct.js store.fct.js <!--CONTROLLERS--> my-shows.ctrl.js search.ctrl.js show.ctrl.js whats-on.ctrl.js
app.routes.js
在这里设置路由。
angular.module('app.routes',['ngRoute'])
.config(routes);
function routes($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'sections/whats-on/whats-on.tpl.html',
controller:'WhatsOnController',
controllerAs: 'whatsOn'
})
.when('/my-shows',{
templateUrl: 'sections/my-shows/my-shows.tpl.html',
controller: 'MyShowsController',
controllerAs: 'myShows'
})
.when('/search',{
templateUrl: 'sections/search/search.tpl.html',
controller: 'SearchController',
controllerAs: 'search'
})
.when('/show/:id',{
templateUrl: 'sections/show/show.tpl.html',
controller: 'ShowController',
controllerAs: 'show'
})
.otherwise({
redirectTo: '/'
});
}
show.fct.js
在这里，通过factory的方式返回一个对象,该对象包含查询的方法。
angular .module('app.services') .constant('API_KEY', '87de9079e74c828116acce677f6f255b') .constant('BASE_URL', 'http://api.themoviedb.org/3') .factory('ShowService', dataService); function dataService($http, API_KEY, BASE_URL, $log) { var data = { 'get': get, //使用的时候不带参数 'search': search }; //经$http返回的是一个promise function makeRequest(url, params) { var requestUrl = BASE_URL + '/' + url + '?api_key=' + API_KEY; //遍历查询参数 angular.forEach(params, function (value, key) { requestUrl = requestUrl + '&' + key + '=' + value; }); //发出请求 //$http接受一个对象也是第一次见 return $http({ 'url': requestUrl, 'method': 'GET', 'headers': { 'Content-Type': 'application/json' }, 'cache': true }).then(function (response) { return response.data; }).catch(dataServiceError);//旦凡一个函数作为令一个函数的实参，这两个函数的参赛也进行了传递 } //定义的时候带参数 function get(id) { return makeRequest('tv/' + id, {}); } //查询 function search(query){ return makeRequest("search/tv",{query:query}).then(function(data){ return data.results; }); } function dataServiceError(errorResponse) { $log.error('XHR Failed for ShowService'); $log.error(errorResponse); return errorResponse; } //factory返回的就是一个对象 return data; }
以上，在makeRequest方法中，不仅可以对url进行拼接，还对查询字符串(以对象的形式)进行了拼接。发出请求返回的是promise，即在调用的时候还可以使用then方法。
store.fct.js
这里封装了订阅和取消订阅的操作。
angular .module('app.services') .factory('StoreFactory', dataService); function dataService(localStorageService){ var _shows = []; var ls = localStorageService.get('store'); if(ls !== null){ _shows = ls; } var service = { 'addShow':addShow, 'getShow':getShow, 'getShows':getShows, 'removeShow':removeShow }; //订阅 function addShow(data){ _shows.push(data); save(); } function getShow(id){ var result=false; angular.forEach(_shows, function(show){ if(result===false){ if(show.id===id){ result = show; } } }); return result; } function getShows(){ return _shows; } //取消订阅 function removeShow(id){ var idx=-1; var found=false; angular.forEach(_shows, function(show){ if(found === false){ if(show.id === id){ found=true; } idx++; } }); if(found === true){ _shows.splice(idx, 1); save(); } } //保存到本地 function save(){ localStorageService.set('store',_shows); } return service; }
所以，所谓的订阅就是把获取到的数据保存在某个地方，取消订阅就是把数据从某个地方删除。
search.ctrl.js
angular.module('app.core').controller('SearchController', function (ShowService, $timeout, StoreFactory) {
var vm = this;
vm.results = false;
vm.searching = false;
vm.query = function (query) {
vm.searching = true;
ShowService.search(query).then(function (response) {
vm.results = response;
$timeout(function(){
vm.searching = false;
},500);
}).catch(function (error) {
});
};
//订阅
vm.trackShow=function(show){
StoreFactory.addShow(show);
}
//取消订阅
vm.unTrackShow = function(id){
StoreFactory.removeShow(id);
}
//根据id搜索本地的store，存在就返回true, 不存在就返回false
vm.hasShow = function(id){
return (StoreFactory.getShow(id) !== false);
}
});
search.tpl.html
<input type="text" name="query" ng-model="query"/> <p ng-show="search.searching">Perfoming search...</p> <button ng-click="search.query(query)">Search</button> <ul> <li ng-repeat="show in search.results track by show.id"> ... <div ng-switch="search.hasShow(show.id)"> ... <button ng-switch-when="false" ng-click="search.trackShow(show)">Track Show</button> <button ng-switch-when="true" ng-click="search.unTrackShow(show.id)">UnTrack Show</button> </div> </li> <li class="no-data" ng-if="search.results === false">Find shows to track by using the search bar above.</li> <li class="no-data" ng-if="search.results.length == 0">Your search did not return any results, try again.</li> </ul>
以上，本地存在就显示UnTrack Show按钮，本地不存在就显示Track Show按钮。
