Question

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

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

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

Answer 1

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

1）CodeIgniter安装在root

中

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

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

将{.1}}中的.htaccess文件放入以下内容：

/ng

这允许直接访问Order allow, deny Allow from all中的文件，而不是通过CI的路由系统发回这些请求。例如，您现在可以直接加载它： /ng

主网页仍将由CodeIgniter创建，但它现在可以包含Angular资源，例如部分视图等。最终，您可以通过返回一个简单页面并使用Angular加载来替换CodeIgniter正在执行的大部分工作。来自example.com/ng/partials/angular-view.html的部分视图，就像它专为。

设计的

这种方法很不错，因为CodeIgniter可以控制是否完全加载该初始页面（通过CI控制器中的某些用户身份验证代码）。如果用户未登录，则会重定向，并且永远不会看到Angular应用程序。

2）目录中的CodeIgniter

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

example.com/myappNg/

现在，在Angular应用程序中，您可以通过创建相对于域根目录的路径来从CI请求资源，而不是相对于Angular应用程序。例如，在Angular中，您将不再从Angular文件夹/myapp/ /myapp/controllers/ /myapp/models/ /myapp/(etc) /myapp/index.php (code igniter index file) /myappNg/ /myappNg/partials/ /myappNg/js/ /myappNg/(etc)请求部分视图，而是要从CI partials/angular-view.html请求视图。请注意前导/myapp/someResource。 “someResource”可以首先返回一个html文档，或者JSON或者你正在使用Code Igniter做的任何事情。

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

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

Answer 2

最好的办法是将后端代码与角度代码分开并使用codeInginter代码作为API

/ Codeigniter代码 / Angular Code

因为CodeIgniter附带了它的安全功能，所以这应该是你最好的选择

Answer 3

我从未使用过Angular - 但这可能有所帮助。

所以我点击一个由angular的路由器控制的链接就可以了由javascript处理

此JavaScript是否向您的CI控制器发出Ajax请求？如果是这样，CI现在具有is_ajax_request()方法，允许您检查请求（POST或GET）是否通过ajax发送。您可以根据来自Ajax的请求与正常请求进行不同的处理。

用户指南（页面底部）：http://ellislab.com/codeigniter/user-guide/libraries/input.html

希望它有所帮助！

Answer 4

我继承了一个CI应用程序，我使用Angular和CI主要用于路由请求。在我的情况下，我没有使用Angular模板，所以我在$ routeProvider配置中使用''空但带有空格参数的模板选项。这使我可以执行通常的CI ajax请求，而无需对原始服务器端代码进行太多更改。

angular.module('my_app', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
   when('/', { template: " ", controller: my_routes.mainpage}). 
   when('/design/:designId/:action', {template: " ", controller: my_routes.show_design}).
   when('/vote_design/:designId', {template: " ", controller: my_routes.vote_design}).
   otherwise({redirectTo: '/'});
}]);

Answer 5

我从另一位与我一起工作的程序员那里找到了一个CI网站，这个网站已经休了几个月。由于其目的的性质，我们的网站主要建立了很多角度。我们的解决方案略有不同。

所有与标准CI框架不同的是CI文件夹中的几个文件夹：js\angular\controllers和js\angular\modules，用于保存所有角度模型和控制器文件。然后将角度文档加载到应用程序基础文件夹中。

Answer 6

除了Aaron Martin给出的答案之外，还可以将其用作客户端 - 服务器方法。

假设我们在项目的根目录中创建了2个文件夹：

客户端
服务器

客户端文件夹将包含AngularJS的所有代码和客户端库，包括Bower和Npm库。客户端的路由也将由AngularJS路由器处理。

将有工厂或服务作为客户端的angularjs的提供者。这些文件将包含发送请求和从服务器端接收响应的代码。

服务器文件夹将包含Laravel或CodeIgniter或任何其他PHP框架的代码。您将创建请求的所有API并相应地开发功能。因此，整个PHP部分（服务器目录）将存储所有媒体文件和数据库文件。此外，它还将有RSS feed等的任何接收链接。

客户端在其服务器上的任何API上请求时，只会收到JSON或XML格式的所有响应。

根据我的说法，这是开发Webapps的最佳实践之一。

结合Angularjs和CodeIgniter

6 个答案:

1）CodeIgniter安装在root

2）目录中的CodeIgniter