浅析webapp框架AngularUI的demo


Posted in Javascript onDecember 21, 2014

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="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>

    <script src="//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"

    >

    <!-- Sidebars -->

    <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">

      <!-- Navbars -->

      <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>

      <!-- App Body -->

      <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><!-- ~ .app -->

    <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在回来解决此问题。

浅析webapp框架AngularUI的demo

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

Javascript 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
AngularJS基础知识
Dec 21 #Javascript
javascript关于继承的用法汇总
Dec 20 #Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 #Javascript
jQuery的text()方法用法分析
Dec 20 #Javascript
jQuery中click事件的定义和用法
Dec 20 #Javascript
javascript中String对象的slice()方法分析
Dec 20 #Javascript
javascript中Number对象的toString()方法分析
Dec 20 #Javascript
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
使用TensorFlow实现SVM
2018/09/06 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
基于Python fminunc 的替代方法
2020/02/29 Python
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
销售简历自我评价
2014/01/24 职场文书
毕业论文评语大全
2014/04/29 职场文书
环保倡议书300字
2014/05/15 职场文书
团员个人年度总结
2015/02/26 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
湘江北去观后感
2015/06/15 职场文书
复活读书笔记
2015/06/29 职场文书
换届选举主持词
2015/07/03 职场文书