Discussion :

[brazilia28]

Bonjour à tous,

Je souhaite réaliser un petit site sous Angular, histoire de me former car nous allons migrer notre projet entier sous Angular courant 2017 dans ma société.
Le site que je souhaite réaliser utilisera des WebApi en .Net afin de communiquer avec une base Sql Server.

En local, aucun souci pour réaliser ce que je souhaite.
Mais je me pose la question de la publication en prod. Je souhaiterais prendre un hébergement pas cher (OVH ou 1&1) pour tester mon site, mais j'ai l'impression que le processus est différent d'un site basique où il suffit d'envoyer les fichiers sur le serveur ou de créer un package dans le cas d'un projet Azure.

J'ai beau cherché sur le net, je n'ai pas trouvé de documentation sur la publication d'un site sous Angular.

Si parmi vous, certains peuvent m'apporter leur expérience ou leur aide, je leur en serais très reconnaissant :-)

Merci beaucoup

[dukoid]

j'utilise angular-cli un outil créé par google pour développer facilement en Angular.

avec angular-cli, tu peux créer un projet de départ, créer des squelettes (component, services...) ce qu'on appelle le scaffolding.

et tu peux en faisant :
ng build

cela va générer un livrable de tout le projet dans un dossier /dist
ainsi on peut mettre le contenu de /dist en prod. tous les fichiers css, js ... sont compressés, minifiés etc.... comme il se doit.
pratique angular-cli

[brazilia28]

Merci dukoid pour ta réponse rapide.

En effet, j'avais vu qu'on pouvait faire des choses avec angular-cli, mais sans vraiment trouver comment.

Une fois que le livrable est généré, j'imagine qu'il ne suffit pas de l'envoyer sur le site de l'hébergeur de notre site via un FTP. Il y a surement d'autres choses à faire non ?

[dukoid]

basiquement, non. rien d'autre à faire. le package est prêt à fonctionner en prod, c'est le but. j'ai déjà testé ! (et tu peux en faire autant)

à noter que si tu n'a pas demarré ton projet avec angular-cli, il ne s'adaptera probablement pas à ton projet.
car angular-cli, utilise des technos et des configurations propre à lui

[brazilia28]

Merci.

Effectivement, j'ai commencé avec systemjs.
Je vais voir si je peux adapter mon projet avec angular-cli. Au pire, je recommencerais, j'en suis qu'au tout début.

Si certains d'entres vous ont davantage d'infos sur le sujet, je suis preneur :-)

[Seb2086]

Hello,

Effectivement comme le dit dukoid, angular-cli est là pour t'aider à structurer correctement ton projet Angular2 et fournit pas mal d'outils pour créer ton application via la création automatique de composants, de services, de modules etc...

Tu peux également faire un build de ton application prêt à être déployé sur ton serveur.

Pour en savoir plus tu peux regarder la doc officielle ici: https://github.com/angular/angular-cli et/ou lire ce tuto: Débuter avec angular-cli.

[brazilia28]

Merci Seb2086 pour ces précisions.
J'ai testé angular-cli, et effectivement c'est assez puissant et facile d'utilisation pour publier par exemple sur Github-pages.

J'ai également entendu parlé de Webpack. Vous en pensez quoi ?

Merci

[brazilia28]

Ah mais en fait, angular-cli créé l'architecture du projet avec Webpack à l'intérieur. Je pensais que c'était différent. Je mélange un peu tout ^^

[dukoid]

grunt, gulp, webpack font à peu près la même chose. webpack est plus adapté pour les dev. modulaires comme angular.
et donc ces 3 outils permettent d'effectuer des tâches automatiquement.(minifier, uglifier, lancer les tests, lancer build, lancer serveur, live reload....)

en effet, angular-cli utilise webpack. c'est transparent. après tu peux toujours apprendre à gérer et configurer par toi même webpack sans utiliser angular-cli.
(si tu veux devenir le roi des DEV Frontend va falloir passer par là)

[brazilia28]

Oui je pense que je vais me tourner vers la gestion et configuration de webpack.

J'aimerais débuter un projet Angular avec appels à des API Controllers .Net.

Vous avez déjà réalisé ce type de projet ? J'ai vu qu'il existait pas mal de templates sur Github, mais lequel choisir..... ????

[dukoid]

j'ai jamais fait sur .NET. tu veux dire faire des requetes classique genre GET ou POST (comme les accès à une API ? REST ?)

sinon en générale pour choisir un plug in, je regarde plusieurs paramètres :
- la dernière mise à jour date de quand ? (et donc est ce un projet abandonné ou pas par les auteurs ?)
- combien de personne l'ont téléchargé ?
- la doc (bien fourni ou pas ?)
- lire les commentaires pour connaitre les avis

[brazilia28]

Oui c'est ça. Utiliser une API REST pour intéragir avec une base de données Sql Server.
Vu que dans ma boite, on va migrer notre projet sous Angular dans l'année, je veux me faire un peu la main sur un projet perso.

[dukoid]

donc l'API REST est déjà faite ?

sous angular, avec le module http on peut facilement faire des requetes GET, POST. PUT.... et j'en ai fait pour recuperer des données d'une API REST que j'ai mis en place via Symfony.
avec une authentification JWT pour sécuriser l'API REST

[brazilia28]

Pour un premier projet perso, j'ai également utilisé le module http mais pour accéder à des API externes.

Dans le projet dans lequel je me lance, l'API n'est pas faite pour le moment.
L'API sera présente dans le même projet et sera dispo via des controllers API.

[dukoid]

plus haut , je t'ai demandé si tu devais utiliser des requêtes GET, POST...tu as dis que oui et là tu dis que tu as déjà utilisé le module http. donc tu as le nécessaire...
il existe des accès gratuits online pour accèder à des données REST. c'est bien pour s'entrainer sans devoir créer un serveur REST.

L'API sera présente dans le même projet et sera dispo via des controllers API.

fait attention au vocabulaire je ne comprends pas trop.
une API REST est toujours externe ! c'est le but. sinon je ne vois pas l'interêt

quel projet ? le projet angular et l'api rest sur le même serveur ? car meme projet ? cela n'a aucun interet !

[Seb2086]

Oui, comme API externe tu as par exemple l'api de Github qui te permet de récupérer quelques informations https://api.github.com/

[brazilia28]

En effet, après relecture, je ne suis pas très clair... ^^

Dans un premier projet perso, j'avais utilisé le module http d'Angular pour requêter une API REST (http://api.football-data.org/).

Dans un second temps, je veux réaliser un autre projet où je vais devoir intéragir avec ma base de données Sql Server.
Donc je vais créer des contrôleurs .Net qui s'occuperont de fournir en json les données de ma base.
Et j'utiliserais ensuite le module http d'Angular pour appeler les méthodes de mes contrôleurs.

Je suis plus clair maintenant

[dukoid]

comme l'eau claire !