结合 Angularjs 和 CodeIgniter [英] Combining Angularjs and CodeIgniter

问题描述

我正在处理一个用 CodeIgniter 编写的现有网站，我们正在考虑将 AngularJS 用于一些需要大量前端功能的页面，但我们不想替换所有 CodeIgniter 视图((暂时)).

I am working on an existing site written in CodeIgniter and we are looking at using AngularJS for some pages that require a lot of frontend functionality but we don't want to replace all all CodeIgniter views (at once (yet)).

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

So i click a link that's controlled by angular's router and it is handled by javascript but next link could be a "normal" request that should handled by the CodeIgniter framework.

有没有什么优雅的方式将这两种方法结合起来?我并不介意一些额外的客户端开销，因为该网站尚未投入生产.

Is there some elegant way to combine these two methods? I don't really mind some extra client side overhead because the site is not running in production yet.

推荐答案

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

It sounds like you're looking to gradually make less use of CodeIgniter's (CI) routing as your angular application grows. This is not difficult but requires a lot of detail. Which method will work depends on your project structure. Note: I removed index.php from Code Igniter URLs, so the paths below may be different than default.

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

If CI is installed on the root of your server, you can create a folder within CI (for instance I have an "ng" folder). Your project will look like:

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

在 /ng 中放置一个 .htaccess 文件，内容如下:

place an .htaccess file within /ng with the following:

    Order allow, deny
    Allow from all

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

This allows the files within /ng to be directly accessed, rather than sending those requests back through CI's routing system. For example you can load this directly now: example.com/ng/partials/angular-view.html

主网页仍将由 CodeIgniter 创建，但它现在可以包含 Angular 资产，例如部分视图等.最终，您可以通过返回一个简单的页面并让 Angular 加载来替换 CodeIgniter 所做的大部分工作来自 /ng 的部分视图，就像它的设计目的一样.

The main web page will still be created by CodeIgniter, but it can now include Angular assets, such as partial views, etc. Eventually you can replace most of what CodeIgniter is doing by just returning a simple page, and having Angular load partial views from /ng like it's designed for.

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

This method is nice because CodeIgniter can control whether that initial page is loaded at all (via some user authentication code in your CI controller). If user isn't logged in, they are redirected and never see the Angular app.

如果 CI 安装在目录中，例如 example.com/myapp/(code igniter)，您只需在其旁边创建一个目录，example.com/myappNg/

If CI is installed in a directory, such as example.com/myapp/(code igniter) you can simply create a directory next to it, 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 执行的操作.

Now in your Angular application, you can request resources from CI by making paths relative to the domain root, rather than relative to the Angular app. For instance, in Angular, you will no longer request a partial view from the Angular folder partials/angular-view.html, rather you'll want to request views from CI /myapp/someResource. Note the leading /. "someResource" can return an html document, or JSON or whatever you're doing with Code Igniter in the first place.

最终您可以替换引用 /myapp/ 的路径数.一旦您不再使用 CI 做任何事情，您只需将 Angular index.html 放在 /myapp/ 中，它就会继续在 /myappNg/ 中引用您的路径.

Eventually you can replace the number of paths which reference /myapp/. Once you no longer use CI for anything, you can simply place your Angular index.html in /myapp/ and it will continue to reference your paths at /myappNg/.

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

TL;DR Make your Angular app fully available and decouple it from CodeIgniter. Gradually move toward using Angular partial views and other JSON sources instead of linking to CodeIgniter pages. Eventually replace your CodeIgniter endpoint with an HTML file which bootstraps Angular.

这篇关于结合 Angularjs 和 CodeIgniter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！