{"id":21972051,"url":"https://github.com/icfnext/ionic-aem-apps","last_synced_at":"2025-04-28T12:23:25.165Z","repository":{"id":33465041,"uuid":"37110603","full_name":"icfnext/ionic-aem-apps","owner":"icfnext","description":"A Library enabling the creation of Ionic based single-page applications using the AEM Apps product","archived":false,"fork":false,"pushed_at":"2017-05-08T13:09:24.000Z","size":1111,"stargazers_count":4,"open_issues_count":1,"forks_count":3,"subscribers_count":22,"default_branch":"develop","last_synced_at":"2025-03-30T09:31:34.774Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icfnext.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-09T04:39:47.000Z","updated_at":"2019-01-23T21:30:45.000Z","dependencies_parsed_at":"2022-09-14T22:53:14.484Z","dependency_job_id":null,"html_url":"https://github.com/icfnext/ionic-aem-apps","commit_stats":null,"previous_names":["citytechinc/ionic-aem-apps"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icfnext%2Fionic-aem-apps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icfnext%2Fionic-aem-apps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icfnext%2Fionic-aem-apps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icfnext%2Fionic-aem-apps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icfnext","download_url":"https://codeload.github.com/icfnext/ionic-aem-apps/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311838,"owners_count":21569106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T15:01:16.380Z","updated_at":"2025-04-28T12:23:25.148Z","avatar_url":"https://github.com/icfnext.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic AEM Apps\n\nA library supporting the construction of Hybrid mobile applications using AEM Apps and the Ionic Framework.\n\n## Overview\n\nAEM Apps (now known as the Cordova aspect of AEM Mobile) is a module of AEM which can be used to create authorable \nexperiences which present as native mobile applications. These applications leverage the Cordova framework \nand as such are colloquially referred to as Hybrid applications.\n\nTo learn more about Cordova visit [https://cordova.apache.org/](https://cordova.apache.org/)\n \n### Ionic\n\nThis library enforces the use of the Ionic Framework.  This framework wraps Cordova providing a suite of build and test \ntools.  Ionic is also built on Angular, extending many of its common development idioms bringing them in line with the \nexpectations of a mobile application.  Numerous widgets, transition effects, and touch behaviors are provided by \nIonic to make your Cordova application feel as close to a true native application as possible. \n \nTo learn more about Ionic visit [http://ionicframework.com/](http://ionicframework.com/) \n\n## Content Structure\n\nThe Ionic AEM Apps library translates a page tree created via standard AEM authoring tools into a State tree.  In the \ncontext of this document the word \"State\" refers to application states as defined by the \n[Angular UI Router](https://github.com/angular-ui/ui-router).   \n\n## Page Types\n\nThe various page types defined by the application map to Cordova application idioms as defined by the Ionic Framework \nor by Cordova itself.  \n\n### Application Root \n\nThe Application Root, implemented by the `sling:resourceType` `ionic-aem-apps/components/page/application-root`, \nis responsible for the initialization of the Angular application as a whole.  Sightly scripts are written to handle \nthe production of the application module javascript based on the content structure under the root and hooks are provided \nfor the addition of application initialization code germane to an application using this framework.  The Application Root \nis never rendered to the end user but *must* be the parent of all Application States. \n\n#### Application Level Configuration and Run Functionality\n\nA jsp hook, `angular-app-module-suffix.jsp` is provided off of the Application Root resource type.  This is an ideal \nplace to code application level configurations and run mechanisms (ie, code which would normally be placed in the \n`.config` and `.run` calls off an Angular application's principal module).  To do so, first reference the module under \nconfiguration and call config and run methods as necessary.  \n\n```\nangular.module( 'applicationName' )\n    .config( function( provider ) {\n        ...\n    } )\n    .run( function( service ) {\n        ...\n    } );\n```\n\nThis code will be included immediately after the generated application level state configuration.\n\n### Application State\n\nA page created using the `sling:resourceType` `ionic-aem-apps/components/page/application-state` or any of its child \ntypes represent a State as defined by the [UI Router](https://github.com/angular-ui/ui-router/wiki).  When the application \nmodule is defined and configured the state pages which are direct or indirect children of the Application Root make up\nthe states defined through the `$stateProvider`.  \n\n#### Abstract States\n\nStates as defined by the UI Router may be abstract.  Abstract states define a frame into which child states may be \ndefined but are not visited directly.  An example of usage would be the establishment of an abstract state to house a \ncommon header bar and/or footer bar.  For child states to be injected into the framing provided by an abstract state, \nthe abstract state must contain an instance of the `ionic-aem-apps/components/content/ionnavview` component. \nSee the documentation for the Angular UI Router for more details on the usage of abstract states.\n\n#### Slug States\n\nSlug states may be leveraged in instances where the path to a state needs to provide information concerning the \nresource needs of the state.  Using the Angular UI Router a path to a state may be defined using any number of \nslugs.  For example, in the path `/root/speakers/:speakerId`, `:speakerId` is a slug which will be replaced in a true \npath by an actual speaker ID.  A request made to `/root/speakers/194898939` will resolve to the state identified \nby the path `/root/speakers/:speakerId`.  After this, the actual speaker ID can be extracted by controllers using the \n`$stateParams` service.  See the documentation for the Angular UI Router for more details on the usage of slug states.\n\n#### Structural States\n\nStructural States are states which exist solely to provide structure to the URL of the state and do not affect the \nstates rendering.  These might be used in cases where content needs to be aranged to allow both for slug states and \nstandard states in a reasonable content structure.  Structural States would never be presented to an end user and \ndo not exist as actual application states in the Angular application.\n\n#### Specifying Parent State\n\nThe Application Page Properties for Application States expose a Parent State selection input.  The options available \nas selections are all ancestors of the current state up to the Application Root.  Setting this property overrides the \ndefault state inheritance writen to the `$stateProvider` configuration which is to treat a child page as a child state \nof its direct non-structural parent.  Usage of this mechanism can be useful in situations where semantic page structures \nwould otherwise be precluded by the state content injection entailed by state hierarchy.  For example, consider the pages \n`/root/main/lists` and `/root/main/lists/:listId`.  Here it would be desirable for the former to present a list of lists \nwhile the later presents an individual list.  Both of these are to inherit visually from `main` which is accomplished \nby setting the parent state of the `:listId` page to `main`.\n\n### Side Menus Application State\n\nThe Side Menus Application State implemented by `sling:resourceType` `ionic-aem-apps/components/page/side-menus-application-state` \nrepresents the usage of the [Ionic Side Menu](http://ionicframework.com/docs/api/directive/ionSideMenus/) directive.  \nLeft and/or Right side menus can be enabled via the page properties dialog.  The content of the side menus is defined \nby components pulled into an open paragraph system allowing for full flexibility of the content. \n\nWhile not required this state is intended to be used as an Abstract State with the content of child states injected \ninto the main content area.\n\n## Ionic Components\n\nThe following components are provided by the Ionic AEM Apps library and are intended to be used as-is or extended \nas necessary.\n\n### Ion-Content\n\nRepresents an instance of the `ion-content` directive and should be used for holding the principal content of an \napplication state.  \n\n* Component Group: `.hidden`\n* Authorability\n    * Disable Scrolling: Boolean indicating whether the content area allows scrolling\n\n### Ion-Footer-Bar\n\nRepresents an instance of the `ion-footer-bar` directive.  The footer bar is intended to be baked into \npage components extending from Application State and allows full flexibility of its content by exposing an \nopen paragraph system.\n\n* Component Group: `.hidden`\n* Authorability \n    * Always Show: By default, the footer bar will not show if no content has been placed into its paragraph system.  Turning this on will cause the footer bar to always be presented.\n\n### Ion-Nav-View\n\nRepresents an instance of the `ion-nav-view` directive.  This component may be used to place an injection point at \nan arbitrary place in an Application State to allow for the injection of a child state at an appropriate place.  \n\nNote: The current implementation does not allow for multiple named nav views.   \n\n## Custom Component Development\n\nWhen developing custom components there are some properties unique to the Ionic AEM Apps library allowing for control \nover concerns which are unique to Cordova and Angular application development.  \n\n### Required Angular Modules\n\nWhen a custom component requires the inclusion of Angular modules at the application level these requirements are to be \ncalled out by setting the `requiredAngularModules` property of the `.content.xml` associated with the component.  This \nis to be set to a multivalue String indicating the modules required.\n\n### Required Cordova Plugins\n\nIf your component or application development requires the usage of Cordova/Phone-Gap plugins, these plugins must be \nlisted as `plugin` elements of your project's config.xml file or added at application build time using the appropriate \n CLI commands. \n \nIf you are starting your project using the [AEM Apps Ionic Archetype](https://github.com/Citytechinc/aem-apps-ionic-maven-archetype) this file will be found under \n`/content/phonegap/[project name]/shell/jcr:content/pge-app/app-content/phonegap/www/config.xml`.\n\n## Content Sync \n\n### Splash Screen\n\n## Building Native Applications\n\n## Adapters\n\nThe following Sling Adapters are provided by the Ionic AEM Apps library.\n\n| Adapt From | Adapt To | Description |\n| ---------- | -------- | ----------- |\n| `org.apache.sling.api.resource.Resource`, `com.icfolson.aem.library.api.page.PageDecorator` | `com.citytechinc.aem.apps.ionic.api.models.application.root.ApplicationRoot` | The Application Root API provides a number of methods for acquiring information about an application such as a list of the Application States making up the application.  Only pages of type `ionic-aem-apps/components/page/application-root` may be adapted to an Application Root |\n| `org.apache.sling.api.resource.Resource`, `com.icfolson.aem.library.api.page.PageDecorator` | `com.citytechinc.aem.apps.ionic.api.models.application.state.ApplicationState` | The Application State API provides a number of methods for acquiring information about a single state in an application.  The methods in this API are invoked in the construction of the state inputs to the `$stateProvider` upon bootstrapping of the application |\n| `org.apache.sling.api.resource.Resource` | `com.citytechinc.aem.apps.ionic.api.resource.TypedResource` | The Typed Resource API provides access to the properties of the type of a particular resource.  For example, if a particular resource is of `sling:resourceType` `foo/components/content/type` the resource may be adapted to a Typed Resource in order to acquire properties off of `/apps/foo/components/content/type`. |\n\n## Bindings\n\nThe following are bindings provided by the Ionic AEM Apps library.\n\n| Binding Name | Description |\n| ------------ | ----------- |\n| isIonicAemAppMode | Indication of whether the user is currently in \"app mode\".  Rendering of numerous components is different in app mode as many of the authoring affordances are removed.  Currently \"app mode\" is defined as `publish mode || preview mode`. |\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficfnext%2Fionic-aem-apps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficfnext%2Fionic-aem-apps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficfnext%2Fionic-aem-apps/lists"}