Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Routing issue in AEM + Phone Gap hybrid mobile app using Angular to bind html templates to ng-view

Avatar

Level 2

Hi,

We are developing the AEM + Phone Gap hybrid mobile app using angular (This app we started developing by customizing the AEM + Phone starter kit app hosted in GitHub).

We have developed our page components and components by extending the ng-page and ng-component and we have created the mobile pages for home, search and search results.

When we built this code and installed it in Android mobile, the home page rendering in the mobile but the navigation to search then to search results is working.

We have developed our app.js which is doing all the routing logic as below

var appmod= angular.module("appmod", ['ngRoute', 'ngMaterial']);

                appmod.config(function ($routeProvider) {

                $routeProvider

                                .when('/content/mobileapps/customapp/en/home', {

                                pageTitle: '',

                                                templateUrl: '/content/mobileapps/customapp/en/home.html',

                                                controller: 'home_ctrl'

                                })

                                .when('/search', {

                                pageTitle: 'Search',

templateUrl: '/content/mobileapps/customapp/en/home/SearchForm.template.html',

                                                controller: 'searchCtrl',

                                controllerAs: 'searchCtrl'

                                })

                .when('/searchresult', {

                                pageTitle: 'Search Result',

                                                templateUrl: '/content/mobileapps/customapp/en/home/searchresult.template.html',

                                                controller: 'searchResultCtrl',

                                controllerAs: 'searchResultCtrl'

                                })

When we tested this code in mobile it is working fine but when we install app in mobile it is working.

Now we stuck with controller routing configuration and why it is not working when we did our analysis there is already routing configurations JS files are generated by AEM using logic from below files

/libs/mobileapps/components/angular/ng-page/angular-app-controllers.js.jsp

/libs/mobileapps/components/angular/ng-page/angular-app-module.js.jsp

/libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp

/libs/mobileapps/components/angular/ng-page/angular-route-fragment.js.jsp

/libs/mobileapps/components/angular/ng-page/contorller.js.jsp

As home.angular-app-controller.js and home.angluar.app-module.js

  1. Now we stuck with issue controller navigation not working for homeà search à Search results and using our app.js configuration which is doing routing logic and AEM is generating as above.

Can some body provide advice what is the use of AEM generated controller js files as above? , if we should not have our own routing configuration how should we bind our custom angular controllers to AEM components.

0 Replies