继上篇教程中提到的，我们新建一个简单的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文件的更多相关文章
	

    
								
  1. ionic新手教程第八课-（加更）从无到有说Ionic、绘图说明MVC-U-S
		
    这节课的内容,有些前面几节已经说过了. 公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic. 今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,认为还是挺适合零基础的朋友学习的. 有些前 ...
    
		
    2. 
						
  2. ionic新手教程第七课-简要说明几种界面之间的參数传递及优缺点
		
    截至2016年4月13日19点32分,我公布的ionic新手教程,已经公布6课了, 总訪问量将近6000,平均每节课能有1000的訪问量.当中訪客最多的是第三课有2700的訪客. watermark/ ...
    
		
    3. 
						
  3. 开发新手教程【三】Arduino开发工具
		
    Arduino开发环境搭建 获取Arduino IDE开发工具 下载地址 :http://arduino.cc/en/Main/Software 能够下载release 版.Beta版和前期版本号 A ...
    
		
    4. 
						
  4. C#项目中关于多个程序集下App.config文件的问题
		
    在项目中我们会经常用到App.config文件,有的是自动生成的,比如引用webservice.wcf服务时生成:也有手动建立的配置文件直接默认名就为app.config.这些配置有的保存当前程序集用 ...
    
		
    5. 
						
  5. CodeIgniter框架入门教程——第三课 URL及ajax
		
    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...
    
		
    6. 
						
  6. NeHe OpenGL教程 第三课：颜色渲染
		
    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
    
		
    7. 
						
  7. Android OpenGL教程-第三课【转】
		
    第三课 给多边形上色: 作为第二课的扩展,我将叫你如何使用颜色.你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色. 这次增加的代码不算多. 增加一个color的buffer  ...
    
		
    8. 
						
  8. 品味FastDFS~第三回　项目中的FastDFS
		
    回到目录 包括京东,淘宝在内的几个互联网老大,在实现分布式文件存储这块都使用了FastDFS,它是一个轻量级的东西,安装与使用都很方便,服务器间通过socket进行数据通讯,无论在安全和效率上都是可以 ...
    
		
    9. 
						
  9. iOS基础教程：在建好的项目中加入CoreData[转]
		
    这几天在做一个ios的小项目,项目中需要对数据进行基本的增删改查操作.于是就想用一把CoreData.但在创建项目初期,没有包含进CoreData.于是就在已建好的项目中加入CoreData.由于第一 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 三星Galaxy Tab S2上市，压制苹果之心凸显
			
        平板市场正在迎来史上最为关键的一次PK,众所周知,平板市场的苹果和三星一直是行业的领头羊,而在激烈的竞争中.三星平板似乎后劲更足.众多性能优异的产品频频推出.平板之王的称谓呼之欲出. 去年三星 ...
    
			
    2. 
						
  2. vue使用（二）
			
    本节目标:           1.数据路径的三种方式          2.{{}}和v-html的区别 1.绑定图片的路径 方法一:直接写路径 <img src="http://p ...
    
			
    3. 
						
  3. Swiper+ ejs模板引擎+ iScroll插件知识总结
			
    一. Swiper swiper是一个应用于移动端的动画插件,原理类似于轮播图 官网 http://www.swiper.com.cn/# html结构 <div class="swi ...
    
			
    4. 
						
  4. HDU 2473 Junk-Mail Filter 并查集删除(FZU 2155盟国)
			
    http://acm.hdu.edu.cn/showproblem.php?pid=2473 http://acm.fzu.edu.cn/problem.php?pid=2155 题目大意: 编号0~ ...
    
			
    5. 
						
  5. Spring Boot 动态数据源（Spring 注解数据源）
			
    本文实现案例场景:某系统除了需要从自己的主要数据库上读取和管理数据外,还有一部分业务涉及到其他多个数据库,要求可以在任何方法上可以灵活指定具体要操作的数据库. 为了在开发中以最简单的方法使用,本文基于 ...
    
			
    6. 
						
  6. 每日技术总结：flex,选项卡,classList,
			
    1.Flex布局子元素垂直居中 给父元素添加以下样式: .parent { display: flex; align-items: center; } 2.js面向对象的选项卡 见另一篇文章 js面向 ...
    
			
    7. 
						
  7. 10.14 android输入系统_多点触摸驱动测试及Reader线程、InputStage分析
			
    21. 多点触摸_电容屏驱动程序_实践_tiny4412 tiny4412触摸屏: 分辨率为800 x 480http://wiki.friendlyarm.com/wiki/index.php/LC ...
    
			
    8. 
						
  8. axios采坑之路
			
    POST请求设置Content-Type 由于后端采用的是form表单形式上送参数,需要设置Content-Type axios设置如下 const _axios = axios.create(con ...
    
			
    9. 
						
  9. 一位90后程序员的自述：如何从年薪3w到30w！
			
    初入职场之时,大多数人都应该考虑过这样的一个问题,如何找到一种实用,简化web流程的方法,在工作之中能有所提升和突破. 学好哪些?基础必须精通! 九层之塔,起于垒土;千里之行,始于足下.入门之前,这些 ...
    
			
    10. 
						
  10. [Phonegap+Sencha Touch] 移动开发72 List列表横向滑动操作（仿QQ列表滑动删除）
			
    原文链接:http://blog.csdn.net/lovelyelfpop/article/details/50425744 本插件有2个版本号:sencha touch 版本号和 extjs6 m ...
    
			
    11.