Maison / Technologie / Comment créer un site Web d'entreprise simple avec Cosmic JS et Angular

Comment créer un site Web d'entreprise simple avec Cosmic JS et Angular

* Cet article suppose des connaissances de base en angulaire afin qu'il puisse se concentrer sur la tâche spécifique qui consiste à demander et à afficher les données de Cosmic JS.

TL; DR

Jeter un coup d'œil à le référentiel et installer l'application

De quoi parle cette application?

Un site Web typique d’une entreprise n’est qu’un ensemble de pages structurées dans une navigation plus ou moins simple. Nous souhaitons créer un site Web qui permette à l'utilisateur de créer un nombre illimité de pages et de décider de la structure de navigation, sans attendre la publication d'un code. Pour cela, nous allons nous appuyer sur Cosmic JS et créer la structure pour mener à bien ce projet. Sur cet exemple, notre compartiment aura les types d'objet suivants:

  • Pages. C'est un objet simple, sans métafield supplémentaire.
  • La navigation. Il tiendra une collection de pages.
  • Presets. Ceci est un objet de configuration avec une liste d'attributs qui nous aideront à démarrer notre application. Il contiendra la valeur pour la page d'accueil et la navigation principale que nous utiliserons pour le menu de notre site.

Utiliser l'API

Maintenant que nous avons défini la structure de nos données, nous devons créer notre application Angular (je recommande d'utiliser la CLI angulaire) et créer un service pour passer nos appels à l'API Cosmic JS. Découvrez à quel point il est simple de demander un objet de page unique à Cosmic JS:

https://medium.com/media/a4acff249c5df9f5ef0dd5c6388dc94c/href

Notez que pour les objets imbriqués, Cosmic JS ne renverra pas l’arborescence complète. Vous devrez donc parfois concaténer les appels pour tirer le meilleur parti de notre service. Par exemple: lors de la récupération des paramètres prédéfinis principaux, vous voudrez probablement inclure les pages de navigation.

https://medium.com/media/ed4ec69bbd00923929d507f963232afe/href

Nos appels d'API doivent être authentifiés avec une clé de lecture, nous pouvons l'inclure dans chaque méthode, mais le plus simple peut être de créer un intercepteur. Ceci interceptera toutes les requêtes http, nous allons donc vérifier s’il s’agit d’une requête Cosmic JS et ajouter la clé de lecture si nécessaire.

https://medium.com/media/092cf4c0d51a94836e827b3e59493987/href

Routage vers les pages

À ce stade, notre site Web ne fait rien. La première chose à faire est de savoir comment charger sa première page. Nous devons créer un module routé pour les pages et le configurer pour qu'il soit chargé à la racine. Une fois à l'intérieur du module, sur son propre routage, nous allons définir un itinéraire pour le paramètre: slug pour charger le composant de page. Et que se passe-t-il lorsqu'il n'y a pas d'itinéraire spécifié? Ce sera notre scénario le plus courant, pour cela, nous avons défini un itinéraire vide avec un garde.

https://medium.com/media/4047264c21b8c16a5a600f66d89c9fbb/href

Un garde s'exécutera lors de la mise en correspondance d'un itinéraire et avant le chargement du composant. Nous allons donc l'utiliser pour récupérer les préréglages principaux de Cosmic JS et rediriger l'application vers la page d'accueil que nous avons créée.

https://medium.com/media/1189638b1d4bd58930814258ae0ea16b/href

Composants

Nous avons maintenant une configuration de route qui va charger le composant Page, et voici le moyen de charger une page en utilisant le slug de la liste de paramètres:

https://medium.com/media/60fa2c5a5fa7c6eba733d40e71c7993d/href

Avec cela, nous avons un moyen de naviguer via l’URL, mais nous devrions aussi charger un menu afin que l’utilisateur puisse voir les pages disponibles. Pour cela, nous allons ajouter un composant de menu sur le module principal, car il sera partagé dans toute l'application. Notre menu sera composé d'une liste de navigation, d'un logo et du nom de l'entreprise. tout cela est défini sur les presets, le menu aura un appel comme celui-ci:

https://medium.com/media/635f5ec8018774225cb3779870e11a84/href

Tout cela vous permettrait de créer rapidement un site Web en utilisant Angular and Cosmic JS. Il ne vous reste plus qu'à créer les modèles et à étendre la configuration pour répondre à vos besoins.


Comment créer un site Web d'entreprise simple avec Cosmic JS et Angular a été publié à l'origine dans Hacker midi sur Medium, où les gens poursuivent la conversation en soulignant et en répondant à cette histoire.

Source

Partenariat Newstrotteur

A propos newstrotteur-fr

Découvrez également

Samsung Galaxy Note 10 pourrait bien être le premier téléphone sans bouton de Samsung

Maintenant que le Samsung Galaxy S10 est une vieille nouvelle, les rumeurs se répandent concernant …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *