Angular framework in AEM

Following path "/libs/mobileapps/components/angular" in AEM gives an overview how angular application works with AEM.

Angular Template/Page :  Create a page component and add "mobileapps/components/angular/ng-page" as a "sling:superResourceType" property. I will explain the flow here :

• ng-page.jsp : 

• body.jsp : It include two views , one for author and other for end users that is for publish view. Routing is used only in preview/publish mode so authoring should not be tempered.Author mode includes template.jsp which has parsys for drag dropping the components but in preview mode , we have <div ng-view> to include the partials dynamically. Controller described here is dynamic i.e based on the current page path. Unlike angular, controllers are dynamic here and generated on the fly based on the components dragged on the page and its child pages. (child pages are treated as partials).  

 <div ng-controller="<c:out value="${controllerNameStripped}"/>">

Also following js are included in body.jsp . It showcase how dynamically routing & controllers are working.

<script src="<c:out value='${currentPage.name}'/>.angular-app-module.js"></script>

<script src="<c:out value='${currentPage.name}'/>.angular-app-controllers.js"></script>

For each page it will generate .angular-app-module.js and angular-app-controllers.js based on the page path.

• angular-app-module.js.jsp : It includes the index page and all the partial pages (child pages of index page) , for each page it will add <angular-route-fragment.js> which adds templateurl and controller name of that page. Check : http://localhost:4502/content/phonegap/geometrixx-outdoors/en/home/locations.angular-app-module.js

• angular-app-controllers.js : It includes the controller.js of all the angular pages and its child angular pages ,  which internally gets the page components and its relevant controller.js . So, in other words angular-app-controller.js gives you the controller of the page . Check : http://localhost:4502/content/phonegap/geometrixx-outdoors/en/home/locations.angular-app-controllers.js. 

One can check OOTB sample angular code at following locations :

• page :  /libs/mobileapps/components/angular/ng-page
• component: /libs/mobileapps/components/angular/ng-component

How to find dam assets referenced on the page

How to find page dependencies w.r.t to dam assets i.e what are the dam assets related the page . AssetRefernceSearch will provide the list of Assets associated with the page given as an argument.

public AssetReferenceSearch(Node node,
                            String searchPath,
                            ResourceResolver resolver)

The constructor.

Parameters:

node - node to start search for references

searchPath - search for assets starting with searchPath

resolver - resource resolver

Example : 

AssetReferenceSearch assetReference = new AssetReferenceSearch(<node of the page>, "/content/dam", resolver);

for (Map.Entry<String, Asset> assetMap : assetReference.search().entrySet()) {

Asset asset = assetMap.getValue();

assetsPathList.add(asset.getPath());

}

Note : Node of the page is "jcr:content" node of the page.

AEM 6 | How to add default properties for components

Use Case 1 : We usually bind the components with Component group to help authors while authoring the page. But once components are dragged dropped on the page , its difficult to track them back to which component group it belongs (apart from getting the resourcetype and then check). 

Use Case 2 : sometimes we need certain properties should be set by default when component is dragged dropped on the page .

AEM provides OOTB feature : 

1. Lets assume your component is located at "/apps/mysample/components/test"
2. Add the node "cq:template" of type "nt:unstructured" to the component.
3. Add <propertyname> and its <value> to the "cq:template" node.
4. Now wheresoever this component will be placed (on any page) , following properties (set in step 2) will be part of the component by default and we can get from them from page properties.

AEM 6 | How to get Session and Resource Resolver

The following methods are deprecated:

• ResourceResolverFactory.getAdministrativeResourceResolver
• ResourceProviderFactory.getAdministrativeResourceProvider
• SlingRepository.loginAdministrative

Now we can use the following code :

Map<String, Object> param = new HashMap<String, Object>();

param.put(ResourceResolverFactory.SUBSERVICE, "dummyuser");

resolver = resolverFactory.getServiceResourceResolver(param);

session = repository.loginService(null, null);

We need to set the service "Apache Sling Service User Mapper". Each entry is of the form 'bundleId [ ":" subServiceName ] "=" userName' where bundleId and subServiceName identify the service and userName defines the name of the user to provide to the service.  like : org.mysample.core:dummyuser=analyticsservice

Note : The user (analyticsservice described in above example) node needs to have the following properties

• jcr:primaryType="rep:SystemUser"
• jcr:uuid="<some value>"
• rep:principalName="<some value>"
• rep:authorizableId="<some value>"

Also that the user *must not have* a password , and defined user must have sufficient permissions to perform the required tasks.

How to add system user :

1. Logon to : http://localhost:4502/crx/explorer/index.jsp
2. Click on User Administration .
3. you will get screen popup (http://localhost:4502/crx/explorer/ui/usereditor.jsp?ck=1437378510768&Path=/home/users) , click on "Create System Users" as shown in snapshot below :