如何将AngularJs应用程序集成到Joomla中

13
我既不熟悉Angular也不熟悉Joomla,但我正在学习它们。我的问题是 - 是否可以在Joomla中集成Angular JS应用程序?从我所了解的Joomla来看,我知道这个cms使得从管理员面板创建文章和管理内容和菜单变得容易。然而,由于Angular JS应用程序本身就是一个应用程序,因此文章页面当然不起作用。那么人们如何集成这个应用程序呢? 关于Angular App: 我的Angular App与Dan Wahlin的客户管理器应用程序有些类似,它有一个单独的MySQL DB,并在Apache上使用php进行服务器端处理。 尝试将Angular JS与Joomla集成的原因: 主要原因是,Joomla提供用户注册功能、用户权限管理等等,我计划安装会员扩展。我只希望付费会员能够访问Angular App。这就是我想要实现的。 我迄今为止的研究成果: 1) 我查看了directPHP扩展,以查看是否可以使用该扩展插入Angular JS应用程序。但我认为这不会起作用,也不是正确的做法。
2) 在进一步搜索时,我发现了这个Joomla教程,我不确定是否应该这样做。 "Developing a MVC Component": http://docs.joomla.org/Developing_a_Model-View-Controller_%28MVC%29_Component_for_Joomla!2.5 如果有人能指导我,将对我有很大帮助: 1) 怎样才能将Angular App与Joomla集成,需要做什么,有哪些要求等方面的概述...我明白解释这个问题超出了SO的范围,但在这里提供一些指针会有所帮助。
2) 指导我从哪里开始阅读以实现这一点。我尝试在这个主题上搜索并找不到任何教程,显示如何整合Angular和Joomla。

Angular 坐落在一个 RESTful 服务器上,所以如果 Joomla 提供它,你就很安全了 - 虽然在编写一行 Joomla 代码之前,我宁愿自己先开枪打脚,但这只是个人口味问题。 - moonwave99
这是一个使用angular.js在独立的Joomla应用程序中完成的示例 https://github.com/elinw/jwc2012-tasks/tree/jwc2012-final。 - Elin
谢谢Elin。我会查看链接的。过去几天,我读了更多关于这个问题的内容,现在我要尝试一下,看看是否可以将独立的Angular应用程序添加为Joomla组件。我目前正在阅读有关创建组件的文档。不确定这是否是正确的方法或者它是否能够正常工作。 - Neel
1个回答

25
我终于成功将 AngularJS 应用程序与 Joomla 集成。实际上,这比我想象的要容易得多。我的 Angular 应用程序是一个独立的应用程序,我只使用 Joomla 进行用户注册、付费会员计划、发送通讯等。因此,我希望 Joomla 只有在拥有正确的用户权限时才能访问我的 Angular 应用程序。为了将这两者集成起来,我做了以下几点:
1)我阅读了 Joomla 的“开发 MVC 组件”文档,并尝试理解 MVC 组件的工作原理:http://docs.joomla.org/J3.3:Developing_a_MVC_Component 2)然后我为这个 Angular 应用程序创建了一个组件。由于我使用了这里的工具,所以创建这个组件非常容易:http://www.component-creator.com/ 3)然后我将组件上传到 Joomla 并从后台进行安装。
4)我将组件链接添加到菜单中,并在那里设置权限,以便只有注册用户可以访问该应用程序的菜单链接。

就是这样!在那之后它起作用了。我很惊讶,将Angular应用程序作为组件合并到现有的Joomla安装中是多么简单。我需要在我的Angular应用程序中执行的唯一操作是:

1)编辑应用程序中的相对路径,使路径从Joomla的index.php文件而不是Angular应用程序的索引文件开始。

2)解决由于Bootstrap和Joomla模板之间可能存在的任何冲突而导致的类冲突。

这是我第一次尝试,因为我对Joomla非常陌生。我希望这能帮助到其他人,他们可能会有同样的疑问,因为当我开始时我很迷茫,不知道该怎么做。Joomla文档对我帮助很大。

愉快地编码吧!


AngularJS框架是如何添加到Joomla框架中,使得你的AngularJS应用程序能够正常工作的? - Ryan
Angular应用程序作为一个组件嵌入到Joomla中。我通过使用$doc->addScript方法从Angular组件的php文件中调用来将Angular FW和所有其他所需文件添加到Joomla中。 - Neel
1
我从未知道它可以这样设置。如果您能创建一个示例文件结构的链接,那将非常好。 我已经使用Component-creator.com创建了组件,并且该组件正在工作。但是,我无法将angularjs添加到视图中。谢谢 - David Addoteye
也许你曾经在Angular应用中使用过Joomla API吗?我正在寻找一种将Joomla用户信息集成到应用程序中的方法。 - Adry
1
@Adry 我没有在我的Angular应用程序中使用Joomla API。如果你必须这样做,我能想到的一种方法可能是将Joomla用户信息存储在Angular中作为常量或在应用程序本身初始化期间存储在服务中,以便用户数据可以在Angular应用程序中使用。我自己没有尝试过,但那是我目前能想到的一个方法,你可以试试看。 - Neel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接