Πώς να οικοδομήσετε μια γωνιακή εφαρμογή που υποστηρίζεται από CMS χωρίς διακομιστή

Αυτό το σεμινάριο αποτελεί συνέχεια της προηγούμενης διδασκαλίας μου σχετικά με τον τρόπο κατασκευής μιας εφαρμογής Vue.js που υποστηρίζεται από CMS χωρίς διακομιστές και σας δείχνει πώς να οικοδομήσετε μια γωνιακή εφαρμογή που υποστηρίζεται από CMS χωρίς διακομιστές.

Έλενα στο Unsplash

Το γωνιακό, που αναπτύχθηκε και συντηρήθηκε από τους μηχανικούς της Google, έχει βρει μια θέση σε όλες τις δυναμικές εφαρμογές ιστού και αποτελεί μια όλο και πιο απαιτητική γλώσσα. Είναι μια ισχυρή και ολοκληρωμένη γλώσσα για την ανάπτυξη front-end που είναι έτοιμη για δοκιμή μονάδων, καθιστώντας τη γλώσσα επιλογής για πολλούς προγραμματιστές. Το γωνιακό απλοποιεί την εμπειρία ανάπτυξης του μπροστινού τμήματος, επεκτείνοντας τη σύνταξη HTML για να σας επιτρέψει να δημιουργήσετε γρήγορα δυνατότητες διαχείρισης περιεχομένου.

Λόγω της απλότητας του Angular, οι προγραμματιστές εκμεταλλεύονται ολοένα και περισσότερο την προσθήκη του CMS στους ιστοτόπους.

Για τους χρήστες του Wordpress, ένας δημοφιλής τρόπος ενσωμάτωσης της δυνατότητας διαχείρισης περιεχομένου είναι να συνεργαστείτε με τη γωνιακή βιβλιοθήκη wp-api που σας επιτρέπει να αλληλεπιδράσετε με το Wordpress API και τις γωνιακές εφαρμογές. Εάν χρησιμοποιείτε το Wordpress ως πλατφόρμα CMS, μπορείτε να μειώσετε τους χρόνους φόρτωσης για το περιεχόμενο της σελίδας σας χρησιμοποιώντας το Angular και το API Wordpress.

Για όσους δεν χρησιμοποιούν το Wordpress, υπάρχει μια νέα φυλή API με βάση CMSs που απλοποιούν σε μεγάλο βαθμό τα πράγματα. Θα συζητήσουμε εδώ ένα παράδειγμα.

Σε αυτό το άρθρο, θα χρησιμοποιήσουμε το ButterCMS ως εναλλακτική λύση για το Wordpress και ένα παράδειγμα βασισμένου σε SaaS CMS χωρίς κεφαλίδες, το οποίο παρέχει ένα φιλοξενούμενο CMS dashboard και API περιεχομένου που ζητάτε από την γωνιακή εφαρμογή σας. Αυτό σημαίνει ότι δεν χρειάζεται να γυρίσετε οποιαδήποτε νέα υποδομή για να προσθέσετε CMS στη γωνιακή εφαρμογή σας.

Αυτό το σεμινάριο θα σας δείξει πώς να δημιουργήσετε μια γωνιακή εφαρμογή με CMS που διαθέτει σελίδες μάρκετινγκ (περιπτωσιολογικές μελέτες πελατών), ένα blog και συχνές ερωτήσεις, που τροφοδοτούνται μέσω του API. Δεν χρειάζονται διακομιστές!

Εγκατάσταση

Αρχικά, θα ξεκινήσετε εγκαθιστώντας το γωνιακό κλιπ.

npm install -g @ γωνιακό / cli

Ρυθμίστε ένα νέο έργο γωνίας χρησιμοποιώντας τη γωνιακή κλίση. Από προεπιλογή, το γωνιακό-cli χρησιμοποιεί το στυλ CSS, οπότε προσθέτοντας τη σημαία -style = scss λέει στο γωνιακό CLI να χρησιμοποιήσει το SCSS αντί.

ng νέο hello-buttercms-project -style = scss
cd hello-buttercms-project

Εγκαταστήστε συσκευασίες γωνιακού υλικού και γωνιακών υλικών.

npm install --save @ γωνιακό / υλικό @ γωνιακό / cdk
npm install --save @ γωνιακές / κινούμενες εικόνες

Εγκαταστήστε το ButterCMS. Εκτελέστε αυτό στη γραμμή εντολών σας:

npm install buttercms - αποθήκευση

Το βούτυρο μπορεί επίσης να φορτωθεί με CDN: