GitHub - ryouaki/Mobile-Module-Js: This is a Demo for Cordova front side and Nodejs server side.You can work base on it and create your mobile application solution quickly.

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.settings		.settings
Demo		Demo
Docs		Docs
Lib/mmodulejs		Lib/mmodulejs
.project		.project
README		README

Repository files navigation

If you want to run the Demo app on IOS or Android 

You need launch this command line first

$ cordova platform add ios android

-------------------------EN-----------------------------------------------
This js lib is used to create a modular hybrid quickly.

And there is a simple demo on the folder named Demo,You can also read the API Reference from Docs

This is a simple introduction for how to use mmoduleJs on your project below:

The first we need import jquery into your project,And then add the code like below on your main html file.
<head>
...
<script src="lib/jquery/jquery.js"></script>
<script src="lib/mmodulejs/mmodulejs.js"></script>
...
</head>
<body>
...
<script type="text/javascript" src="js/moduleConfig.js"></script>
<!--moduleConfig.js you can assign another name-->
</body>

The moduleConfig.js like this:

moduleJs.init({
  mainDiv : "main-panel",   // This is the id of entry div ,we need display your template html here
  modules: {
    moduleLoginView : {     // Module name
      name : "moduleLoginView" ,   // Controller name,Must the same as module name.
      controller : "js/controllers/loginController.js", // The path of controller js file
      view : "templates/login.html"  // The path of template html file
    },
    ......
  }
});

When we want to display a html on you app,You need invoke this api 
moduleJs.showView(moduleName,{ paramName:paramData});
EX.
moduleJs.showView('moduleLoginView',{title:'Mobile-Module-JS Demo'});

·How to create a custom plugin
refer/Demo/ClientSide/customPlugin Folder structure and create package.json&plugin.xml
package.json
{
  "name": "custom-plugin",  // plugin name
  "version": "0.0.1",       
  "description": "Custom plugin",   //
  "cordova": {
    "id": "custom-plugin",  // id
    "platforms": [          // platform
      "ios"
    ]
  },
  "repository": {           // url
    
  },
  "keywords": [             // 
  ],
  "author": "Ryouaki(46517115@qq.com)"  // 
}

plugin.xml
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
           id="custom-plugin"
      version="0.0.1">
    <name>custom-plugin</name>
    <description>Cordova Custom Plugin</description>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="customPlugin">
                <param name="ios-package" value="CDVCustomPlugin" />
                <param name="onload" value="true" />
            </feature>
        </config-file>
        <header-file src="src/ios/CDVCustomPlugin.h" />
        <source-file src="src/ios/CDVCustomPlugin.m" />
    </platform>
    <info>
        This plugin is used for demo how to create a custom plugin
    </info>
</plugin>

*Notes that we need better copy this two files(package.json&plugin.xml) from other apache plugin
and create this two files base on it.
src/
    ios/
        CDVCustomPlugin.h
        CDVCustomPlugin.m
        
And then run this command line:
cordova plugin add ../customPlugin 

-------------------------CN-----------------------------------------------
Demo程序是基于Bootstrap+mmodulejs的一个模块化Hybrid app。

主要用于演示如何使用mmodulejs完成一个模块化的移动端app。

mmodulejs需要依赖于jquery。所以需要和jquery配合使用。首先你需要包含如下代码在你的程序首页
<head>
...
<script src="lib/jquery/jquery.js"></script>
<script src="lib/mmodulejs/mmodulejs.js"></script>
...
</head>
<body>
...
<script type="text/javascript" src="js/moduleConfig.js"></script>
<!--moduleConfig.js你可以使用任意你喜欢的名字-->
</body>

moduleConfig.js内容如下

moduleJs.init({
  mainDiv : "main-panel",   // 此item用于指定你界面的主div。所有子页面都是在此div显示。
  modules: {
    moduleLoginView : {     // 此为module名，必须与下面name相同与对应*Controller.js中的第一个参数相同
      name : "moduleLoginView" ,   // controller类名
      controller : "js/controllers/loginController.js", // controller模块执行代码块,不需要在html界面单独引入
      view : "templates/login.html"  // 用于显示的html模板
    },
    ......
  }
});

当我们要显示某一个界面的时候我们只需要执行如下js语句
moduleJs.showView(模块名,参数);
EX.
moduleJs.showView('moduleLoginView',{title:'Mobile-Module-JS Demo'});

·如何创建自定义plugin
参照/Demo/ClientSide/customPlugin的目录结构创建文件夹并创建package.json和plugin.xml
package.json
{
  "name": "custom-plugin",  // plugin名称
  "version": "0.0.1",       // 版本号
  "description": "Custom plugin",   // 描述
  "cordova": {
    "id": "custom-plugin",  // id
    "platforms": [          // platform
      "ios"
    ]
  },
  "repository": {           // url
    
  },
  "keywords": [             // 搜索关键词
  ],
  "author": "Ryouaki(46517115@qq.com)"  // 作者信息
}

plugin.xml
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
           id="custom-plugin"
      version="0.0.1">
    <name>custom-plugin</name>
    <description>Cordova Custom Plugin</description>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="customPlugin">
                <param name="ios-package" value="CDVCustomPlugin" />
                <param name="onload" value="true" />
            </feature>
        </config-file>
        <header-file src="src/ios/CDVCustomPlugin.h" />
        <source-file src="src/ios/CDVCustomPlugin.m" />
    </platform>
    <info>
        This plugin is used for demo how to create a custom plugin
    </info>
</plugin>

*关于package.json&plugin.xml我个人建议是从已经安装的apache的plugin拷贝过来修改
src/
    ios/
        CDVCustomPlugin.h
        CDVCustomPlugin.m

然后到工程目录执行cordova命令:
cordova plugin add ../customPlugin 

----------------------------Update history------------------------------------
Ver 20151223 : Upload all source code and docs
Ver 20151228 : Add custom Plugin 

----------------------------Plan----------------------------------------------

----------------------------Contact-------------------------------------------
email :46517115@qq.com
qq    :46517115
wechat:lianghui086343