一尘不染

结合Angularjs和CodeIgniter

angularjs

我正在使用CodeIgniter编写的现有站点上工作,我们正在考虑将AngularJS用于需要大量前端功能的某些页面,但我们不想替换所有CodeIgniter视图(一次(尚未))。

因此,我单击了由angular的路由器控制的链接,该链接由javascript处理,但下一个链接可能是应由CodeIgniter框架处理的“正常”请求。

有两种结合这两种方法的优雅方法吗?我真的不介意一些额外的客户端开销,因为该站点尚未在生产中运行。


阅读 220

收藏
2020-07-04

共1个答案

一尘不染

听起来您正在随着角度应用程序的增长而逐渐减少使用CodeIgniter(CI)路由。这并不困难,但是需要很多细节。哪种方法有效取决于您的项目结构。
注意:我从Code Igniter URL中删除了index.php,因此下面的路径可能与默认路径不同。

1)CodeIgniter安装在根目录下

如果CI安装在服务器的根目录下,则可以在CI中创建一个文件夹(例如,我有一个“ ng”文件夹)。您的项目将如下所示:

    /controllers
    /models
    /ng
    (etc)
    /index.php (code igniter index file)

将.htaccess文件放入/ng以下文件中:

    Order allow, deny
    Allow from all

这允许/ng直接访问其中的文件,而不是通过CI的路由系统将这些请求发送回去。例如,您可以立即直接加载它:
example.com/ng/partials/angular-view.html

主页仍将由CodeIgniter创建,但现在它可以包含Angular资产,例如局部视图等。最终,您可以通过返回一个简单页面并从Angular中加载局部视图来替换CodeIgniter的大部分工作。/ng像是专为

此方法很好,因为CodeIgniter可以控制是否完全加载了初始页面(通过CI控制器中的某些用户身份验证代码)。如果用户未登录,他们将被重定向并且永远不会看到Angular应用程序。

2)目录中的CodeIgniter

如果CI安装在目录中,例如example.com/myapp/(code igniter)您可以简单地在目录旁边创建目录,example.com/myappNg/

    /myapp/
    /myapp/controllers/
    /myapp/models/
    /myapp/(etc)
    /myapp/index.php (code igniter index file)
    /myappNg/
    /myappNg/partials/
    /myappNg/js/
    /myappNg/(etc)

现在,在Angular应用程序中,您可以通过相对于域根而不是相对于Angular应用程序的路径来向CI请求资源。例如,在Angular中,您将不再需要从Angular文件夹中请求部分视图partials/angular- view.html,而是希望从CI中请求视图/myapp/someResource。注意开头/。首先,“
someResource”可以返回html文档,JSON或您对Code Igniter所做的任何操作。

最终,您可以替换引用的路径数/myapp/。一旦不再将CI用于任何内容,您只需将Angular
index.html放入其中/myapp/,它将继续在处引用您的路径/myappNg/

TL;
DR使Angular应用程序完全可用,并将其与CodeIgniter分离。逐渐转向使用Angular局部视图和其他JSON源,而不是链接到CodeIgniter页面。最后,使用引导Angular的HTML文件替换您的CodeIgniter端点。

2020-07-04