19

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

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

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

4

6 回答 6

29

听起来您希望随着 Angular 应用程序的增长逐渐减少对 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 从/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 端点。

于 2013-09-09T18:24:30.813 回答
2

最好的选择是将后端代码与角度代码分开，并将 codeInginter 代码用作 API

/Codeigniter 代码 /Angular 代码

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

于 2016-06-16T13:29:43.383 回答
1

我从未使用过 Angular——不过这可能会有所帮助。

所以我点击了一个由 Angular 的路由器控制的链接，它由 javascript 处理

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

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

希望能帮助到你！

于 2013-02-04T08:46:34.523 回答
1

我继承了一个 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: '/'});
}]);
于 2013-06-22T18:29:08.553 回答
1

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

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

  1. 客户

  2. 服务器

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

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

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

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

在我看来，这是开发 Webapps 的最佳实践之一。

于 2017-08-08T09:47:15.317 回答
0

我从另一个与我一起工作的程序员那里找到了一个 CI 站点，该站点正在休假几个月。由于其目的的性质，我们的网站主要是用很多角度构建的。我们的解决方案有点不同。

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

于 2017-07-21T15:33:58.093 回答