结合Angularjs和CodeIgniter

Question

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

所以我点击一个由angular的路由器控制的链接,它由javascript处理,但是下一个链接可能是一个应该由CodeIgniter框架处理的"正常"请求.

是否有一些优雅的方式来结合这两种方法？我真的不介意一些额外的客户端开销,因为该网站尚未在生产中运行.

Answer 1

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

1)CodeIgniter安装在root中

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

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

/ng使用以下内容放置.htaccess文件:

    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应用程序中,您可以通过创建相对于域根目录的路径来从CI请求资源,而不是相对于Angular应用程序.例如,在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端点.