当前位置: 首页 > 编程笔记 >

webapp框架AngularUI的demo改造之路

司寇研
2023-03-14
本文向大家介绍webapp框架AngularUI的demo改造之路,包括了webapp框架AngularUI的demo改造之路的使用技巧和注意事项,需要的朋友参考一下

目的:把AngularUI的模板应用到现有项目上

步骤如下:

按功能表修改demo界面

学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段


//当#为/,/scroll等等,请求index.html中<base href=""> + home.html的页面

app.config(function($routeProvider) {

  $routeProvider.when('/',              {templateUrl: 'home.html', reloadOnSearch: false});

  $routeProvider.when('/scroll',        {templateUrl: 'scroll.html', reloadOnSearch: false}); 

  $routeProvider.when('/toggle',        {templateUrl: 'toggle.html', reloadOnSearch: false}); 

  $routeProvider.when('/tabs',          {templateUrl: 'tabs.html', reloadOnSearch: false}); 

  $routeProvider.when('/accordion',     {templateUrl: 'accordion.html', reloadOnSearch: false}); 

  $routeProvider.when('/overlay',       {templateUrl: 'overlay.html', reloadOnSearch: false}); 

  $routeProvider.when('/forms',         {templateUrl: 'forms.html', reloadOnSearch: false});

  $routeProvider.when('/dropdown',      {templateUrl: 'dropdown.html', reloadOnSearch: false});

  $routeProvider.when('/drag',          {templateUrl: 'drag.html', reloadOnSearch: false});

  $routeProvider.when('/carousel',      {templateUrl: 'carousel.html', reloadOnSearch: false});

});

继续阅读demo.js的执行脚本

   拖拽项消失
   拖拽切换图片
   主要控制器

 L195 $rootScope.$on('$routeChangeStart', function(){}); 和 L199 $rootScope.$on('$routeChangeSuccess', function(){});学到 用.$on()来绑定事件和改变hash的事件可以触发这里的代码,对比后,发现两个基本方法一样。不同的一点就是 先触发routeChangeStart, 后触发routeChangeSuccess。
        滚动列表页:滚动栏加载数据 $scope.scrollItems = scrollItems;  scrollItems是一个列表数组;滚动到底部事件(需要做下拉刷新)
        右边聊天侧栏的json数据,显示在线还是不在线,对我来说暂时没有这个能力做聊天功能
         表单页面

改换原来bootstrap模板

1.由上面步骤2知道页面加载有两个因素决定:


1 base路径 => base_url()

2 hash对应的页面路径 => 控制器/方法

3 隐藏index.php

/config/config.php $config['index_page'] = ''; //L29设置为空

.htaccess

RewriteEngine on   

RewriteCond $1 !^(lightapp|lightapp\.php|index\.php|public|robots\.txt)   #允许lightapp|lightapp.php访问

RewriteRule ^(.*)$ /index.php/$1 [L]

config.yaml

- rewrite: if( !is_file() && !is_dir()) goto "index.php?%{QUERY_STRING}"

# 如果 url 既不是文件,也不是目录,跳转至 index.php?%{QUERY_STRING} 不能放在cron后面

4 修改demo.js中菜单路由


2.替换资源路径<?=__PUBLIC__?>,拷贝2个js,3个css文件

3.新建style,script目录,存放项目的js和css

4.拷贝字体目录fonts到public下

5.拷贝home.html,sidebar.html页面到视图目录下

总结:至此,项目的模板就应用了angularUI。

 类似资料:
  • 本文向大家介绍浅析webapp框架AngularUI的demo,包括了浅析webapp框架AngularUI的demo的使用技巧和注意事项,需要的朋友参考一下 angularUI下载地址:https://github.com/Clouda-team/BlendUI 下载解压后,demo在根目录 现在测试官网demo的使用 用浏览器打开mobile-angular-ui-master/demo/in

  • 本文向大家介绍Django框架实现的分页demo示例,包括了Django框架实现的分页demo示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Django框架实现的分页。分享给大家供大家参考,具体如下: 首先初始化model,建表 然后用pycharm的数据库模块可视化插入 分页思路 url传递参数http://127.0.0.1:8000/books/?page=5比如这样传递的参数

  • Angular UI 顾名思义,AngularJS 的UI增强指令集,提供了IE、jQuery 兼容,以及一些常用 UI 组件。 包含的模块有:      UI-Utils     UI-Modules     UI-Alias     UI-Bootstrap     NG-Grid     UI-Router     IDE Plugins     GSoC

  • 本文向大家介绍Ajax 框架之SSM整合框架实现ajax校验,包括了Ajax 框架之SSM整合框架实现ajax校验的使用技巧和注意事项,需要的朋友参考一下 刚学习了ssm框架,ajax校验成功,分享下 1.导入jar包 2.配置spring-servlet.xml 3.控制器中用@ResponseBody实现返回json数据格式 4.页面中接收查询到的结果 实现结果就是以下这样的: 以上所述是小编

  • 发现问题! 假如按照上一讲的制作方法,设定了对话框的话,实际执行游戏时,会是下面的效果: 人物姓名占用了原本对话的第一行位置,并且把对话挤到第二行了。这当然可以通过调整对话框的文字显示范围来修改,但是只做这样的修改的话,名字和对话永远是对齐的,并且距离也是固定的。有没有什么办法作出“姓名和对话分开”的效果呢?答案当然是肯定的,只不过需要一点努力~ 将姓名与对话显示分离 这个修改没有图形界面,不过也

  • 本文向大家介绍学习RxJS之JavaScript框架Cycle.js,包括了学习RxJS之JavaScript框架Cycle.js的使用技巧和注意事项,需要的朋友参考一下 是什么 Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI): 函数式 Cycle.js 把应用程序抽象成一个纯函数 main(),从外部世