Combiner Angularjs et CodeIgniter

Question

Je travaille sur un site existant écrit en CodeIgniter et nous envisageons d'utiliser AngularJS pour certaines pages qui nécessitent beaucoup de fonctionnalités frontales mais nous ne voulons pas remplacer toutes les vues CodeIgniter (en même temps (pour l'instant)).

Donc je clique sur un lien qui est contrôlé par le routeur d'angular et qui est géré par javascript mais le lien suivant pourrait être une requête "normale" qui devrait être gérée par le framework CodeIgniter.

Existe-t-il un moyen élégant de combiner ces deux méthodes ? Je n'ai pas vraiment d'objection à ce qu'il y ait une surcharge côté client car le site n'est pas encore en production.

Answer 1

Il semble que vous cherchiez à réduire progressivement l'utilisation du routage de CodeIgniter (CI) au fur et à mesure que votre application angulaire grandit. Ce n'est pas difficile, mais cela demande beaucoup de détails. La méthode qui fonctionnera dépend de la structure de votre projet. Note : J'ai supprimé index.php des URL de Code Igniter, donc les chemins ci-dessous peuvent être différents de ceux par défaut.

1) CodeIgniter installé en racine

Si CI est installé à la racine de votre serveur, vous pouvez créer un dossier dans CI (par exemple, j'ai un dossier "ng"). Votre projet ressemblera à ceci :

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

placer un fichier .htaccess dans /ng avec les éléments suivants :

    Order allow, deny
    Allow from all

Cela permet aux fichiers contenus dans /ng pour y accéder directement, plutôt que de renvoyer ces demandes par le système de routage de CI. Par exemple, vous pouvez maintenant charger ce document directement : example.com/ng/partials/angular-view.html

La page web principale sera toujours créée par CodeIgniter, mais elle peut désormais inclure des actifs Angular, tels que des vues partielles, etc. Finalement, vous pouvez remplacer la plupart de ce que fait CodeIgniter en renvoyant une simple page, et en demandant à Angular de charger des vues partielles à partir de /ng comme il a été conçu.

Cette méthode est intéressante car CodeIgniter peut contrôler si cette page initiale est chargée (via un code d'authentification de l'utilisateur dans votre contrôleur CI). Si l'utilisateur n'est pas connecté, il est redirigé et ne voit jamais l'application Angular.

2) CodeIgniter dans le répertoire

Si CI est installé dans un répertoire, tel que example.com/myapp/(code igniter) vous pouvez simplement créer un répertoire à côté, example.com/myappNg/

    /myapp/
    /myapp/controllers/
    /myapp/models/
    /myapp/(etc)
    /myapp/index.php (code igniter index file)
    /myappNg/
    /myappNg/partials/
    /myappNg/js/
    /myappNg/(etc)

Maintenant, dans votre application Angular, vous pouvez demander des ressources à CI en rendant les chemins relatifs au domaine Root, plutôt que relatifs à l'application Angular. Par exemple, dans Angular, vous ne demanderez plus une vue partielle à partir du dossier Angular partials/angular-view.html Il est préférable de demander des vues à CI /myapp/someResource . Notez que le premier / . "someResource" peut renvoyer un document html, ou JSON ou tout ce que vous faites avec Code Igniter en premier lieu.

Vous pouvez éventuellement remplacer le nombre de chemins qui font référence à /myapp/ . Une fois que vous n'utilisez plus CI pour quoi que ce soit, vous pouvez simplement placer votre index.html Angular dans /myapp/ et il continuera à faire référence à vos chemins d'accès à /myappNg/ .

TL;DR Rendez votre application Angular entièrement disponible et découplez-la de CodeIgniter. Utilisez progressivement des vues partielles Angular et d'autres sources JSON au lieu de faire des liens vers des pages CodeIgniter. Finalement, remplacez votre point de terminaison CodeIgniter par un fichier HTML qui démarre Angular.

Answer 2

Votre meilleur choix est de garder votre code backend séparé du code angulaire et d'utiliser le code codeInginter comme une API

/Codeigniter Code /Code Angular

Parce que CodeIgniter est livré avec sa part de fonctionnalités de sécurité, c'est votre meilleur choix.

Answer 3

Je n'ai jamais utilisé Angular, mais cela peut aider.

Je clique sur un lien contrôlé par Angul. géré par javascript

Ce JavaScript fait-il une requête Ajax à l'un des contrôleurs de votre CI ? Si c'est le cas, l'IC dispose maintenant de la fonction is_ajax_request() qui permet de vérifier si une requête (POST ou GET) provient d'ajax. Vous pouvez procéder différemment selon qu'il s'agit d'une requête Ajax ou d'une requête normale.

Guide de l'utilisateur ( bas de la page ): http://ellislab.com/codeigniter/user-guide/libraries/input.html

J'espère que cela vous aidera !

Answer 4

J'ai hérité d'une application CI et j'utilise Angular avec CI principalement pour le routage des requêtes. Dans mon cas, je n'utilise pas de modèles Angular, donc j'utilise un paramètre ' ' vide mais avec un espace pour l'option de modèle dans ma configuration $routeProvider. Cela me permet de faire les requêtes ajax habituelles de l'IC sans trop modifier le code côté serveur d'origine.

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

En plus de la réponse donnée par Aaron Martin, on peut aussi l'utiliser comme une approche client-serveur.

Disons que nous créons 2 dossiers dans la racine de notre projet :

1. Client

2. Serveur

Client contient tout le code d'AngularJS et les bibliothèques côté client, y compris les bibliothèques Bower et Npm. Le routage du côté client sera également géré par le routeur AngularJS.

Il y aura des usines ou des services qui agiront comme des fournisseurs pour angularjs côté client. Ces fichiers contiendront le code d'envoi des requêtes et de réception des réponses du côté serveur.

Serveur Le dossier aura le code de Laravel ou CodeIgniter ou tout autre framework PHP. Vous créerez toutes les API des demandes et développerez les fonctionnalités en conséquence. Par conséquent, la section PHP (répertoire du serveur) stockera tous les fichiers multimédias et les fichiers de base de données. En outre, elle contiendra également tous les liens de réception pour les flux RSS, etc.

Le client recevra simplement toutes les réponses au format JSON ou XML lorsqu'il demandera une API sur son serveur.

C'est, selon moi, l'une des meilleures pratiques pour développer des applications Web.