JQuery Mobile Angular Adapter 技术文档

2024-12-24 09:23:59作者：霍妲思

1. 安装指南

依赖项

在开始安装之前，请确保您的项目中已经包含了以下依赖项：

Angular 1.0.6
jQuery 1.8+
jQuery Mobile 1.3.1 Final

安装步骤

下载适配器文件：
- 您可以从项目的GitHub仓库下载jquery-mobile-angular-adapter.js文件。
- 或者，您可以通过npm安装依赖项：
```
npm install
```
构建适配器：
- 如果您需要自定义构建适配器，可以使用以下命令：
```
./node_modules/.bin/grunt
```
- 如果您希望在文件更改时自动运行测试，可以使用：
```
./node_modules/.bin/grunt dev
```
将适配器文件添加到项目中：
- 将jquery-mobile-angular-adapter.js文件放置在您的项目目录中，并在HTML文件中引用它。

2. 项目的使用说明

基本使用

在您的HTML文件中，确保在引入Angular和jQuery Mobile之后引入适配器文件：

<html ng-app>
<head>
    <title>MobileToys</title>
    <link rel="stylesheet" href="lib/jquery.mobile.css"/>
    <script src="lib/jquery.js"></script>
    <script src="lib/jquery.mobile.js"></script>
    <script src="lib/angular.js"></script>
    <script src="lib/jquery-mobile-angular-adapter.js"></script>
</head>
<body>
    ... 您的页面内容 ...
</body>
</html>

使用RequireJS

如果您使用RequireJS，可以按照以下步骤配置：

创建一个index.xhtml文件：

<html ng-app>
<head>
    <title>MobileToys</title>
    <link rel="stylesheet" href="lib/jquery.mobile.css"/>
    <script src="lib/requirejs.js" data-main="main.js"/>
</head>
<body>
   ... 您的jqm页面 ...
</body>
</html>

创建一个main.js文件：

require.config({
  shim:{
    'angular':{ deps:['jquery'], exports:'angular'}
  }
});
function tryHoldReady() {
  if (!tryHoldReady.executed && window.jQuery) {
    window.jQuery.holdReady(true);
    tryHoldReady.executed = true;
  }
}
tryHoldReady();
require.onResourceLoad = tryHoldReady;
require([
  "jquery",
  "jquery-mobile-angular-adapter",
  ... // 您的控制器、Angular模块等
], function (jquery) {
  jquery.holdReady(false);
});

3. 项目API使用文档

路由与导航

适配器集成了Angular路由与jQuery Mobile的导航功能。以下是一些关键点：

HTML5模式：适配器默认启用$locationProvider.html5Mode(true)，并设置$locationProvider.hashPrefix('!')。
默认路由：如果没有定义路由，适配器将使用jQuery Mobile的默认URL处理方式。
自定义路由选项：您可以在路由中设置jqmOptions属性，直接传递给$.mobile.changePage。
激活回调：可以在路由中设置onActivate属性，该属性将在页面显示之前在作用域中执行。