exhibitsjs:博物馆展览在AngularJs中的应用

  • M5_528371
    了解作者
  • 532.2KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 04:27
    上传日期
博物馆展览馆建设者应用程序 该项目使新手Web开发人员可以轻松地创建以单页JavaScript应用程序实现的复杂的博物馆展览亭。 创建新展览的人员必须能够将其内容大纲转换为JSON模板,创建基本的html文件(通常仅需要段落标签),最后调整图像大小并将其复制到图像目录中。 该应用程序使用此信息来构建单页应用程序。 对于新手来说,这项工作是对网络工作原理的简要介绍。 该应用程序使用 Web框架构建,并支持Web浏览器和移动设备以及触摸屏信息亭。 此版本的应用程序仅提供一个展览模板。 可以使用Angular.js路由,自定义指令和样式来定义备用展览模板。 应用程式基础要求 该项目使用 。 要使用展览生成器应用,您需要在系统上安装以下软件。 要求 :使用NodeJS网站上提供的安装程序。 :将安装程序用于您的操作系统。 Windows用户也可以尝试 。 :将安装程序用于您的操作系
exhibitsjs-master.zip
内容介绍
# Museum Exhibit Builder App This project makes it easy for novice web developers to create sophisticated museum exhibit kiosks implemented as single page JavaScript applications. The person creating a new exhibit must be able to translate their content outline into a JSON template, create basic html files (that typically require only paragraph tags), and finally resize and copy images into an image directory. The application uses this information to build an <a href="https://angularjs.org/" rel='nofollow' onclick='return false;'>Angular.js</a> single page application. For novices, this work is a brief introduction to how the web works. The application is built using the<a href="http://foundation.zurb.com/apps/" rel='nofollow' onclick='return false;'> Foundation for Apps</a> web framework and supports web browsers and mobile devices as well as touchscreen kiosks. This version of the application provides only one exhibit template. Alternate exhibit templates can be defined using Angular.js routes, custom directives, and styling. ## Foundation for Apps Requirements The project uses <a href="http://foundation.zurb.com/apps/" rel='nofollow' onclick='return false;'>Foundation for Apps</a>. To use the exhibit builder app, you'll need the following installed on your system. ### Requirements * [Node.js](http://nodejs.org): Use the installer provided on the NodeJS website. * [Git](http://git-scm.com/downloads): Use the installer for your OS. * Windows users can also try [Git for Windows](http://git-for-windows.github.io/). * [Ruby](https://www.ruby-lang.org/en/): Use the installer for your OS. For Windows users, [JRuby](http://jruby.org/) is a popular alternative. * With Ruby installed, run `gem install bundler sass`. * [Gulp](http://gulpjs.com/) and [Bower](http://bower.io): Run `[sudo] npm install -g gulp bower` ## Install the Exhibit Builder Clone or copy the contents of this repository to your system. Change into the project's base directory. Then install the project dependencies by executing the following commands: * npm install * bower install Once this is done, you can launch the sample exhibit typing `gulp` on the command line. This will build the project and start the development server. To view the sample exhibit, point your web browser to: `http://localhost:8080/#!/` ## Building your own Exhibit You will find exhibit folders here: * `client/assets/layout/exhibit.json` * `client/assets/images/*` * `client/assets/html/*` These directories currently contain the assets used by the sample exhibit. You will be modifying the directory content to create your own exhibit. The `exhibit.json` file provides your exhibit structure. It's an array of top-level navigation sections that can in turn contain an array of second-level navigation sections. Top-level and second-level sections define page content. Here's the basic structure: <pre>section \_ page data \_ secondary navigation \_ section \_ page data</pre> The exhibit currently supports 3 kinds of page data: * images with captions * html * slick carousel for multi-image documents, etc. For details, see the sample `exhibit.json` file. ## Deploying your Exhibit When you are ready to publish your exhibit, just copy the contents of the `build` directory to your web server. ## Advanced Customization The applications `index.html` page includes Google font downloads and some simple header content that can be customized per exhibit. All the tools for creating additional Angular.js templates, components, controllers and directives are available. Rather than overwrite existing templates, it's recommended that you use Angular.js routing to define and create your own templates. Exhibit styles are defined in the `scss` directory. Use the settings and create your own styles and mixin's here. The contents of the scss directory will be compiled into your exhibit css. For more information, see: * <a href="http://foundation.zurb.com/apps/docs/#!/" rel='nofollow' onclick='return false;'>Foundation for Apps documentation</a> * <a href="https://docs.angularjs.org/guide" rel='nofollow' onclick='return false;'>Angular.js developer guide</a> * <a href="https://docs.angularjs.org/api" rel='nofollow' onclick='return false;'>Angular.js API reference</a>
评论
    相关推荐