Πώς να οικοδομήσουμε μια ιστοσελίδα πλήρους σελίδας στο γωνιακό

Sep 12, 2025

πως να

Σελίδα 1 από 4:

Σελίδα 1

Σελίδα 1
Σελίδα 2
Σελίδα 3
Σελίδα 4

Η τελευταία έκδοση του γωνιακού συχνά θεωρείται ως πλαίσιο που προέρχεται από την πλευρά της επιχείρησης των κομματιών και γενικά απολαμβάνει την εταιρεία των επιχειρηματικών εφαρμογών. Ενώ είναι αλήθεια ότι η γωνιακή έχει πράγματι εξελιχθεί από ένα πλαίσιο σε μια πλατφόρμα που υποστηρίζει όλα τα είδη εφαρμογών, υπάρχουν πολλά πραγματικά καταπληκτικά χαρακτηριστικά που υπάρχουν για τους προγραμματιστές για να δημιουργήσουν εντυπωσιακές εμπειρίες για τους χρήστες τους.

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

Σε αυτό το σεμινάριο, πρόκειται να επικεντρωθούμε κυρίως στα γωνιακά κομμάτια και να μην μιλάμε για τα μέρη HTML και CSS που δεν σχετίζονται άμεσα με την κατασκευή της εφαρμογής. Κατεβάστε το Κωδικός πηγής να ακολουθήσει μαζί. Δεν πωλείται σε γωνιακό; Βρείτε το τέλειο οικοδόμος ιστότοπου Εδώ (και οι καλύτερες τιμές παρακάτω).

01. Δημιουργήστε ένα έργο

Υπάρχουν πολλά κινούμενα μέρη που πηγαίνουν σε μια μη τετριμμένη εφαρμογή ιστού. Τι εξαρτήσεις έχει η αίτησή σας; Πώς θα το εκτελέσετε τοπικά; Πώς θα το δοκιμάσετε; Πώς πρόκειται να συνδέσετε τα περιουσιακά σας στοιχεία

Ευτυχώς, η πολύπλοκη διαδικασία σύνθεσης αυτών των στοιχείων αντιμετωπίζεται από το βλέμμα, στο @ γωνιακό / cli . Σε λίγες εντολές από το τερματικό μας, μπορούμε να έχουμε μια πλήρως λειτουργική γωνιακή εφαρμογή έτοιμη για να συνεργαστούμε.

Το πρώτο βήμα για τη συνεργασία με το CLI είναι να το εγκαταστήσετε. Για αυτό, χρησιμοποιήστε την παρακάτω εντολή:

npm install -g @angular/cli

Μόλις εγκατασταθεί η CLI, από τη γραμμή εντολών μπορούμε να πλοηγήσουμε στον φάκελο που θέλουμε να εγκαταστήσουμε το έργο μας μέσα. Από εκεί θα τρέξουμε ng νέο με το όνομα του έργου μας. Αυτό θα δημιουργήσει ένα φάκελο με το ίδιο όνομα, το οποίο θα περιηγηθείτε σε μόλις ολοκληρωθεί το έργο.

 CD & LT; Το φάκελο σας-έργων-έργων & GT;
ng Νέες γωνιακές-animations-site
CD γωνιακές-animations-site

Και αυτό είναι! Η γωνιακή μας εφαρμογή είναι έτοιμη να τρέξει. Μπορείτε είτε να ξεκινήσετε την αίτησή σας με npm start ή ng σερβίρετε . Προτιμώ να χρησιμοποιήσω npm start Επειδή είναι πιο συμβατική και σας επιτρέπει να προσθέσω επιπλέον εντολές. Στη συνέχεια, μπορείτε να πλοηγηθείτε στο http: // localhost: 4200 για να δείτε την εφαρμογή της εφαρμογής.

The stock Angular CLI application running — Η εφαρμογή της γωνιακής CLI που εκτελείται

02. Συμπεριλάβετε κινούμενα σχέδια και γωνιακό υλικό

Επειδή μας αρέσουν τα όμορφα πράγματα, θα κάνουμε μερικές μικρές προσθήκες στην αίτησή μας προσθέτοντας και εγκαθιστώντας το @ γωνιακές / κινούμενες εικόνες και @ γωνιακό / υλικό Πακέτα:

 NPM I --SAVE @ Γωνιακό / Υλικό @ γωνιακά / κινούμενα σχέδια

Μπορούμε να αφήσουμε τη γωνιακή να μάθουμε για αυτές τις εξαρτήσεις, προσθέτοντας τα στο δικό μας app.module.ts αρχείο. Θα χρησιμοποιήσουμε το κουμπί γωνιακού υλικού, της κάρτας και της γραμμής εργαλείων, έτσι θα εισαγάγουμε τις αντίστοιχες ενότητες τους καθώς και το Browsereasmodule .

 // app / app.module.ts.ts
...
Εισαγωγή {mdbuttonmodule, mdcardmodule, mdtoolbamodule} από '@ γωνιακό / υλικό'.
Εισαγωγή {browseranimationsmodule} από το '@ γωνιακό / πλατφόρμα-πρόγραμμα περιήγησης / κινούμενα σχέδια'.

Μπορούμε στη συνέχεια να τα προσθέσουμε στο εισαγωγές πίνακα με μας Ngmodule δήλωση.

 // app / app.module.ts.ts
...
Εισαγωγή {mdbuttonmodule, mdcardmodule, mdtoolbamodule} από '@ γωνιακό / υλικό'.
Εισαγωγή {browseranimationsmodule} από '@ γωνιακό / πλατφόρμα-πρόγραμμα περιήγησης / κινούμενα σχέδια'.

@Ngmodule ({
  ...
  Εισαγωγές: [
    ...
    BrowserAdiationModule,
    MdToolbododule,
    Mdbuttonmodule,
    Mdcardmodule
  ],
  ...
})

Και για μια τελική προσθήκη, θα εισαγάγει το ροζ θέμα Indigo στο δικό μας Styles.css αρχείο.

 / * Styles.css * /
@ import '~@angular/material/prebuilt-themes/indigo-pink.css'.

Μέχρι το σημείο αυτό, έχουμε επικεντρωθεί εξ ολοκλήρου στη δημιουργία της εφαρμογής, ώστε να μπορέσουμε να αρχίσουμε να αναπτύσσουμε. Αυτές οι εντολές μπορεί να αισθάνονται καταρράκτες αρχικά, αλλά μόλις το έχετε συνηθίσει θα το βρείτε μόνο λίγα λεπτά για να έχετε ένα πλήρως ενσωματωμένο περιβάλλον με όλα τα κουδούνια και τις σφυρίχτρες που πρέπει να οικοδομήσουμε μια γλυκιά ιστοσελίδα.

03. Εισάγετε ένα στοιχείο σελίδας

Επειδή χτίζουμε έναν ιστότοπο με γωνιακό, θα χρειαστεί να εισαγάγουμε έναν μηχανισμό για την εμφάνιση των σελίδων μας. Σε γωνιακό, το ατομικό δομικό στοιχείο μιας εφαρμογής είναι το στοιχείο. Με την αρχική εφαρμογή μας με καλά καθορισμένα, ενθυλακωμένα εξαρτήματα, είμαστε σε θέση να επαναχρησιμοποιούμε εύκολα τη λειτουργικότητα, καθώς και να συνθέσετε νέα λειτουργικότητα, εισάγοντας νέα εξαρτήματα.

Τα πλοία CLI με την υποστήριξη της γεννήτριας ακριβώς έξω από το κουτί, και αυτό είναι που χρησιμοποιούμε για να δημιουργήσουμε το στοιχείο σελίδας μας. Μπορούμε να δημιουργήσουμε το στοιχείο σελίδας μας εκτελώντας την παρακάτω εντολή (το σολ η εντολή είναι στενογραφία παράγω ).

 NG G Page

Σημείωση: Συστήνω να πάρετε το χρόνο να μάθετε πώς να χτίσετε τα κύρια γωνιακά κομμάτια με το χέρι μέχρι να δημιουργήσετε τη μνήμη των μυών σας. Μόνο όταν καταλαβαίνετε πραγματικά τι συμβαίνει ότι θα πρέπει να βελτιστοποιήσετε τη ροή εργασίας σας με γεννήτριες.

Η CLI θα δημιουργήσει ένα φάκελο στο src κατάλογος που ονομάζεται σελίδα Με ένα αρχείο HTML, CSS και Forge, καθώς και αρχείο Spec. Στο δικό μας σελίδα.comPonent.ts Αρχείο, έχουμε τη βασική δομή ενός συστατικού. Το στοιχείο μας αναφέρει τα πρότυπα και τα αρχεία στυλ στο @Συστατικό Μεταδεδομένα και έχει μας κατασκευαστής και ngonit μεθόδους stubbed έξω.

 // Εφαρμογή / σελίδα / σελίδα.gronent.ts

Εισαγωγή {Component, OnItit} από το '@ γωνιακό / πυρήνα'.

@Συστατικό({
  Selector: 'app-page',
  temlateurl:'/page.component.html ',
  STYLEURLS: ['./PAGE.CUPONENT.CSS']})
Εξαγωγές Κατηγορία PageCemponent Εφαρμογές oninit {

  κατασκευαστής () {}

  ngoninit () {}
}

Μαζί με τη δημιουργία του στοιχείου μας, η CLI θα τροποποιήσει επίσης μας app.module.ts να συμπεριλάβει ένα Πανοπλία την είσοδο στο δικό μας δηλώσεις πίνακας. Αυτό σημαίνει ότι η συνιστώσα της σελίδας είναι τώρα διαθέσιμη σε ολόκληρη την ενότητα.

 // app / app.module.ts.ts

@Ngmodule ({
  Δηλώσεις: [
    Appmponent,
    Πανοπλία
  ],
  ...
})

Ως έλεγχος της υγιεινής, μπορούμε να hop στο δικό μας app.comPonent.html αρχείο και προσθήκη & lt; app-page & gt; / app-page & gt; στον πάτο. Παρατηρήστε ότι η ετικέτα στοιχείων που χρησιμοποιούμε αντιστοιχεί στο εκλέκτορας ιδιοκτησία που ορίζονται στο δικό μας @Συστατικό Μεταδεδομένα.

 & lt; - app / app.component.html - & gt;

& lt; h1 & gt;
  {{τίτλος}}
& lt; / h1 & gt;

& lt; app-page & gt; / app-page & gt;

The page component rendering in our main application component — Η συνιστώσα σελίδας απόδοση στην κύρια συνιστώσα της εφαρμογής μας

04. Δημιουργήστε τη συνιστώσα της σελίδας σας

Με τη συνιστώσα της σελίδας μας ζωντανή και καλά, μπορούμε να το χτίσουμε έτσι ώστε να αρχίσει να μοιάζει με μια πραγματική ιστοσελίδα. Θα εισαγάγουμε ένα σελίδα αντικείμενο τίτλος , υπότιτλος , περιεχόμενο , και εικόνα ιδιότητες.

 // Εφαρμογή / σελίδα / σελίδα.gronent.ts

Εξαγωγές Κατηγορία PageCemponent Εφαρμογές oninit {
  Σελίδα = {
    Τίτλος: 'Αρχική σελίδα',
    Υπότιτλος: «Καλώς ήλθατε στο σπίτι!»,
    Περιεχόμενο: «Κάποια περιεχόμενο στο σπίτι»,
    Εικόνα: «Περιουσιακά στοιχεία / bg00.jpg»
  };

  κατασκευαστής () {}

  ngoninit () {}
}

The styled page component with Angular Material — Το συστατικό στυλ με γωνιακό υλικό

Θα ενημερώσουμε το πρότυπό μας για να συνδεθούμε σελίδα αντικείμενο. Υπάρχει ένα στοιχείο εικόνας που τελικά θα αυξηθεί για να γεμίσει ολόκληρο το παράθυρο του προγράμματος περιήγησης. Θα προσθέσουμε επίσης ένα εξάρτημα γωνιακής κάρτας υλικού που θα δεσμευτούμε το υπόλοιπο μας σελίδα διαμαρτύρομαι.

 & lt; - app / σελίδα / σελίδα.component.html - & gt;
& lt; img class = "fullbg" [src] = "page.image" & gt;

& lt; md-card & gt;
& lt; md-card-header & gt;
& LT; MD-Card-Title & GT; H1 & GT;
& lt; md-card-subtitle & gt; {{page.subtitle}} & lt; / md-card-subtitle & gt;
& lt; / md-card-header & gt;
& lt; md-card-content & gt;
{{σελίδα.Content}}
& lt; / md-card-content & gt;
& lt; / md-card & gt;

Η συνιστώσα της σελίδας αρχίζει να φαίνεται πολύ καλύτερα! Το επόμενο βήμα μας είναι να προσθέσετε την ικανότητα να έχετε πολλαπλές σελίδες και να πλοηγηθείτε μεταξύ τους.

Σελίδα 2: Πώς να δημιουργήσετε πολλές σελίδες

Τρέχουσα σελίδα: Σελίδα 1

Επόμενη σελίδα Σελίδα 2

Πώς να οικοδομήσουμε μια ιστοσελίδα πλήρους σελίδας στο γωνιακό

01. Δημιουργήστε ένα έργο

02. Συμπεριλάβετε κινούμενα σχέδια και γωνιακό υλικό

03. Εισάγετε ένα στοιχείο σελίδας

04. Δημιουργήστε τη συνιστώσα της σελίδας σας

πως να - Τα πιο δημοφιλή άρθρα

Φωτογραφία πορτρέτου: Πώς να πάρει τέλεια πορτρέτα

Πώς να δημιουργήσετε τρισδιάστατες σαρώσεις με την καταγραφή της πραγματικότητας

Πάρτε το κεφάλι σας να αντιδράσει με αυτούς τους πέντε παράγοντες

4 βήματα για καλύτερη VDM με ZBRUSH

Πώς να σχεδιάσετε ένα τοπίο με παστέλ

Δημιουργήστε 3D ρούχα με ρεαλιστικές πτυχές και πτυχές

Ανακαλύψτε το στυλ και την ουσία της τυπογραφίας

Σχεδιάστε ακριβή οστά και μυς

Κατηγορίες