Объединение Angularjs и CodeIgniter

Я работаю над существующим сайтом, написанным в CodeIgniter, и мы рассматриваем использование AngularJS для некоторых страниц, для которых требуется много функциональных возможностей интерфейса, но мы не хотим заменять все все представления CodeIgniter (сразу).

Итак, я нажимаю ссылку, управляемую маршрутизатором angular, и обрабатывается javascript, но следующая ссылка может быть "нормальным" запросом, который должен обрабатываться каркасом CodeIgniter.

Есть ли элегантный способ объединить эти два метода? Я не против некоторых дополнительных клиентских накладных расходов, потому что сайт еще не работает в производстве.

Ответы

Ответ 1

Похоже, вы пытаетесь постепенно использовать маршрутизацию Code Igniter (CI), поскольку ваше приложение angular растет. Это не сложно, но требует много деталей. Какой метод будет работать, зависит от структуры вашего проекта. Примечание. Я удалил index.php из URL-адресов Ignit Code, поэтому приведенные ниже пути могут отличаться от стандартных.

1) Код Зажигатель установлен в корневой каталог

Если 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

Основная веб-страница по-прежнему будет создана Code Igniter, но теперь она может включать в себя angular активы, такие как частичные представления и т.д. В конце концов вы можете заменить большую часть того, что делает Code Igniter, просто вернув простую страницу, и angular загружает частичные виды из /ng, как и для.

Этот метод хорош, потому что Code Igniter может контролировать, загружается ли эта начальная страница вообще (через некоторый код аутентификации пользователя в вашем контроллере CI). Если пользователь не вошел в систему, они перенаправляются и никогда не видят приложение angular.

2) Запуск кода в каталоге

Если 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 полностью доступным и отделите его от Code Igniter. Постепенно переходите к использованию частичных представлений angular и других источников JSON вместо привязки к страницам Code Igniter. В конце концов замените конечную точку Code Igniter файлом HTML, который загружает Angular.

Изменить: исправлено правописание

Ответ 2

Я никогда не использовал Angular - тем не менее это может помочь.

Итак, я нажимаю ссылку, управляемую маршрутизатором Angular, и это обрабатывается javascript

Предоставляет ли этот JavaScript запрос Ajax одному из ваших контроллеров CI? Если это так, CI теперь имеет метод is_ajax_request(), который позволяет вам проверить, поступает ли запрос (POST или GET) через ajax. Вы можете действовать по-разному на основе запроса, исходящего от Ajax по сравнению с обычным запросом.

Руководство пользователя (внизу страницы): http://ellislab.com/codeigniter/user-guide/libraries/input.html

Надеюсь, что это поможет!

Ответ 3

Я унаследовал приложение CI, и я использую Angular с CI в основном для запросов на маршрутизацию. В моем случае я не использую шаблоны Angular, поэтому я использую "пустой", но с параметром пробела для параметра шаблона в моей конфигурации $routeProvider. Это позволяет мне выполнять обычные запросы ajax CI без особого изменения исходного кода на стороне сервера.

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: '/'});
}]);

Ответ 4

Лучше всего сохранить код бэкэнд отдельно от кода angular и использовать код codeInginter как API

/Codeigniter Code / Angular Код

Поскольку CodeIgniter поставляется с его частью функции безопасности, это должно быть вашим лучшим выбором.

Ответ 5

Я взял сайт CI от другого программиста, с которым я работаю, который находится в отпуске на несколько месяцев. Наш сайт построен в основном с большим количеством angular из-за характера его цели. Наше решение было немного другим.

Все, что зависит от стандартной инфраструктуры CI, - это пары папок: js\angular\controllers и js\angular\modules в папке приложения CI, для хранения всех файлов модели и контроллера angular. Затем загрузите документы angular в базовую папку приложения.

Ответ 6

В дополнение к ответу, предоставленному Аароном Мартином, его можно также использовать как подход клиент-сервер.

Предположим, что мы создали две папки в корне нашего проекта:

  • Client

  • Сервер

Клиент будет содержать весь код AngularJS и клиентских библиотек, включая библиотеки Bower и Npm. Маршрутизация клиентской стороны также будет обрабатываться маршрутизатором AngularJS.

Там будут фабрики или сервисы, которые будут выступать в качестве поставщиков для angularjs на стороне клиента. Этот файл будет содержать код отправки запроса и получения ответа со стороны сервера.

Сервер. Папка будет иметь код Laravel или CodeIgniter или любой другой фреймворк PHP. Вы создадите все API-запросы и соответствующим образом разработаете функциональные возможности. Следовательно, раздел PHP (Server Directory) в целом будет хранить все файлы мультимедиа и файлы базы данных. Кроме того, он также будет иметь любые получающие ссылки для RSS-каналов и так далее.

Клиент должен получить весь ответ в формате JSON или XML, когда он запрашивает какой-либо API на своем сервере.

Это, по моему мнению, является одной из лучших практик разработки Webapps.