Intégration CakePHP 3.5 et Angular 4

leica69
CakePHP

Bonjour,

Je souhaite intégrer un front-end Angular sur un site dont le back-end est géré par CakePHP. Je suis à l'aise sur Cake mais un bon gros débutant sur Angular.

Le serveur

Pour l'instant, je fais mon dev en local sur Wamp, Php 7.0 et MySql. Une fois en prod, je serai sur un serveur mutualisé hébergé chez Infomaniak.

Je souhaite...

Je souhaite que le front-end soit géré par Angular, je ferai des requêtes API à Cake qui retournera des données en JSon.

Quelle structure de dossiers?

Où dois-je installer mes fichiers Angular? Dans le dossier

monsite/webroot/js/monapp

ou ailleurs?

Ma situation

Honnêtement, je ne sais pas par où commencer.
J'imagine (et j'ai probablement tort) que je dois faire appel à des fichiers .js depuis mon layout (/Template/Layout/default.ctp) ou depuis ma page d'accueil (/Template/Pages/home.ctp).
Le problème c'est que je vois pas quels fichiers appeler pour "lancer" Angular. (Avec AngularJS, on peut faire appel aux Google Hosted Libraries mais pas avec Angular 2/4.)

Je sais que la question est floue, mais je ne vois juste pas comment approcher l'intégration. Je vous remercie d'avance pour votre aide.
Antonio

10 réponses

Jinou

Je n'ai encore jamais utilisé angular, mais théoriquement, tu dois appeler dans ton layout le fichier angular.js ( ou angular.min.js) après jquery ( si je dis pas d'annerie ).
Et ton fichier angular dans le dossier "js" du "webroot"
Après je me répète, je ne l'ai encore jamais utilisé donc ma réponse est sans doute useless ( Mais logique :p ).

leica69
Auteur

Justement, il n'y a pas de fichier angular.js ( ou angular.min.js). En tout cas, je ne le trouve pas. C'est là que je bloque!

Jinou

https://angularjs.org/
Quand je vais ici, je télécharger un fichier angular.js ... je sais pas ou tu l'as télécharger.

leica69
Auteur

Jinou, là tu fais référence à AngularJS, la version 1 du framework. Moi, je parle d'Angular 4. https://angular.io/

Jinou

Oh mes plus plates excuses ...
dans ce cas je me retire et te souhaite bon courage ^^

fital

Salut,

Peut-être cela peut t'aider : https://stackoverflow.com/questions/45328179/angular-4-integration-with-cakephp

Quoiqu'il arrive je pense qu'il faut que tu l'installes dans le webroot et ensuite le charge depuis le template.

leica69
Auteur

Merci fital, c'est aussi moi qui ai posé la question. Les réponses ne sont pas pertinentes, elles fon référence à AngularJS (la version 1).
Fital, pour la 2e partie de la réponse, pourrais-tu me dire comment le charger? C'est justement là que je coince. !!! Je parle d'Angular 4 !!!

fital

Je pense que la meilleure manière de le faire c'est de créer 2 dossiers distinct par exemple backend (contient CakePHP) et angular qui contient du coup angular. Ensuite faire pointer le site dans le dossier angular.

C'est vrai qu'on trouve pas grand chose pour angular 4 mais de ce que j'ai vu (arrête moi si j'ai tord) il ressemble un peu à React du coup logiquement l'installation est à peu près la même. Du coup il y a ce repo : https://github.com/Rubyan/CakePHP-react ou je pense tu peux t'inspirer pour intégrer Angular.

Edit: je t'ai trouvé ça c'est casi la même approche https://github.com/hirenkubavat2/cake-ang-4

romses

Moi je pense tu peux mettre dans ton dossier webroot/js/app tous les fichiers angulars JS et dans ton layout tu fait ceci:
<html ng-app="monprojetangularApp">

avant la fin de fermeture de ton body tu fais ceci:
<?php echo $this->Html->script(['app/angular.min']) ?>

et dans ta vue tu crées tes controlleurs angular normalement. dans un fichier de ton repertoire tu as un fichier main de ton appli angular dans lequel tu fait tes appels

yanis-git

Bonjour à vous,

Je suis nullement famillié avec Cake, mais la question porte plus sur Angular 4. Je recommande la solution de @fital qui propose deux projets distincts. C'est exactement l'approche recommandé par React et Angular2+ (donc 4 dans notre cas). Cela te permettra de tirer tout les bénéfices de angular-cli, mais aussi un pied vers le futur avec une architecture api, une web et une mobile (par exemple).

Si tu insistes vraiment pour avoir tout sur un seul projet (ce que je répète est une mauvaise pratique), tu dois impérativement embarquer Webpack (voir GulpJS) pour build ton application, transpiler ton TypeScript, inclure Babel etc... C'est un long processus de configuration qui risque de te faire mal à la tête. Un bon point de départ sera : https://github.com/AngularClass/angular-starter