What is the recommended way to structure a Joomla 3 custom component view using angularJS?

Question

There is very little information out there from users who have successfully integrated angular js in a joomla custom component list view. I found the following:

https://stackoverflow.com/questions/23365907/how-to-integrate-angularjs-app-inside-joomla and http://jeviathon.com/2014/06/02/joomla3/

and I have read the docs on joomla ajax interface - https://docs.joomla.org/Using_Joomla_Ajax_Interface - which looks helpful.

My specific project is large j! 3.4 site with a number of custom components kicked off in component-creator.com each with a form, item and list view. My initial goal is to leverage angular on some adapted list views for a slick searching and filtering UX.

What are the recommended practices from the experts? Has anyone done this? What are the steps/pitfalls.

Thanks

Answer 1

According to my experience:

• JSON views: I have created components based FoF automatic JSON rendering https://github.com/akeeba/fof In this way, it is straightforward to load /get queries. In spite of this, certain tasks can simply be solved with a simple Controller function. With FoF, in a perfect case, you can call an Url (index.php?option=com_todo&view=tasks&format=json) and retrieve JSON output with no additional code. In practice, you may have to define a view/tmpl/tasks_json.php to translate a timezone or encode characters for AngularJS.

• About Joomla Ajax Interface: It is a tempting feature, you can simply create a plugin or module to integrate Ajax queries. It is the technology for a module Ajax integration. But, for component development, I opt for JSON generation at the component level for better control.

• Module manager: AngularJS has its own definition of modules. Most AngularJS Apps are organized in app, controllers and services. On the other hand, Joomla has a simple way to add Javascript to a page (addScript or addScriptDeclaration). So, in any sound project organization, you have plan for a development toolbox to compile all AngularJS files into minimized files.
• Joomla MVC <-> AngularJS MV* There is no direct translation between both frameworks. Then, Joomla View is just a canvas where AngularJS views live. AngularJS services may match Joomla models/tables.
• Security and Authentication AngularJS must follow Joomla framework guidelines. Namenly, tokens in $resource and $http queries. All actions must be ACL checked.

Answer 2

I've got 3 Angular apps running against Joomla right now.

The basic idea is to set up the resource and let it deal with the option/format/controller request fields, then in the controller, call your model to do the math, then depending on where you have stored the result in the model,

$response = new stdClass(); $response->data = $model->data;

echo json_encode($response);

super clean, super easy.

As far as rendering your app, there is a single joomla view for each app in my case. the tmpl/default.php is basically just an include to the main html.

I use ngBoilerplate as the base for my builds, so I had to modify the index.html to find the scripts that grunt was inserting.

The app itself lives in /media/com_extension/lib/app/build. I left it in build because it doesn't effect anything and now I can easily edit and build from the folder where the app is going to be served.