http://www.jianshu.com/p/d94324b722af

背景

  • 用ionic2开发过一两个小功能的朋友都会发现,每新建一个页面都需要在\src\app\app.module.ts中添加页面对应的class
  • 当app页面很多时都会感觉比较乱,分不清哪跟哪.更让人接受不了的是当多人同时开发,经常修改app.module.ts,会经常造成代码冲突
  • 所以我们需要把页面按模块再细分

代码结构

  • 我的app按功能分了4个子模块,分别为contact、home、login和mine.具体代码结构如下图

    按模块划分创建多个子模块

代码详情

  • 如下图,以home.module.ts代码为例,注意不同颜色的标注
  • 新建的子module,记得要添加到总模块中

    home.module.ts

其他

    • 完整代码已上传到github

Ionic2实战——按模块划分app 创建多module的更多相关文章

  1. angularJs项目实战！01：模块划分和目录组织

    近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap ...

  2. 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  3. 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  4. 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  5. 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  6. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  7. 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  8. Android 设计随便说说之简单实践（模块划分）

    上篇随笔随(Android 设计随便说说)便说了一下什么是设计以及设计的原则,这里举一个简单的例子来进一步的说Android设计.我们以应用商店的设计来举例. 在设计之前,需要把握两部分内容,才能使得 ...

  9. 模块划分--MVVM指南（课程学习）

    实现流水化开发,需要使用“模块划分”的程序开发方式.如此,团队里的每个人负责某项\某几项特定的技术领域,在特定的技术领域更加专业.这样,每个人的效率更高.在专业的技能更熟练,更深入,也会提高队员的成就 ...

随机推荐

  1. 【bzoj2480】Spoj3105 Mod

    2480: Spoj3105 Mod Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 557  Solved: 210[Submit][Status][ ...

  2. c# ？和？？

    先看如下代码: string strParam = Request.Params["param"]; if ( strParam== null ) {     strParam= ...

  3. Docker CE部署

    一.概述 Docker 在1.13版本之后,从2017年的3月1日开始,版本命名规则变为如下: 项目 说明 版本格式 YY.MM Stable 每个季度发行 Edge版本 每个月发行 同时Docker ...

  4. ajax+servlet 简易时间效果

    <!DOCTYPE html> <html> <head> <title>index.html</title> <meta name= ...

  5. rtx反向单点登录

    1>通过ie浏览器的activx获取当前登录账户,其它浏览器不行,不支持activx. <%@ Page Language="C#" %> <!DOCTYP ...

  6. Linux 上安装 rlwrap

    1.安装rlwrap的初衷; 2.安装rlwrap工具和遇到的问题; 3.使用rlwrap 工具; 1.安装rlwrap的初衷: 在Windows 下使用SQLPLUS都是可以使用上下左右方向键前后左 ...

  7. Spring框架总结（八）

    二.Cglib代理名词理解: Cglib代理,也叫做子类代理.利用继承关系实现被代理类的功能扩展.缺点:      (1)JDK的动态代理有一个限制,就是使用动态代理的对象必须实现一个或多个接口.  ...

  8. 编写高质量代码改善C#程序的157个建议——建议108：将类型标识为sealed

    建议108:将类型标识为sealed sealed能够阻止类型被其他类型继承.代码如下: sealed class SampleClass { } class OtherClass : SampleC ...

  9. Elasticsearch 5.6.5 安装head插件

    head安装包,下载地址:https://github.com/mobz/elasticsearch-head/archive/master.zip head 插件不能放在elasticsearch- ...

  10. SpringCloud 教程 | 第一篇： 服务的注册与发现Eureka(Finchley版本)

    一.spring cloud简介 鉴于<史上最简单的Spring Cloud教程>很受读者欢迎,再次我特意升级了一下版本,目前支持的版本为Spring Boot版本2.0.3.RELEAS ...