webapp框架AngularUI的demo改造之路

首页 > 网络编程 > JavaScript > javascript类库 > AngularJS 更新日期: 2015-07-23
这篇文章主要介绍了webapp框架AngularUI的demo改造之路,需要的朋友可以参考下

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

步骤如下:

按功能表修改demo界面

webapp框架AngularUI的demo改造之路

webapp框架AngularUI的demo改造之路

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

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知道页面加载有两个因素决定:


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
    这篇文章主要介绍了浅析webapp框架AngularUI的demo以及对demo的简单修改,需要的朋友可以参考下angularUI下载地址:https://github.com/Clouda-team/BlendUI 下载解压后,demo在根目录 现在测试官网demo的使用 用浏览器打开mobile-angular-ui-master/demo/index. ...
  • PHP的Yii框架的基本使用示例
    这篇文章主要介绍了PHP的Yii框架的基本使用示例,包括触发JS和添加关联表等操作,需要的朋友可以参考下在 Yii 自动生成的代码里,我们总能在 admin 的界面看到 CGridView 的身影.这是一个很好用的展示数据的表格控件,用的好可以明显地加快开发进度.下面就让我们来探索一下 CGridView 的基本使用吧:      简单起见,我们的代码就用 ...
  • PHP框架性能测试报告
    本文给大家分享的是常见的几款php框架在不同情况下的性能测试报告,给大家在选择框架的时候提供些帮助.作为一个PHP开发者,而且是初创企业团队的技术开发者,选择开发框架是个很艰难的事情. 用ThinkPHP的话,招聘一个刚从培训机构出来的开发者就可以上手了,但是性能和后期代码解耦是个让人头疼的事情.不过很多第三方功能不需要自己写,众多大牛已经给铺好路了. 用L ...
  • 高性能PHP框架Symfony2经典入门教程
    这篇文章主要介绍了高性能PHP框架Symfony2的入门教程,对于学习Symfony2的朋友有很好的学习借鉴价值,需要的朋友可以参考下Symfony2是一个基于PHP语言的Web开发框架,有着开发速度快.性能高等特点.本文以一个程序示例的实现过程详细叙述了Symfony2框架的配置与程序开发. 一.下载 首先是下载Symfony2,到 http://symf ...
  • AJAX技术框架及开发工具
    常见的AJAX框架有:DWR - Web Remoting Buffalo - Web Remoting (based on prototype) prototype - JS OO library openrico - JS UI component (based on prototype) dojo - JS library and UI compone ...
猜你喜欢