How to integrate AngularJs App inside Joomla

Question

I am new to both Angular as well as Joomla that I am learning atm. What I am wondering is - is it possible to integrate Angular JS Application inside Joomla? From what I was reading about Joomla, I understand that this cms makes it easy to create Articles and manage contents and menus from Admin panel. However, since Angular JS app is an application by itself, an article page wont work ofcourse. So how do people go about integrating this?

About Angular App:

My Angular App is a bit similar to the Dan Wahlin's Customer Manager App which has a separate MySQL DB for this app and using php for server side processing on Apache.

Reason for trying to integrate Angular JS with Joomla:

The main being, Joomla provides the user registration features, permission management for users, etc.. out of the box and I am planning to install the Membership extension to it. I only want the paid members to have access to the Angular App. That is what I am trying to achieve.

What I have researched so far:

1) I looked into directPHP extension to see if the Angular JS app can be inserted using this ext. But I dont think that will work nor is it the right way to do it.

2) On searching more, I came across this Joomla Tutorial and I am not sure if that is the way to go with it. "Developing a MVC Component": http://docs.joomla.org/Developing_a_Model-View-Controller_%28MVC%29_Component_for_Joomla!2.5

If anyone can guide me on these will help me tremendously:

1) An overview on how the Angular App can be integrated with Joomla, what needs to be done, the requirements, etc... I understand that explaining this will be beyond the scope of SO, but some pointers here will help.

2) Show / guide me the way on where I need to start reading in order to achieve this. I tried googling on this topic and I cant find any tutorial that shows how to integrate Angular and Joomla.

Solution

I was finally able to integrate AngularJS app with Joomla. It was actually a lot easier than I thought it would be. My Angular App is a standalone app and I am only using Joomla for user registrations, for paid membership program, sending newsletters etc.. Therefore I want Joomla to give access to my Angular App only if they have the right user permissions. To integrate these 2, I did the following:

1) I read the docs on Developing a MVC Component for Joomla and tried to understand how the MVC component works: http://docs.joomla.org/J3.3:Developing_a_MVC_Component

2) I then created a component for this Angular App. Creating this component was really easy since I used the tools here: http://www.component-creator.com/

3) I then uploaded the component to Joomla and installed it from back-end.

4) I added the component link to the menu and set the permissions there so only the registered users can access the app's menu link.

Thats it! It worked after that. I was surprised how simple it was to incorporate the Angular app as a component into existing Joomla installation. The only things I need to do in my Angular app are:

1) Edit the relative path in the app so the path is from joomla's index.php file instead of Angular app's index file.

2) Fix the class conflicts that may arise due to any conflicts between Bootstrap and Joomla template.

This is my first attempt since I am very new to Joomla. I hope this helps out others who might be wondering the same since I was so lost on how to do it when I got started. The Joomla docs are pretty good that helped me with this a lot.

Happy Coding!

Comments

[Ryan]

How did the AngularJS framework get added to the Joomla framework for your AngularJS App to work correctly?

[Neel]

The Angular App gets embedded inside Joomla itself as a component on its own. I add the Angular FW and all other required files to Joomla by using the $doc->addScript method which is called from the Angular component's php files.

[David Addoteye]

I never knew it can be setup like this.. Please if you can create a link to sample file structure that will be great. I have created the component from Component-creator.com and the component is working. However, I am unable to add angularjs to the view.. thank you

[Adry]

Maybe did you get to use the Joomla API inside your Angular app? I'm searching a way to integrate user info from Joomla inside the app.

[Neel]

@Adry I did not use the Joomla API inside my Angular App. If you had to do that, one way I can think of is maybe storing the Joomla user info in Angular as constants or in a service during the initialization of the App itself so the user data can be used within the Angular App. I haven't tried it myself, but that is a method I can think of at the moment that you could try.