content page routing in angular js

[Former Community Member]

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 :-)

[smacdonald2008]

Take a look at the ACS-Commons code here: 

https://github.com/Adobe-Consulting-Services/acs-aem-samples/tree/master/content/src/main/content/jc...

Hope this helps... 

[kautuk_sahni]

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

~kautuk

[edubey]

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

[kautuk_sahni]

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

[Former Community Member · Accepted solution]

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

Thanks all. :)

[kautuk_sahni]

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

[Former Community Member]

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