Javascript 结合 Angularjs 和 CodeIgniter

Combining Angularjs and CodeIgniter

提问by Han Dijk

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)).

我正在处理一个用 CodeIgniter 编写的现有站点，我们正在考虑将 AngularJS 用于一些需要大量前端功能的页面，但我们不想替换所有 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.

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

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.

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

回答by Aaron Martins

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.

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

1) CodeIgniter installed in root

1) 安装在 root 中的 CodeIgniter

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:

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

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

place an .htaccess file within /ngwith the following:

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

    Order allow, deny
    Allow from all

This allows the files within /ngto 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

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

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 /nglike it's designed for.

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

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.

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

2) CodeIgniter in Directory

2) 目录中的 CodeIgniter

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/

如果 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)

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.

现在，在您的 Angular 应用程序中，您可以通过创建相对于域根而不是相对于 Angular 应用程序的路径来从 CI 请求资源。例如，在 Angular 中，您将不再从 Angular 文件夹请求局部视图partials/angular-view.html，而是希望从 CI 请求视图/myapp/someResource。注意领先的/. “someResource” 可以返回一个 html 文档，或者 JSON 或者任何你首先用 Code Igniter 做的事情。

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/.

最终，您可以替换引用/myapp/. 一旦你不再使用 CI 做任何事情，你可以简单地将你的 Angular index.html 放入/myapp/，它会继续在/myappNg/.

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.

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

回答by Sydney Collins

Your best bet is to keep your backend code separate from the angular code and use the codeInginter code as an API

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

/Codeigniter Code /Angular Code

/Codeigniter 代码 /Angular 代码

Because CodeIgniter comes with its share of security feature this should be your best bet

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

回答by istos

I've never used Angular - nevertheless this may help.

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

So i click a link that's controlled by angular's router and it is handled by javascript

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

Does this JavaScript make an Ajax request to one of your CI's controllers? If so, CI now has the is_ajax_request()method, which allows you to check if a request (POST or GET) is coming via ajax. You can proceed differently based on a request coming from Ajax vs a normal request.

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

User guide (bottom of the page): http://ellislab.com/codeigniter/user-guide/libraries/input.html

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

Hope it helps!

希望能帮助到你！

回答by Peter Drinnan

I inherited a CI app and I'm using Angular with CI mainly for routing requests. In my case I am not using Angular templates, so I use a ' ' empty but with a space parameter for the template option in my $routeProvider config. This allows me to do the usual CI ajax requests without too much change to the original server-side code.

我继承了一个 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: '/'});
}]);

回答by Tirthraj Rao

To addition to the answer given by Aaron Martin, one can also use it as a client - server approach.

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

Lets say we make 2 folders in root of our project :

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

1. Client

2. Server

1. 客户

2. 服务器

Clientfolder will contain all the code of AngularJS and the client side libraries including the Bower and Npm libraries. The routing of the client side will also be handled by AngularJS router.

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

There will be factories or services which will act as providers for angularjs on client side. Those file will contain the code of sending request and receiving response from server side.

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

ServerFolder will have the code of Laravel or CodeIgniter or Any other PHP framework. You will create all the APIs of the requests and develop the functionality accordingly. Hence the PHP section (Server Directory) at the whole will be storing all the Media Files and Database Files. Moreover it will also have any receiving links for RSS feeds and so on.

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

The Client shall just receive all the response in JSON or XML format when it requests on any API on its server..

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

This according to me is one of the finest practice for developing Webapps.

在我看来，这是开发 Web 应用程序的最佳实践之一。

回答by Timothy Moffett

I picked up a CI site from another programmer I work with that is on leave for a few months. Our site is build mostly with a lot of angular due to the the nature of its purpose. Our solution was a little different.

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

All that varies from the standard CI framework is a couple folders: js\angular\controllersandjs\angular\modulesin CI's application folder, to hold all of the angular model and controller files. Then load the angular docs into the application base folder.

所有这一切从标准CI架构变化是一对夫妇的文件夹：js\angular\controllers和js\angular\modules在CI的应用程序文件夹，以容纳所有的角模型和控制器的文件。然后将 angular 文档加载到应用程序基本文件夹中。