基于豆瓣API+Angular开发的web App

一、扯淡的说

name:【豆瓣搜索】

最近关注了下豆瓣的API,发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口。最近在用phantom弄些爬虫,想想,真是美丽极了!有个豆瓣的接口,我都不用去爬数据,不用数据存储,丢给github page直接完事。豆瓣,Nice!最近也在看angular,于是就萌生了使用Angular + 豆瓣API 做一个web app。于是...网上回家就折腾了。

体验地址:http://vczero.github.io/t/html/index.html#/

项目地址:https://github.com/vczero/search (欢迎大家fork,任意修改,继续增加功能;欢迎拍砖,一起进步。)

二、直接上图

(1)图书搜索

(2)音乐搜索界面

(3)图书详情

(4)电影搜索

三、项目结构和简介

三、几个注意点

(1)-webkit-tap-highlight-color:rgba(255,255,255,0);去除点击时的高亮阴影

(2)box-sizing:border-box的使用,包含padding的像素计算

(3)position fixed 和 搜索跳转的结合(虚拟键盘引起)

(4)angular-ui-router的多视图控制

(5)ios & android系统的各种细节

(6)压缩angularjs代码依赖注入的问题

...

我觉得比较重要的服务和状态路由的代码贴出来

代码如下:

/*服务的URL配置*/
app.constant('ServiceConfig', {
    book_search: 'https://api.douban.com/v2/book/search',
    book_search_id: 'https://api.douban.com/v2/book/',
    music_search: 'https://api.douban.com/v2/music/search',
    music_search_id: 'https://api.douban.com/v2/music/',
    movie_search: 'https://api.douban.com/v2/movie/search',
    movie_search_id: 'https://api.douban.com/v2/movie/subject/'
});
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
    /*URL路由*/
    $urlRouterProvider.otherwise("/");
    /*状态配置*/
    $stateProvider
        //首页
        .state('index',{
            url: '/',
            views:{
                header:{
                    templateUrl: '../html/views/list_header.html',
                    controller: 'SearchController'
                },
                container:{
                    templateUrl: '../html/views/list_book.html',
                    controller: 'BookListController'
                },
                footer:{
                    templateUrl: '../html/views/list_footer.html',
                    controller: ''
                }
            }
        })
        //book list
        .state('book_list',{
            url: '/book',
            views:{
                header:{
                    templateUrl: '../html/views/list_header.html',
                    controller: 'SearchController'
                },
                container:{
                    templateUrl: '../html/views/list_book.html',
                    controller: 'BookListController'
                },
                footer:{
                    templateUrl: '../html/views/list_footer.html',
                    controller: ''
                }
            }
        })
        // book detail
        .state('book_detail',{
            url: '/book/:id',
            views:{
                header:{
                    templateUrl: '../html/views/list_header.html',
                    controller: 'SearchController'
                },
                container:{
                    templateUrl: '../html/views/detail_book.html',
                    controller: 'BookDetailController'
                },
                footer:{
                    templateUrl: '../html/views/list_footer.html',
                    controller: ''
                }
            }
        })
        // music list
        .state('music_lsit',{
            url: '/music',
            views:{
                header:{
                    templateUrl: '../html/views/list_header.html',
                    controller: 'SearchController'
                },
                container:{
                    templateUrl: '../html/views/list_music.html',
                    controller: 'musicListController'
                },
                footer:{
                    templateUrl: '../html/views/list_footer.html',
                    controller: ''
                }
            }
        })
        // movie list
        .state('movie_lsit',{
            url: '/movie',
            views:{
                header:{
                    templateUrl: '../html/views/list_header.html',
                    controller: 'SearchController'
                },
                container:{
                    templateUrl: '../html/views/list_movie.html',
                    controller: 'movieListController'
                },
                footer:{
                    templateUrl: '../html/views/list_footer.html',
                    controller: ''
                }
            }
        })
        .state('search',{
            url: '/search/:type',
            views:{
                header:{
                    templateUrl: '../html/views/search.html',
                    controller: 'Search'
                },
                container:{
                    templateUrl: '',
                    controller: ''
                },
                footer:{
                    templateUrl: '',
                    controller: ''
                }
            }
        });
}]);

(0)

相关推荐

  • AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

    一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包括用户角色.发表微博.共享位置等等.这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案.当然,开发Node.js的体会越来越深刻.记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更方便的维护.当时特别想把一个Node服务做的特别强大.现在看来leader的做法是对的,我更加倾向于把n

  • angularjs实现与服务器交互分享

    真正的应用需要和真实的服务器进行交互,移动应用和新兴的Chrome桌面应用可能是个例外,但是对于此外的所有应用来说,无论你是想把数据持久化到云端,还是需要与其他用户进行实时交互,都需要让应用与服务器进行交互. 为了实现这一点,Angular提供了一个叫做$http的服务.它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易.它支持HTTP.JSONP和CORS方式.它还包含了安全性支持,避免JSON格式的脆弱性和XSRF.它让你可以轻松地转换请求和响应数据,甚至还实现了简单的缓存. 例如

  • AngularJS入门教程(零):引导程序

    我们现在开始准备编写AngularJS应用--phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: 复制代码 代码如下: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: 复制代码 代码

  • 教你用AngularJS框架一行JS代码实现控件验证效果

    如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能变为可用状态 通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码.UI样式这里采用的是Bootstrap.先上示例代码: HTML. <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp&qu

  • angularjs指令中的compile与link函数详解

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建

  • webapp框架AngularUI的demo改造之路

    目的:把AngularUI的模板应用到现有项目上 步骤如下: 按功能表修改demo界面 学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段 复制代码 代码如下: //当#为/,/scroll等等,请求index.html中<base href=""> + home.html的页面 app.config(function($routeProvider) {   $routeProvider.when('/',        

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

  • 浅析webapp框架AngularUI的demo

    angularUI下载地址:https://github.com/Clouda-team/BlendUI 下载解压后,demo在根目录 现在测试官网demo的使用 用浏览器打开mobile-angular-ui-master/demo/index.html,发现没加载样式或者js.然后,审查元素后,发现加载的路径不对,于是进行了以下修改 第5行:<base href="/mobile-angular-ui-master/" /> 去掉所有/网站根目录路径,改为相对路径 de

  • 基于豆瓣API+Angular开发的web App

    一.扯淡的说 name:[豆瓣搜索] 最近关注了下豆瓣的API,发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口.最近在用phantom弄些爬虫,想想,真是美丽极了!有个豆瓣的接口,我都不用去爬数据,不用数据存储,丢给github page直接完事.豆瓣,Nice!最近也在看angular,于是就萌生了使用Angular + 豆瓣API 做一个web app.于是...网上回家就折腾了. 体验地址:http://vczero.github.io/t/h

  • H5混合开发手机Web App入门:概念篇

    如果你开始学习手机 App 开发,就一定会听到 H5 这个词.它是目前的主流开发技术之一,容易上手,开发周期短.成本低.兼容传统 Web 开发.但是,很少有文章详细介绍,H5 到底是什么技术,有什么原理,跟其他技术的差异在哪里. 一.H5 的含义 表面上看,手机 App 都是同样的东西,就是手机上的应用程序,点击图标就能运行,但是它们的底层技术不一样.按照开发技术,App 可以分成三大类. 原生应用(native application,简称 native App) Web 应用(web app

  • JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建

    本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具来配置的环境.下方内容主要包括了JDK1.8的安装.JavaEE版本的Eclipse的安装.Maven的安装.Tomcat 9.0的配置.Eclipse上的M2Eclipse插件以及STS插件的安装.当然本篇博客是在Mac OS X下完成的.当然本篇所涉及的工具都有Windows版的,而且Eclip

  • 详解基于vue的移动web app页面缓存解决方案

    现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的

  • Python Web App开发Dockerfiles编写示例

    目录 TL;DR 内容 1. 简单的 Dockerfile 样例 2. 使用 Gunicorn 实现热更新 3. 运行一个单文件 python 脚本 4. 部署静态文件 5. 生产环境中的直接构建 6. 生产环境中的多级构建 原文地址:How to write Dockerfiles for Python Web Apps 原文作者:Praveen Durairaj 译文出自:https://github.com/xitu/gold-miner 本文永久链接:https://github.com

  • 浅谈使用 PHP 进行手机 APP 开发(API 接口开发)

    一.先简单回答两个问题: 1.PHP 可以开发客户端? 答:可以,因为PHP是脚本语言,是负责完成 B/S架构 或 C/S架构 的S部分,即:主要用于服务端的开发.但是,PHP可不仅仅只能在互联网站上发展,一个PHP for Android(PFA)站点表示他们将可以发布编程模型.工具盒文档让PHP在Android上实现应用.该项目的主要赞助商是开源公司IronTec,PFA使用Scripting Layer for Android (SL4A),也就是Androd Scripting Envi

  • Chrome Web App开发小结

    前言 这篇文章主要分享下自己在开发Web App遇到的问题和过程,以及一些很已经(如何)填平的坑.如果您想要"如何开发Web App"或<30分钟学会开发Web App>,请移步官方的开发手册(文档).(下有链接). 背景 感觉现在大家都在争论(讨论)两件事情,Web App和Native App.前不久参加的HTML5守望者活动,各方大佬都在针对这二者之间的优劣,差异,兼容,普及等进行探讨.当然,有争议的才说明有价值嘛. Chrome Web App 前不久Chrome又

  • 使用jQuery Mobile框架开发移动端Web App的入门教程

    一.jQuery Mobile 的渐进增强设计与浏览器支持 根据维基百科( Wikipedia ) 的解释,渐进增强的设计主要包括以下几点 basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容) basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能) sparse, semantic markup

  • Android开发使用WebView打造web app示例代码

    目录 前言 代码如下 前言 博主最近想做一款app,因为内容已经有了,故想到了使用WebView来做 ,现将代码贴出如下,供有同样需求的人参考,少走弯路 代码如下 public class MainActivity extends Activity{ private WebView webview; private Handler handler; private ProgressDialog pd; @Override public void onCreate(Bundle savedInst

  • 手机Web APP如何实现分享多平台功能

    话说App一般都带有分享到社交平台的入口,web网页的分享也有很不错的框架,但是随着HTML5的不断发展,手机web页面越来越多的进入到我们的生活中,那如何在我们的手机上完成分享呢?话说各大分享平台都有针对Android.Ios的SDK,作为开发者,我们只需要将SDK集成的我们的项目中即可,通过提供的外部接口,我们可以很容易的完成分享的功能:web网页呢,网上也存在很多优秀的分享框架,例如:bShare分享 .JiaThis分享:我们可以很方便的集成到我们的项目中:但是手机web页面实现分享就需

随机推荐