注册
登录
【编者按】本文是Smashing Magazine中《Creating A Complete Web App In Foundation For Apps》一文的简译内容，详细描述了用Foundation For Apps创建完美Web应用“星球大战知识库”的全过程。 Foundation for Apps是Zurb推出的一个新型单页面App框架，与Foundation 5（也称为Foundation for Sites，一个广泛使用的前端框架）密切相关。它围绕AngularJS和弹性网格框架构建而成。它试图让Web应用的开发过程既快速又简单，开发者可以快速开始编写针对应用的独一无二的代码，而非模板文件。 Foundation for Apps于2014年年底发布，尚未被广泛使用，因此有关如何使用这一框架的优质信息源比较少。本文将作为一篇综合指南，对构建一个功能性移动App的全过程进行介绍。文中的技术细节是为客户打造应用程序的基础，本教程也可看作是对AngularJS和单页应用在更广阔范围下如何使用的有力说明。 根据今年后半年即将上映的一部新电影，我们将构建一个“星球大战知识库”。它是一个使用RESTful API、缓存和Foundation for Apps、AngularJS多个特性的响应式Web应用程序。 想要直接跳到干货？
入门指南 快速浏览官方文档，其对设计样式进行了很好解释，但并没有对应用程序功能进行详细说明。将这一卓越的AngularJS文档放在手边，并牢牢记住Foundation for Apps提供了一些标准之外的服务，AngularJS的一些功能可能无法直接使用。同样要注意，AngularJS 和Foundation for Apps与生俱来就不太适用于对SEO有要求的App，因为大部分内容需要通过AJAX加载。 我们的应用程序将从Star Wars API（在SWAPI中）中提取数据。先浏览下SWAPI文档，了解其中的数据和结构。为了简单起见，我们的应用程序将建立在这一结构之上。 首先，我们要安装Foundation for Apps并创建项目。请确保您已经安装了Ruby（OS X已默认安装）和Node.js，然后遵循Foundation for Apps详细文档中的四个步骤。即便你以前没使用过命令行，这个过程也十分简单。当你完成该些步骤后，在浏览器中输入“http://localhost:8080/#!/”，即可看到应用程序的默认主页。 Foundation for Apps的默认主页 （浏览大图） 让我们熟悉一下项目里的文件和文件夹。 应用程序根目录中唯一需要我们注意的文件是gulpfile.js，它向Gulp构建过程发送指令，让其为应用启动服务。Gulp是一个构建系统，与Grunt非常相似。稍后，如果我们想添加一些AngularJS模块或插件时，可以通过JavaScript、CSS文件（引用了这些模块或插件）来更新该Gulp文件。 Cient文件夹里能找到其它我们关注的文件夹：
构建模板和主页面 让我们开始构建吧！index.html页面无法很好地满足实际应用的需要，所以首先修改该页面。我们针对小尺寸屏幕增加了Off-Canvas菜单、切换按钮及漂亮的淡入淡出效果（利用Foundation for Apps中“Motion UI”的类样式实现）。你可以直接从Github repository中index.html文件里复制这些代码。 在_settings.scss文件中添加一些SCSS变量来设置颜色、字体和断点：
现在我们要加点儿料美化一下app.scss。你可以直接参考Github repository中的该文件。 接下来，快速重写默认的home.html文件，该文件在clients/templates/ 目录下，此目录列出了所有要建页面的链接菜单：
|
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
