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

然后我们要做的就是将单独的controller文件和controllers文件关联起来。

首先我们先引用requirejs文件。下载requirejs文件放到项目目录中并在index.html中引用。

然后我们改动controllers/controllers.js文件。使他符合requireJs要求的规范。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

然后分别改动单独的controller文件。让他们也符合规范。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

通过上面的改动,应该不难发现,要把现有的项目完毕文件分离仅仅须要复制代码就能够了,并不须要改动业务逻辑。

接下来我们要做的就是把这些文件关联起来。

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

				
时间: 2024-11-25 14:32:16

ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件的相关文章

ionic新手教程第七课-简要说明几种界面之间的參数传递及优缺点

截至2016年4月13日19点32分,我公布的ionic新手教程,已经公布6课了, 总訪问量将近6000,平均每节课能有1000的訪问量.当中訪客最多的是第三课有2700的訪客. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 事实上我開始的时候计划的挺好的,就依照我这阶段的安排,慢慢的带大家做一个

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

发了十篇教程,现在向我问问题的朋友越来越少了.可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方. 开始有人叫我说直接防类似饿了吗,折八百这样的网站,做一个Demo. 其实我也知道有些朋友就想要这种网上的免费劳动力. 但是其实这个建议还是不错的. 等我把现在这个demo讲完,我可能会考虑找一个成熟的上线的项目进行说明. 这个列表页一说,写完这个的朋友就可以尝试着接手项目了. 我不是说ionic简单,内容少. 我只是说我这些时间里面提到的

OSG for Android新手教程系列(二)——项目配置

在上一篇教程中,主要介绍了如何把OSG源代码编译成为能够在Android项目下使用的函数库.在这一篇教程中,我将针对如何在自己的Android项目中配置OSG函数库进行详细讲解. 现阶段网上关于OSGfor Android的配置方式教程有很多,但是大部分在实际使用起来都会或多或少的出现一些问题,无法完全照搬,需要一定的修改.而且,对于配置中的那些变量的具体含义,也很少有人能够进行仔细的讲解.这非常不利于新手的学习和理解,往往会造成出现bug后面对满屏幕的错误log完全一脸茫然的情况. 所以我将在

NeHe OpenGL教程 第三课:颜色渲染

转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. 第三课:颜色渲染 添加颜色: 作为第二课的扩展,我将叫你如何使用颜色.你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色. 上一课中我教给您三角形和四边形的绘制方法.这一课我将教您给三角形和四边形添加2种不同类型的着色方法.使用F

[译文]JOAL教程 第三课 多声源播放

[译文]JOAL教程 原文地址:http://jogamp.org/joal-demos/www/devmaster/lesson3.html 原文作者:Athomas Goldberg 译文:三向板砖 转载请保留以上信息. 本节对应的连续代码页及学习笔记:http://blog.csdn.net/shuzhe66/article/details/40260861 第三课 多声源 本文是DevMaster.net(http://devmaster.net/)的OpenAL教程对应的JOAL版本.

将IDEA maven项目中src源代码下的xml等资源文件编译进classes文件夹

如题,IDEA的maven项目中,默认源代码目录下的xml等资源文件并不会在编译的时候一块打包进classes文件夹,而是直接舍弃掉. 如果使用的是Eclipse,Eclipse的src目录下的xml等资源文件在编译的时候会自动打包进输出到classes文件夹.hibernate和spring有时会将配置文件放置在src目录下,编译后要一块打包进classes文件夹,所以存在着需要将xml等资源文件放置在源代码目录下的需求. 解决IDEA的这个问题有两种方式. 第一种是建立src/main/re

在asp.net core的项目中通过log4net添加日志记录到本地文件

=============================================== 2020/2/25_第1次修改                       ccb_warlock =============================================== 由于之前的时间都忙于项目的业务开发,对于log4net的使用一直是“拿来主义”,仅仅用在了调试时输出到控制台看结果,而没有深究配置文件的参数和具体的机制. 正巧这段时间项目进度没有那么紧张,我也有时间来完善框

Unity shader教程-第三课:实践!同一个shader,多个material。

本文首发地址:http://98jy.net/article/18 更多更及时的文章请关于98教育 这节课我们开始利用我们学到的Properties知识来改动代码,用一个shader实现如下图的几个不同的球体: 步骤: 使用MonoDevelop打开shader文件 保证Properties里面是如下内容 _EmissiveColor ("Emissive Color", Color) = (1, 1, 1, 1) _AmbientColor ("Ambient Color&

Spring 新手教程(三) 注入和自己主动装配

     Spring注入是指在启动Spring容器载入bean配置的时候.对类变量的赋值. 两种经常使用注入方式:设值注入和构造注入 以下就这部分知识看代码以及代码中的注解: 1.首先看Spring 配置文件(怎样载入,怎么測试,<入门系列(一)>有说明.这里不再赘述) <?xml version="1.0" encoding="UTF-8"? > <beans xmlns="http://www.springframewo