zoukankan      html  css  js  c++  java
  • 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按钮。

  • 相关阅读:
    Day 20 初识面向对象
    Day 16 常用模块
    Day 15 正则表达式 re模块
    D14 模块 导入模块 开发目录规范
    Day 13 迭代器,生成器,内置函数
    Day 12 递归,二分算法,推导式,匿名函数
    Day 11 闭包函数.装饰器
    D10 函数(二) 嵌套,命名空间作用域
    D09 函数(一) 返回值,参数
    Day 07 Day08 字符编码与文件处理
  • 原文地址:https://www.cnblogs.com/darrenji/p/5077889.html
Copyright © 2011-2022 走看看