7

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

7

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.
  • Could you please explain this for me: "I have created components based FoF automatic JSON rendering github.com/akeeba/fof In this way, it is straightforward to load /get queries." – user2097091 Mar 3 '15 at 12:25
  • 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. – Anibal Mar 3 '15 at 13:38
  • Do you know of any example components out there? – user2097091 Mar 3 '15 at 17:48
  • We have implemented it for Social Composer of AutoTweetNG and Joocial extly.com/autotweet-ng-pro.html ;-) – Anibal Mar 3 '15 at 18:16
  • For the community would you be interested in expanding your answer with some concrete examples/steps? – user2097091 Mar 3 '15 at 21:22
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.