ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件
继上篇教程中提到的,我们新建一个简单的tabs类型的Ionic项目。
依据文件夹文件我们知道,系统自己主动创建了一个controller文件和server文件,而且把全部的控制器和服务都写到这两个文件中面。
这是一个简单的项目,业务逻辑代码也非常少。这样子实现并没有什么问题。可是当我们的项目越写越多。业务逻辑越来越复杂。假设我们还是把全部的控制器写到同一个文件中面。那可能我们将要面对的就是一个有着上万行代码的文件。
每次编辑仅仅能通过搜索keyword来定位了。
所以真正编辑项目的时候我们应该都是把单独的controller分离出来的。本次教程中使用的是requirejs。
首先我们应该先把单独的controller提取出来。保存到单独的文件里。第一步我们先把代码拷贝出来,并不做改动。
先无论报错,我们仅仅是先理解一下,文件分离的内容。
新建两个目录用于存放controller和server文件,便于管理。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
然后我们要做的就是将单独的controller文件和controllers文件关联起来。
首先我们先引用requirejs文件。下载requirejs文件放到项目目录中并在index.html中引用。
然后我们改动controllers/controllers.js文件。使他符合requireJs要求的规范。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
然后分别改动单独的controller文件。让他们也符合规范。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
通过上面的改动,应该不难发现,要把现有的项目完毕文件分离仅仅须要复制代码就能够了,并不须要改动业务逻辑。
接下来我们要做的就是把这些文件关联起来。
改动controllers文件:
这样子我们就完毕了controller文件的分离和关联,可是有些controller文件实用到服务。所以我们也要在controllers文件里关联服务文件。
在controllers文件里增加var services= require('services/services');
相同的做法,改动servers文件,将里面的服务独立出来。
改动后的文件文件夹和services文件例如以下。
这样子我们就实现了controller和server文件的分离。如今我们将项目中的其它文件也改动成requireJs的规范。并使用requireJs的方式来启动项目
改动app.js:(仅仅是多了一层封装返回app对象。里面的业务不做改动)
改动的地方都几乎相同了。接下来跟着我看一下怎样使用require的方法启动Ionic项目。
首先在index文件里引用requireJs的script标签中增加 data-main="js/main.js"属性,表示启动入口的文件地址。
<script data-main="js/main.js" src="js/require.js"> </script>
新建main.js,这里不做具体的配置。仅仅是定义了一个简单的程序入口
说明程序是从bootstrap文件启动的
新建bootstrap.js这里做了一些简单的推断,假设认为不好理解的话,能够直接启动项目angular.bootstrap(document, [app.name]);watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">改动index.html去除ng-app="starter"把<body ng-app="starter">改动成<body>注意由于js文件是通过requestjs载入的,所以要把index中对js的引用去掉<!-- your app's js -->
<!--<script src="js/app.js"></script>-->
<!--<script src="js/controllers/controllers.js"></script>-->
<!--<script src="js/services.js"></script>-->执行项目,正常启动项目,从界面上看不出与新建项目的差别。到此本次教程的内容就所有完毕了。项目Demo地址:http://pan.baidu.com/s/1eSi7huE假设你还有什么其它的问题,能够通过下面方式找到我新浪微博:小虎Oni
微信公众号:ionic__有其它问题的能够关注一下公众号提问(右側双下划线):ionic__watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb25pbF9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件的更多相关文章
- ionic新手教程第八课-(加更)从无到有说Ionic、绘图说明MVC-U-S
这节课的内容,有些前面几节已经说过了. 公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic. 今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,认为还是挺适合零基础的朋友学习的. 有些前 ...
- ionic新手教程第七课-简要说明几种界面之间的參数传递及优缺点
截至2016年4月13日19点32分,我公布的ionic新手教程,已经公布6课了, 总訪问量将近6000,平均每节课能有1000的訪问量.当中訪客最多的是第三课有2700的訪客. watermark/ ...
- 开发新手教程【三】Arduino开发工具
Arduino开发环境搭建 获取Arduino IDE开发工具 下载地址 :http://arduino.cc/en/Main/Software 能够下载release 版.Beta版和前期版本号 A ...
- C#项目中关于多个程序集下App.config文件的问题
在项目中我们会经常用到App.config文件,有的是自动生成的,比如引用webservice.wcf服务时生成:也有手动建立的配置文件直接默认名就为app.config.这些配置有的保存当前程序集用 ...
- CodeIgniter框架入门教程——第三课 URL及ajax
本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...
- NeHe OpenGL教程 第三课:颜色渲染
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Android OpenGL教程-第三课【转】
第三课 给多边形上色: 作为第二课的扩展,我将叫你如何使用颜色.你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色. 这次增加的代码不算多. 增加一个color的buffer ...
- 品味FastDFS~第三回 项目中的FastDFS
回到目录 包括京东,淘宝在内的几个互联网老大,在实现分布式文件存储这块都使用了FastDFS,它是一个轻量级的东西,安装与使用都很方便,服务器间通过socket进行数据通讯,无论在安全和效率上都是可以 ...
- iOS基础教程:在建好的项目中加入CoreData[转]
这几天在做一个ios的小项目,项目中需要对数据进行基本的增删改查操作.于是就想用一把CoreData.但在创建项目初期,没有包含进CoreData.于是就在已建好的项目中加入CoreData.由于第一 ...
随机推荐
- js无缝滚动原理及详解[转自刹那芳华]
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...
- webpack4 多页面,多环境配置,逐行解释
项目需求制作为新的app的分享页,故需要制作多页面应用,那既然app是新的,这边我们也要更新上,经过多方考察(度娘)下,综合了一些他人的优点并结合项目实况产生了此文. 本文为了解释详细,篇幅可能会较长 ...
- node版本升级后,原有项目打不开
node版本升级后,原有项目出现以下问题 gulp[8272]: src\node_contextify.cc:628: Assertion `args[1]->IsString()' fail ...
- angular设置全局变量,可修改监听变量
创建service.module.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { SomeShar ...
- v-for一定要与v-bind:key="id"连用
1. v-for: <div v-for="(item,index) in todolist" v-bind:key="item.id"> < ...
- Eclipse如何从导入SVN上导入项目
1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...
- easy ui 验证
$('#IdentityCertificate').validatebox({required:true}); $('#memberName').validatebox({required:true} ...
- MyBatis学习总结(15)——定制Mybatis自动代码生成的maven插件
==================================================================================================== ...
- 【转】CentOS/RHEL/OracleLinux使用UDEV配置ASMDISK
转自:http://blog.csdn.net/staricqxyz/article/details/8332566 RHEL 5 / CentOS 5 / Oracle Linux 5 [root@ ...
- FTP中的授权规则
在授权规则中,你可以管理自己的FTP站点以怎样的方式进行访问,比如每个进入站点的人都需要输入用户名密码.正则可以在授权规则中删除默认的配置“允许匿名用户读取”的规则. 也可以在此处,对不同的组或用户进 ...