浅析webapp框架AngularUI的demo

2024-11-05 04:24:51

angularUI下载地址：https://github.com/Clouda-team/BlendUI

下载解压后，demo在根目录

现在测试官网demo的使用

用浏览器打开mobile-angular-ui-master/demo/index.html,发现没加载样式或者js。然后，审查元素后，发现加载的路径不对，于是进行了以下修改

第5行：<base href="/mobile-angular-ui-master/" />
去掉所有/网站根目录路径，改为相对路径
demo.js和demo.css在demo目录下<script src="demo/demo.js"></script>，<link rel="stylesheet" href="demo/demo.css" />
第30,34行：<div ng-include="'demo/sidebar.html'" ，<div ng-include="'demo/sidebarRight.html'"
修改后的index.html

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="/mobile-angular-ui-master/" />
    <title>Mobile Angular UI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="dist/css/mobile-angular-ui-hover.css" />
    <link rel="stylesheet" href="dist/css/mobile-angular-ui-base.css" />
    <link rel="stylesheet" href="dist/css/mobile-angular-ui-desktop.css" />
    <link rel="stylesheet" href="demo/demo.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-touch.min.js"></script>
    <script src="dist/js/mobile-angular-ui.js"></script>
    <script src="demo/demo.js"></script>
</head>
<body
    ng-app="MobileAngularUiExamples"
    ng-controller="MainController"
    >
    
    <div ng-include="'demo/sidebar.html'"
            ui-track-as-search-param='true'
            class="sidebar sidebar-left"></div>
    <div ng-include="'demo/sidebarRight.html'"
            class="sidebar sidebar-right"></div>
    <div class="app">
      
      <div class="navbar navbar-app navbar-absolute-top">
        <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
          Mobile Angular UI
        </div>
        <div class="btn-group pull-left">
          <div ui-toggle="sidebarLeft" class="btn sidebar-toggle">
            <i class="fa fa-bars"></i> 菜单
          </div>
        </div>
        <div class="btn-group pull-right" ui-yield-to="navbarAction">
          <div ui-toggle="sidebarRight" class="btn">
            <i class="fa fa-comment"></i> Chat
          </div>
        </div>
      </div>
      <div class="navbar navbar-app navbar-absolute-bottom">
        <div class="btn-group justified">
          <a href="http://mobileangularui.com/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Docs</a>
          <a href="https://github.com/mcasimir/mobile-angular-ui" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> Sources</a>
          <a href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
        </div>
      </div>
      
      <div class="app-body" ng-class="{loading: loading}">
        <div ng-show="loading" class="app-content-loading">
          <i class="fa fa-spinner fa-spin loading-spinner"></i>
        </div>
        <div class="app-content">
          <ng-view></ng-view>
        </div>
      </div>
    </div>
    <div ui-yield-to="modals"></div>
    <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
       ga('create', 'UA-48036416-1', 'mobileangularui.com');
       ga('send', 'pageview');
     </script>
</body>
</html>

此时问题还是存在,发现home.html没加载成功
http://gdzx.com/mobile-angular-ui-master/home.html，目录应该是在demo下的，查看源码找不到home.html在哪里引入，猜想是用angular加载进来的，待学习angularUI在回来解决此问题。

今天(2014/12/20)终于做好了，把整个项目放到网站根目录，然后访问demo/index.html就可以正常加载所有css样式和js脚本

使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

PC 移动端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 惯性助动,滑动回弹门面模式复制代码代码如下: window.onload = function() { /*测试数据*/ var insert = ''; for (var i = 0; i < 80; i++) { insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '
java异步上传图片示例

复制代码代码如下: final File imageFile = new File(getCacheDir().getPath() + "/img/" + p.image); image.setVisibility(View.GONE); view.findViewById(R.id.imageLoading).setVisibility(View.VISIBLE); (new AsyncTask<Void, Void, Bitmap>() { @Override
java基于servlet的文件异步上传

在这里使用了基于servlet的文件异步上传,好了废话不多说,直接上代码了... package com.future.zfs.util; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.s
移动端WebApp隐藏地址栏的方法

1.很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊. 复制代码代码如下: <meta name="apple-mobile-web-app-capable" content="yes" /> 2.我们可以通过另一种方法来隐藏地址栏.在页面加载完成之后滚动窗口,这个确实有效,唯一要注意的是页面高度必须够高,核心代码如下: 复制代码代码如下: <script type="text/javascript"&
Java中FTPClient上传中文目录、中文文件名乱码问题解决方法

问题描述: 使用org.apache.commons.net.ftp.FTPClient创建中文目录.上传中文文件名时,目录名及文件名中的中文显示为"??". 原因: FTP协议里面,规定文件名编码为iso-8859-1,所以目录名或文件名需要转码. 解决方案: 1.将中文的目录或文件名转为iso-8859-1编码的字符.参考代码: 复制代码代码如下: String name="目录名或文件名"; name=new String(name.getBytes(&qu
webapp框架AngularUI的demo改造之路

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

本文实例讲述了java中struts2实现文件上传下载功能实现方法.分享给大家供大家参考.具体分析如下: 1.文件上传首先是jsp页面的代码在jsp页面中定义一个上传标签复制代码代码如下: <tr> <td align="right" bgcolor="#F5F8F9"><b>附件:</b></td> <td bgcolor="#FFFFFF">
JavaWeb实现文件上传下载功能实例详解

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 文件上传概述 1.文件上传的作用例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2.文件上传对页面的要求上传文件的要求比较多,需要记一下: 必须使用表单,而不能是超链接表单的method必须是POST,而不能是GET 表单的enctype必须是multipart/form-data 在表单中添加file表单字段,即<input ty
java webApp异步上传图片实现代码

如何实现java webApp异步上传图片,先了解以下几个问题: 1.图片上传: 2.图片上传预览: 3.上传图片更改地址异步添加到数据库: 主要内容本示例主要采用纯HTML前端和JavaScript代码作工具,查询有关demo其实现图片上传的代码范例如下: (1)点击上传图片的div代码: <div id="div1" class="photo"> <input type="file" id="choose&quo
简述Java异步上传文件的三种方式

本文为大家分享了三种Java异步上传文件方式,供大家参考,具体内容如下用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使当前页面跳转,感觉就像是异步操

浅析webapp框架AngularUI的demo

相关推荐

随机推荐