Добавление Angular в существующий проект CodeIgniter

Question

Я ежедневно использую CodeIgniter в качестве основы для разработки внешнего интерфейса и внутреннего интерфейса, и я очень редко использую такие динамические элементы внешнего интерфейса, как реагирование на формы и Ajax.Но я должен сказать: я люблю это, потому что это наиболее удобно для пользователя, и это ключ к хорошему развитию веб-интерфейса.С формами, например, я перехожу к старому доброму пути, публикуя новый файл, проверяя и отправляя его в базу данных или куда угодно.Мне понравится способ подтверждения и обратной связи, пока пользователь печатает, и вот тут я пришел к angular.

Прежде всего, мне нравится Angular для реагирования на формы.Для начала я буду использовать его только с формами.

Как я могу объединить структуру папок CodeIgniter со структурой папок angular, чтобы я мог использовать в первую очередь CI, но angular для обработки форм.

Answer 1

Angular обычно обслуживает контент из вызовов AJAX, поэтому вы должны использовать CodeIgniter в качестве каркаса API веб-сервиса.

Давайте подумаем, что вы собираетесь реализовать простой список:

Сначала создайтеваш проект Angular с использованием примеров данных (например, по жестким значениям).Когда ваш список продуктов работает.

HTML

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    "One",
    "Two",
    "Three",
    "Four"
  ];
  
});

angular.bootstrap(document, ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
<ul>
  <li ng-repeat="item in items">
    <a href="">{{item}}</a>
  </li>
</ul>  
</div>

На данный момент элементы жестко закодированы.Но нам нужно, чтобы эти элементы были динамичными, когда CodeIgniter обслуживал данные.

Для этого создайте папку с именем «api» в папке «www» вашего сервера.Затем загрузите все исходные файлы CodeIgniter.Если вы сделали это правильно, вы должны увидеть контроллер «Welcome» при доступе к файлу http://yourdomain.com/api'.

. Для этого я рекомендую использовать этот плагин CodeIgniter , который позволяет легко создаватьвеб-сервис API Rest.Основная задача - обслуживать объект json, когда Angular запрашивает данные.Тогда Angular сделает все остальное.

Краткий пример:

<?php

header("Content-type: application/json");

class List extends CI_Controller
{
    function __construct()
    {
        // Here you can load stuff like models or libraries if you need
        $this->load->model("list_model"); // For example
    }

    /**
     * This method receives a parameter so it can 
     * filter what list wants the client to get
     */
    public function list1($list_number)
    {
        $list = $this->list_model->getList($list_number);

        // If list not exists
        if ( empty($list) ) {
            $this->output->set_status_header(404);
            echo json_encode(
                "success" => false,
            );
            return;
        } else { // If has returned a list
            // CodeIgniter returns an HTTP 200 OK by default
            echo json_encode(
                "success" => true,
                "list" => $list,
            );
            return;
        }
    }

}

Теперь мы можем получить информацию по AJAX.Тот же код выше, но изменен для получения удаленных данных:

var app = angular.module('myApp', []);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  // Replace link bellow by the API url
  // For this example it would be:
  // http://yourdomain.com/api/list/list1/1
  $http.get("https://codepen.io/anon/pen/VExQdK.js").
  success(function(res) {
    console.log(res);
    if ( res.success == true ) {
      $scope.items = res.items;
    } else {
      $scope.items = [];
    }
  });  
}]);

angular.bootstrap(document, ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
<ul>
  <li ng-repeat="item in items">
    <a href="">{{item.name}}</a>
  </li>
</ul>  
</div>

Таким образом, вы можете получить полностью функциональный API CodeIgniter, работающий с Angular.Мне нравится организовывать методы в разных контроллерах, чтобы код был «читабельным».

Чтобы изменить или удалить данные на сервере, вы можете использовать $ http.post и отправить параметры, чтобы сообщить CodeIgniter, какой тип операции должен выполняться.Не забудьте использовать данные сеанса для защиты вызовов ajax для изменения / удаления информации (например, если пользователь пытается обновить информацию другого пользователя).

Это не окончательный способ, но мой.Я надеюсь, что это помогло вам.