Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

content page routing in angular js

Avatar

Not applicable

I need to  navigate through content page in aem through angular js.

app.js file

when('/contentideas', {
     templateUrl: '/content/projectname/en/ideas.html'
    })

html file

<li><a href="#contactus">Contact-us</a></li>

 

is it possible through content pages (fully loaded with js css html everything).

this will be helpful 🙂

1 Accepted Solution

Avatar

Correct answer by
Not applicable

I have achieved by creating template with html instead of jsp. Now i can route with pages.

 

Thanks all. 🙂

View solution in original post

0 Replies

Avatar

Administrator

I have asked internal expert to have a look at this.

~kautuk

Avatar

Level 10

Hello,

Routing would be helpful when works with different views instead of pages.

Where inside your page you load different views at particular area with different data. If you are planning to implement in AEM, issues I feel would be you will end up loading complete page in route view which will duplicate JS/CSS, angular modules loading causing bigger issues. What I feel you can do is create a basic template where you author views. Apart from authored view content it will not load any JS / CSS like other pages.

In order to get a simple and good understanding of route you can refer: http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/

Hope this helps..

Thanks

Avatar

Administrator

Adding on top of what Praveen said,

Please have a look at these community articles:

Link:- http://www.conexiogroup.com/angular-sightly-in-your-aem-project/

// Angular + Sightly in your AEM project

    Here this example has also covered VIEWS in AEM pages.  

(function () {

            'use strict';

                angular.module('app', ['ngRoute'])

                .config(function($routeProvider) {

                     $routeProvider.when('/view1',{

                          controller:'Controller1',

                          templateUrl:'/view1.tpl' // The ng-template id

                     })

                    .when('/view2', {

                          templateUrl: '/view2.tpl',

                     })

              });

       })();

Link:- https://ictcalimero.wordpress.com/2015/02/08/aem-6-and-angularjs/

// AEM 6 and AngularJS. this article also covers page view with AEM

I hope this helps.

~kautuk

Avatar

Correct answer by
Not applicable

I have achieved by creating template with html instead of jsp. Now i can route with pages.

 

Thanks all. 🙂

Avatar

Administrator

harishv10986370 wrote...

I have achieved by creating template with html instead of jsp. Now i can route with pages.

 

Thanks all. 🙂

 

Can you please explain your solution bit more for the benefit of community ?

Thanks and Regards

kautuk Sahni

Avatar

Not applicable

the page component must be html + sightly file to create pages

The following has evaluated to null or missing: ==> liqladmin("SELECT id, value FROM metrics WHERE id = 'net_accepted_solutions' and user.id = '${acceptedAnswer.author.id}'").data.items [in template "analytics-container" at line 81, column 41] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign answerAuthorNetSolutions = li... [in template "analytics-container" at line 81, column 5] ----