.controller('<c:out value="${controllerNameStripped}"/>', ['$scope', '$http',
function($scope, $http) {
var data = $http.get('<c:out value="${relativeResourcePath}"/>.angular.json' + cacheKiller);
// component fragments which consume the contents of `data` go here
请注意 data 变量分配了由Angular返回的承诺 $http.get 方法。 如果需要，此页中包含的每个组件都可以(通过其angular.json.jsp脚本)提供一些.json内容，并在解析时对此请求的内容执行操作。 该请求在移动设备上非常快速，因为它仅访问文件系统。
为了使组件以这种方式成为控制器的一部分，它应该扩展/libs/mobileapps/components/angular/ng-component组件并包含 frameworkType: angular 属性。
template.jsp
首先在body.jsp部分中介绍，template.jsp仅包含页面的parsys。 在发布模式下，将直接引用此内容(位于 <page-path>.template.html)，并通过在$routeProvider上配置的templateUrl加载到SPA中。
此脚本中的parsys可以配置为接受任何类型的组件。 但是，在处理为传统网站(而不是SPA)构建的组件时，必须谨慎。 例如，foundation图像组件仅在顶级应用程序页面上正常运行，因为它并非设计为引用应用程序内的资产。
angular-module-list.js.jsp
此脚本仅输出顶级Angular应用程序模块的Angular依赖关系。 angular-app-module.js.jsp引用了该函数。
将静态内容放在应用程序顶部的脚本。 此内容包含在顶级页面中，不在ng-view的范围内。
将静态内容放置在应用程序底部的脚本。 此内容包含在顶级页面中，不在ng-view的范围内。
js_clientlibs.jsp
覆盖此脚本以包含您的JavaScript clientlibs。
css_clientlibs.jsp
覆盖此脚本以包含您的CSS clientlibs。
应用程序组件
应用程序组件不仅必须在AEM实例（发布或创作）上运行，而且还必须在应用程序内容通过内容同步导出到文件系统时运行。 因此，该组件必须包括以下特性：
必须相对引用PhoneGap应用程序中的所有资产、模板和脚本。
如果AEM实例在创作或发布模式下运行，则链接的处理方式会有所不同。
PhoneGap应用程序中任何给定资产的URI不仅会因平台而异，而且会在应用程序的每次安装中是唯一的。 例如，记下在iOS模拟器中运行的应用程序的以下URI：
file:///Users/userId/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/24BA22ED-7D06-4330-B7EB-F6FC73251CA3/Library/files/www/content/phonegap/geometrixx/apps/ng-geometrixx-outdoors/en/home.html
请注意路径中的GUID '24BA22ED-7D06-4330-B7EB-F6FC73251CA3'。
作为PhoneGap开发人员，您关注的内容位于www目录下方。 要访问应用程序资产，请使用相对路径。
为了解决此问题，PhoneGap应用程序使用单页应用程序(SPA)模式，以便基本URI（不包括哈希）永不更改。 因此，您引用的每个资源、模板或脚本都必须相对于顶级页面。 顶层页通过下列方式初始化Angular路由和控制器： *<name>*.angular-app-module.js 和 *<name>*.angular-app-controllers.js. 此页面应该是距离存储库根目录不扩展sling：redirect的最近页面。
有几种辅助方法可用于处理相对路径：
FrameworkContentExporterUtils.getTopLevelAppResource
FrameworkContentExporterUtils.getRelativePathToRootLevel
FrameworkContentExporterUtils.getPathToAsset
要查看其用法示例，请打开位于/libs/mobileapps/components/angular的mobileapps源。
链接必须使用 ng-click="go('/path')" 函数以支持所有WCM模式。 此函数依赖范围变量的值来正确确定链接操作：
<c:choose><c:when test="${wcmMode}">
<%-- WCMMode is enabled - page is being rendered in AEM --%>
$scope.wcmMode = true;
</c:when><c:otherwise>
<%-- WCMMode is disabled --%>
$scope.wcmMode = false;
</c:otherwise></c:choose>
时间 $scope.wcmMode == true 我们使用常规方式处理每个导航事件，以便结果对URL的路径和/或页面部分进行更改。
或者，如果 $scope.wcmMode == false，则每个导航事件都会导致URL的哈希部分发生变化，该变化由Angular的ngRoute模块在内部解析。
组件脚本详细信息
ng-component.jsp
此脚本在检测到编辑模式时显示组件内容或合适的占位符。
template.jsp
template.jsp脚本渲染组件的标记。 如果相关组件由从AEM提取的JSON数据(例如“ng-text”：/libs/mobileapps/components/angular/ng-text/template.jsp)驱动，则此脚本将负责使用页面的控制器范围公开的数据来连接标记。
但是，性能要求有时要求不执行客户端模板（也称为数据绑定）。 在这种情况下，只需在服务器端渲染组件的标记，并将其包含在页面模板内容中即可。
overhead.jsp
在由JSON数据驱动的组件中(例如“ng-text”：/libs/mobileapps/components/angular/ng-text)，oversay.jsp可用于从template.jsp中删除所有Java代码。 然后，它从template.jsp中引用，并且在请求中公开的任何变量都可供使用。 此策略鼓励将逻辑与表示分离，并限制从现有组件派生新组件时必须复制和粘贴的代码量。
controller.js.jsp
如AEM页面模板中所述，每个组件都可以输出一个JavaScript片段以使用由公开的JSON内容。 data 我保证。 按照Angular约定，控制器只应用于将变量分配给作用域。
angular.json.jsp
此脚本作为片段包含在页面范围的'<page-name>针对每个扩展ng-page的angular导出的.page.json'文件。 在此文件中，组件开发人员可以公开组件所需的任何JSON结构。 在“ng-text”示例中，此结构仅包括组件的文本内容，以及一个指示组件是否包括富文本的标志。
GeometrixxOutdoors应用程序产品组件是一个更复杂的示例(/apps/geometrixx-outdoors-app/components/angular/ng-product?lang=zh-Hans)：
"content-par/ng-product": {
"items": [{
"name": "Cajamara",
"description": "Bike",
"summaryHTML": "",
"price": "$610.00",
"SKU": "eqsmcj",
"numberOfLikes": "0",
"numberOfComments": "0"
"content-par/ng-product/ng-image": {
"items": [{
"hasContent": true,
"imgSrc": "home/products/eq/eqsm/eqsmcj/jcr_content/content-par/ng-product/ng-image.img.jpg/1377771306985.jpg",
"description": "",
"alt": "Cajamara",
"title": "Cajamara",
"hasLink": false,
"linkPath": "",
"attributes": [{
"attributeName": "class",
"attributeValue": "cq-dd-image"
CLI资产下载内容
从“应用程序”控制台下载CLI资产以针对特定平台优化它们，然后使用PhoneGap命令行集成(CLI) API构建应用程序。 保存到本地文件系统的ZIP文件的内容具有以下结构：
.cordova/
|- hooks/
|- after_prepare/
|- before_platform_add/
|- Other Hooks
plugins/
|- config.xml
|- index.html
|- res/
|- etc/
|- apps/
|- content/
|- package.json
|- package-update.json
.cordova
这是一个隐藏目录，根据您当前的操作系统设置，您可能无法看到该目录。 您应该配置操作系统，以便在计划修改其中包含的应用程序挂接时显示此目录。
.cordova/hooks/
此目录包含 CLI挂接. Hooks目录中的文件夹包含node.js脚本，这些脚本在构建期间的确切时间点执行。
after-platform_add目录包含 copy_AMS_Conifg.js 文件。 此脚本可复制配置文件以支持AdobeMobile Services分析的收集。
.cordova/hooks/after-prepare/
after-prepare目录包含 copy_resource_files.js 文件。 此脚本将许多图标和闪屏图像复制到平台特定的位置。
before_platform_add目录包含 install_plugins.js 文件。 此脚本遍历一个Cordova插件标识符列表，从而安装它所检测到的那些尚不可用。
此策略不需要每次Maven时都捆绑插件并将其安装到AEM content-package:install 命令被执行。 将文件签入SCM系统的替代策略需要重复的捆绑和安装活动。
.cordova/挂钩/其他挂钩
根据需要包含其他挂接。 可以使用以下挂接（如Phonegap示例hello world应用程序所提供）：
after_build
before_build
after_compile
before_compile
after_docs
before_docs
after_emulate
before_emulate
after_platform_add
before_platform_add
after_platform_ls
before_platform_ls
after_platform_rm
before_platform_rm
after_plugin_add
before_plugin_add
after_plugin_ls
before_plugin_ls
after_plugin_rm
before_plugin_rm
after_prepare
before_prepare
after_run
before_run
在执行 phonegap run <platform> 命令。 目前， <platform> 可以是 ios 或 android.
在为特定平台构建应用程序后，将会创建相应的目录，并且其中包含特定于平台的应用程序代码。
插件目录由中列出的每个插件填充 .cordova/hooks/before_platform_add/install_plugins.js 文件执行 phonegap run <platform> 命令。 目录最初是空的。
www目录包含实施应用程序外观和行为的所有Web内容(HTML、JS和CSS文件)。 除了下面描述的例外情况之外，此内容源自AEM，并通过Content Sync导出为其静态形式。
www/config.xml
PhoneGap文档(https://docs.phonegap.com)将此文件称为“全局配置文件”。 config.xml包含许多应用程序属性，例如应用程序名称、应用程序“首选项”(例如iOS Webview是否允许过度滚动)以及 仅限 已被PhoneGap Build使用。
config.xml文件是AEM中的静态文件，通过内容同步按原样导出。
www/index.html
index.html文件将重定向到应用程序的起始页。
config.xml文件包含 content 元素：
<content src="content/phonegap/geometrixx/apps/ng-geometrixx-outdoors/en.html" />
在PhoneGap文档中(https://docs.phonegap.com)，此元素被描述为“可选 <content> 元素定义应用程序在顶级web assets目录中的起始页面。 默认值为index.html，通常显示在项目的顶级www目录中。”
如果没有index.html文件，PhoneGap Build将失败。 因此，此文件包含在内。
www/res
res目录包含启动屏幕图像和图标。 此 copy_resource_files.js 脚本会在以下期间将文件复制到其平台特定的位置： after_prepare 构建阶段。
www/etc
按照惯例，在AEM中，/etc节点包含静态clientlib内容。 etc目录包含Topcoat、AngularJS和ng-clientlibsallGeometrixx。
www/apps
apps目录包含与启动页相关的代码。 AEM应用程序启动页的独特特征是，它可以在不进行用户交互的情况下初始化应用程序。 因此，应用程序的clientlib内容（CSS和JS）最小，以最大限度地提高性能。
www/content
内容目录包含应用程序的其余网页内容。 内容可以包括但不限于以下文件：
HTML页面内容，直接在AEM中创作
与AEM组件关联的图像资源
服务器端脚本生成的JavaScript内容
描述页面或组件内容的JSON文件
www/package.json
package.json文件是一个清单文件，该文件列出了 完整 内容同步下载包括。 此文件还包含生成内容同步有效负载的时间戳( lastModified)。 在从AEM请求对应用程序进行部分更新时，将使用此属性。
www/package-update.json
如果此有效负载是整个应用程序的下载，则此清单包含文件的确切列表 package.json.
但是，如果此有效负载是部分更新， package-update.json 仅包含此特定有效负载中包含的文件。
了解了应用程序的解剖后，请参阅 单页应用程序.
