美文网首页ionic2实战
ionic2实战-按模块划分app,创建多module

ionic2实战-按模块划分app,创建多module

作者: 昵称已被使用_ | 来源:发表于2017-01-15 17:57 被阅读4248次

2017年4月28日修复bug

  • 如下图两张图的位置,分别是修改前和修改后
  • 此bug在ios真机上会导致按钮、checkbox等被点击多次,有几个子module就会触发几次.所以只保留主module(app.module.ts)上的forRoot(MyApp)
    修改前
修改后

背景

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

代码结构

  • 我的app按功能分了4个子模块,分别为contacthomeloginmine.具体代码结构如下图
    按模块划分创建多个子模块

代码详情

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


    home.module.ts

其他

  • 完整代码已上传到github

由于ionic版本更新较快,有些写法可能改变来不及更新简书,请以github代码为准

  • ionic3出了一个IonicPage很实用,不用导入每个页面到总module中了.还可以做延迟加载

相关文章

网友评论

  • 差不多先生_2517:LZ,是不是ionic g page xxxpage 然后 将这个page移动到相应模块下,好比如你的: register页面在login模块中,然后 ionic g page register 创建好后,移动到login下?
  • 李大鱼_:我也用了你这个方法,很方便。但是现在有一个问题,因为子模块没有module.ts,无法使用IonicPageModule.forChild(),请问该怎么解决?
  • coffice:点击事件多次触发还会出现,即使子module里面没有forRoot()静态方法
    昵称已被使用_:我这里测试没问题了
  • ac025df10d24:哥们,我也在学习ionic 3,最近也用到模块化并且是使用AOT,最近遇到了个问题,不知道哥们你有没遇到过。
    Unexpected module 'ContactModule in /Users/kevin/Documents/Demo/module_demo/src/pages/contact/contact.module.ts' declared by the module 'AppModule in /Users/kevin/Documents/Demo/module_demo/src/app/app.module.ts'. Please add a @Pipe/@Directive/@Component annotation.
    ac025df10d24:哥们,欢迎加微信或QQ,大家一起学习ionic 和 angular,我的QQ和微信同号:993301724
  • b955a1abc506:楼主请问做了懒加载但是打包后vendor.js文件过大,怎么筛选去除没用的插件呢
  • 喻_8a59:军哥,你这个demo是没有实现懒加载的对吧??
    喻_8a59:军哥,麻烦帮我看看我发你消息的那个问题怎么解决
  • 阡陌不言:请问大牛 是怎么做到我clone你项目的时候直接npm install 在@ionic-native也有那些依赖库的?
  • 阡陌不言:你好,我更新了之前下载的你的项目,然后把所有的错误解决之后,跑在模拟器上,一直停留在启动页起不来,请问这会是哪里的问题,在浏览器上运行是好的
  • 893942df0738:LZ,我用你的方式将app分了几个模块,但是有个问题,自定义的directive,我在其中的一个模块中使用正常,
    import { HighlightDirective } from '../../directive/highlight.directive';

    @NgModule({
    declarations: [
    Login,
    HighlightDirective
    ],
    })
    export class LoginModule {}
    但是在另外的一个子模块中再次引用的时候就会报错:Type HighlightDirective is part of the declarations of 2 modules: LoginModule and HomeModule! Please consider moving HighlightDirective to a higher module that imports LoginModule and HomeModule. You can also create a new NgModule that exports and includes HighlightDirective then import that NgModule in LoginModule and HomeModule.,然后我将这2个模块的引用去掉了,在app.module.ts中引用了directive:
    import { HighlightDirective } from '../directive/highlight.directive';
    @NgModule({
    declarations: [
    MyApp,
    HighlightDirective
    ]
    ...
    })
    export class AppModule {}
    还是报错,Unhandled Promise rejection: Template parse errors:
    Can't bind to 'myHighlight' since it isn't a known property of 'p'.

    请教下LZ,我这个该怎么引用?
    昵称已被使用_:自定义的指令应该要在每个使用的模块中引用.我这里说了共享模块的引用http://www.jianshu.com/p/8cf299555370
  • 2956b61d85ec:ionPageModule.forChild() 能利用这个吗
    李大鱼_:@待花谢花开 请问使用这种模块划分,子模块怎么使用懒加载?你解决了吗
    待花谢花开:@龘_99f3 这个不用考虑模块问题,你这已经是3引入的模块懒加载了
    昵称已被使用_: 这个forChild没见过,也没用过.哪里有资源?
  • lixinfeng:目前也开始学习这个,看你LZ的模块划分,确实受益很多
    昵称已被使用_:修复了一个bug请查看博文
  • iplaycodex:按照LZ的做法分了模块,现在看起来好多了.敢写分享
    昵称已被使用_:修复了一个bug请查看博文
  • Zim:如果我有一个echart组件是几个模块都需要用到的,怎么定义或者怎么导入,在没有分模块之前只需要在app.module.ts的declarations中加入,现在不知道怎么加,求指导
    昵称已被使用_:@Zim app上用echart我也没用过,不过我大概知道怎么用
    方式一:
    在index.html引用echarts.min.js,
    然后在ts文件顶部声明一个全局echarts变量,declare var echarts;
    最后就可以使用 echarts.init初始化图表了
    方式二:
    使用命令 typings search echarts 搜索echarts
    然后按http://www.jianshu.com/p/a14b438db0a0这里介绍的方法尝试.

本文标题:ionic2实战-按模块划分app,创建多module

本文链接:https://www.haomeiwen.com/subject/hutubttx.html