Το Angular είναι μια νέα έκδοση του πλαισίου AngularJS, που αναπτύχθηκε από την Google. Έρχεται με μια πλήρη επανεγγραφή και διάφορες βελτιώσεις, συμπεριλαμβανομένων βελτιστοποιημένων εκδόσεων και ταχύτερων χρόνων μεταγλώττισης. Σε αυτό το εκπαιδευτικό πρόγραμμα Angular 5, πρόκειται να δημιουργήσουμε μια εφαρμογή σημειώσεων από το μηδέν. Αν περιμένατε να μάθετε το Angular 5, αυτό το σεμινάριο είναι κατάλληλο για εσάς.
Μπορείτε να βρείτε τον τελικό πηγαίο κώδικα για την εφαρμογή εδώ .
Υπάρχουν δύο κύριες εκδόσεις του πλαισίου: AngularJS (έκδοση 1) και Angular (έκδοση 2+). Από την έκδοση 2, το Angular δεν είναι πλέον πλαίσιο JavaScript, οπότε υπάρχει τεράστια διαφορά μεταξύ τους, που δικαιολογεί μια θεμελιώδη αλλαγή ονόματος.
Πρέπει να χρησιμοποιήσω γωνιακό;
Εξαρτάται. Ορισμένοι προγραμματιστές θα σας πουν ότι είναι καλύτερο να χρησιμοποιήσετε το React και να δημιουργήσετε τα δικά σας στοιχεία χωρίς πολύ επιπλέον κώδικα. Αλλά αυτό μπορεί να είναι επίσης πρόβλημα. Το Angular είναι ένα πλήρως ενσωματωμένο πλαίσιο που σας επιτρέπει να ξεκινήσετε να εργάζεστε γρήγορα στο έργο σας χωρίς να σκεφτείτε ποιες βιβλιοθήκες να επιλέξετε και πώς να αντιμετωπίσετε καθημερινά προβλήματα. Νομίζω ότι το Angular είναι για το front-end, όπως και το RoR για το back-end.
Τύπος γραφής
Αν δεν ξέρετε Τύπος γραφής μην φοβάσαι. Οι γνώσεις σας για το JavaScript είναι αρκετές για να μάθετε γρήγορα το TypeScript, και οι περισσότεροι σύγχρονοι συντάκτες είναι αρκετά αποτελεσματικοί στο να βοηθήσουν με αυτό. Οι πιο προτιμώμενες επιλογές είναι σήμερα Κωδικός VS και οποιαδήποτε από την οικογένεια JetBrains IntelliJ (π.χ. Καταιγίδα Ιστού ή, στην περίπτωσή μου, RubyMine ). Για μένα, είναι προτιμότερο να χρησιμοποιείς έναν πιο έξυπνο επεξεργαστή από το vim, καθώς θα σου δώσει επιπλέον πληροφορίες για τυχόν λάθη στον κώδικα όπως Το TypeScript είναι έντονα δακτυλογραφημένο . Ένα άλλο πράγμα που πρέπει να αναφέρουμε είναι ότι το Angular CLI με το Webpack του φροντίζει να συντάσσει TS σε JS, οπότε δεν πρέπει να αφήσετε το IDE να το μεταγλωττίσει για εσάς.
γραφικό σχέδιο εναντίον καλών τεχνών
Γωνιακό CLI
Το Angular έχει τώρα το δικό του CLI , ή command line interface, που θα κάνουν τις περισσότερες από τις συνήθεις λειτουργίες για εσάς. Για να ξεκινήσετε να χρησιμοποιείτε το Angular, πρέπει να το εγκαταστήσουμε. Απαιτεί κόμβο 6.9.0 ή υψηλότερη καθώς και NPM 3 ή υψηλότερη. Δεν πρόκειται να καλύψουμε την εγκατάστασή τους για το σύστημά σας, καθώς είναι καλύτερα να βρείτε μόνοι σας ενημερωμένη τεκμηρίωση για εγκατάσταση. Μόλις εγκατασταθούν και οι δύο, θα εγκαταστήσουμε το Angular CLI εκτελώντας τα εξής:
npm install -g @angular/cli Αφού η εγκατάσταση είναι επιτυχής, μπορούμε να δημιουργήσουμε ένα νέο έργο εκτελώντας το ng new εντολή:
ng new getting-started-ng5 create getting-started-ng5/README.md (1033 bytes) create getting-started-ng5/.angular-cli.json (1254 bytes) create getting-started-ng5/.editorconfig (245 bytes) create getting-started-ng5/.gitignore (516 bytes) create getting-started-ng5/src/assets/.gitkeep (0 bytes) create getting-started-ng5/src/environments/environment.prod.ts (51 bytes) create getting-started-ng5/src/environments/environment.ts (387 bytes) create getting-started-ng5/src/favicon.ico (5430 bytes) create getting-started-ng5/src/index.html (304 bytes) create getting-started-ng5/src/main.ts (370 bytes) create getting-started-ng5/src/polyfills.ts (2405 bytes) create getting-started-ng5/src/styles.css (80 bytes) create getting-started-ng5/src/test.ts (1085 bytes) create getting-started-ng5/src/tsconfig.app.json (211 bytes) create getting-started-ng5/src/tsconfig.spec.json (304 bytes) create getting-started-ng5/src/typings.d.ts (104 bytes) create getting-started-ng5/e2e/app.e2e-spec.ts (301 bytes) create getting-started-ng5/e2e/app.po.ts (208 bytes) create getting-started-ng5/e2e/tsconfig.e2e.json (235 bytes) create getting-started-ng5/karma.conf.js (923 bytes) create getting-started-ng5/package.json (1324 bytes) create getting-started-ng5/protractor.conf.js (722 bytes) create getting-started-ng5/tsconfig.json (363 bytes) create getting-started-ng5/tslint.json (3040 bytes) create getting-started-ng5/src/app/app.module.ts (316 bytes) create getting-started-ng5/src/app/app.component.css (0 bytes) create getting-started-ng5/src/app/app.component.html (1141 bytes) create getting-started-ng5/src/app/app.component.spec.ts (986 bytes) create getting-started-ng5/src/app/app.component.ts (207 bytes) Installing packages for tooling via yarn. yarn install v1.3.2 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning '@angular/cli > @schematics/ [email protected] ' has incorrect peer dependency '@angular-devkit/ [email protected] '. warning '@angular/cli > @angular-devkit/schematics > @schematics/ [email protected] ' has incorrect peer dependency '@angular-devkit/ [email protected] '. [4/4] Building fresh packages... success Saved lockfile. Done in 44.12s. Installed packages for tooling via yarn. Successfully initialized git. Project 'getting-started-ng5' successfully created. Αφού γίνει αυτό, μπορούμε να ζητήσουμε να ξεκινήσει η νέα μας εφαρμογή τρέχοντας ng serve έξω από τον κατάλογό του:
ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-13T17:48:30.322Z Hash: d147075480d038711dea Time: 7425ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 20.8 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 34.1 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 7.14 MB [initial] [rendered] webpack: Compiled successfully. Εάν περιηγηθούμε στο πρόγραμμα περιήγησής μας σε αυτόν τον σύνδεσμο, θα εμφανίζεται όπως φαίνεται εδώ:
Τι συμβαίνει λοιπόν εδώ; Γωνιακή CLI τρέχει διακομιστής webpack dev , που καθιστά την εφαρμογή μας στην επόμενη δωρεάν θύρα (ώστε να μπορείτε να εκτελείτε πολλές εφαρμογές στον ίδιο υπολογιστή), με ζωντανή επαναφόρτωση. Παρακολουθεί επίσης κάθε αλλαγή στην πηγή του έργου και μεταγλωττίζει όλες τις αλλαγές, μετά τις οποίες ζητά από το πρόγραμμα περιήγησης να φορτώσει ξανά την ανοιχτή σελίδα. Έτσι, χρησιμοποιώντας το Angular CLI, εργαζόμαστε ήδη σε ένα περιβάλλον ανάπτυξης χωρίς να γράφουμε μια γραμμή διαμόρφωσης ή να κάνουμε κάτι. Απλώς αρχίζουμε εδώ…
Συστατικά
Εκτελείται η κενή εφαρμογή μας. Ας μιλήσουμε για τη σύνθεση εφαρμογών στο Angular. Εάν έχετε κάποιο υπόβαθρο στο Ανάπτυξη AngularJS , γνωρίζετε ότι υπήρχαν ελεγκτές, οδηγίες και στοιχεία που ήταν κάπως σαν οδηγίες αλλά απλούστερες, για να μπορείτε να κάνετε αναβάθμιση σε Angular 2. Για όσους δεν έχουν αυτήν την υπέροχη εμπειρία να πρέπει να διαλέξετε μεταξύ τους και να καταλάβετε τι πηγαίνει πού, μην ανησυχείτε. Είναι κυρίως απλά συστατικά στις μέρες μας. Το στοιχείο είναι το πιο βασικό δομικό στοιχείο στον γωνιακό κόσμο. Ας δούμε τον κώδικα που δημιουργήθηκε για εμάς από το Angular CLI.
Πρώτα, εδώ είναι index.html:
GettingStartedNg5 Μοιάζει με το είδος σήμανσης που βλέπετε κάθε μέρα. Υπάρχει όμως μια ειδική ετικέτα, app-root. Πώς λειτουργεί το Angular και πώς μπορούμε να γνωρίζουμε τι συμβαίνει μέσα του;
c corp εναντίον s corp
Ας ανοίξουμε το src/app κατάλογο και δείτε τι υπάρχει. Μπορείτε να δείτε το ng new φόρμα εξόδου νωρίτερα εδώ ή ανοίξτε την στο IDE που έχετε επιλέξει. Θα δείτε ότι έχουμε app.component.ts εκεί με το επόμενο bit (αυτό μπορεί να διαφέρει ανάλογα με το πόσο πρόσφατη είναι η έκδοση του Angular):
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } @Component(...) εδώ μοιάζει με κλήση λειτουργίας… Τι είναι αυτό; Αυτό είναι Διακοσμητής TypeScript , και θα το συζητήσουμε λίγο αργότερα. Προς το παρόν, ας προσπαθήσουμε να καταλάβουμε τι κάνει, με παραμέτρους που έχουν περάσει όπως selector χρησιμοποιείται για τη δημιουργία της δήλωσης συστατικών στοιχείων. Απλώς δουλεύει πολύ για εμάς και επιστρέφει τη δήλωση συστατικών με τη μορφή λειτουργίας της. Δεν χρειάζεται να εφαρμόσουμε επιπλέον κώδικα για να υποστηρίξουμε καμία από τις παραμέτρους του διακοσμητή. Όλα τα χειρίζεται ο διακοσμητής. Έτσι, γενικά, το ονομάζουμε εργοστάσιο μεθόδους.
Είδαμε ήδη app-root στο index.html μας. Δείτε πώς η Angular ξέρει πώς να βρει το στοιχείο που αντιστοιχεί στην ετικέτα μας. Προφανώς, templateUrl και styleUrls καθορίστε από πού θα πρέπει να πάρει η σήμανση Angular και CSS. Υπάρχουν πολύ περισσότερες παραμέτρους για το διακοσμητικό στοιχείο και θα χρησιμοποιήσουμε μερικές από αυτές στη νέα μας εφαρμογή, αλλά αν θέλετε μια πλήρη αναφορά, μπορείτε πάντα να κοιτάξετε εδώ .
Ας δούμε τη σήμανση αυτού του στοιχείου:
Χρησιμοποιώντας αυτό, λέμε στον μεταγλωττιστή Angular ότι τα περιεχόμενα της ετικέτας πρέπει να μεταφραστούν. Δεν είναι η γωνιακή οδηγία και αφαιρείται από τον μεταγλωττιστή κατά τη διαδικασία σύνταξης και αντικαθίσταται από τη μετάφραση για μια δεδομένη γλώσσα. Έτσι σημαδέψαμε το πρώτο μας μεταφρασμένο μήνυμα, αλλά τι θα ακολουθήσει; Πώς μπορούμε να το μεταφράσουμε αυτό; Για αυτό, η Angular μας προσφέρει το ng xi18n εντολή:
ng xi18n cat src/messages.xlf Cards App app/about/about.component.ts 3 Έχουμε λοιπόν ένα αρχείο μετάφρασης που χαρτογραφεί τα μηνύματά μας στις πραγματικές τους θέσεις στον πηγαίο κώδικα. Τώρα, μπορούμε να δώσουμε το αρχείο στο Φράση . Ή, μπορούμε απλά να προσθέσουμε τη μετάφρασή μας με μη αυτόματο τρόπο. Για αυτό, ας δημιουργήσουμε ένα νέο αρχείο στο src, messages.ru.xlf:
Cards App Картотека Τώρα μπορούμε να εξυπηρετήσουμε την εφαρμογή μας - στα ρωσικά, για παράδειγμα - εκτελώντας αυτήν την εντολή ng serve --aot --locale=ru --i18n-file=src/messages.ru.xlf. Ας δούμε αν λειτουργεί:
Τώρα, ας αυτοματοποιήσουμε το σενάριο build μας, ώστε να κάνουμε την εφαρμογή μας να δημιουργείται σε δύο γλώσσες σε κάθε έκδοση παραγωγής και να καλούμε τους αντίστοιχους καταλόγους en ή ru. Για αυτό ας προσθέσουμε την εντολή build-i18n στο scripts ενότητα του package.json:
'build-i18n': 'for lang in en ru; do yarn run ng build --output-path=dist/$lang --aot -prod --bh /$lang/ --i18n-file=src/messages.$lang.xlf --i18n-format=xlf --locale=$lang --missing-translation=warning; done' Λιμενεργάτης
Τώρα ας συσκευάσουμε την εφαρμογή μας για χρήση στην παραγωγή και χρησιμοποιήστε το Docker για αυτό. Ας ξεκινήσουμε με Dockerfile:
#### STAGE 1: Build ### ## We label our stage as 'builder' FROM node:8.6-alpine as builder ENV APP_PATH /app MAINTAINER Sergey Moiseev < [email protected] > COPY package.json . COPY yarn.lock . ### Storing node modules on a separate layer will prevent unnecessary npm installs at each build RUN yarn install --production && yarn global add gulp && mkdir $APP_PATH && cp -R ./node_modules .$APP_PATH WORKDIR $APP_PATH COPY . . ### Build the angular app in production mode and store the artifacts in dist folder RUN yarn remove node-sass && yarn add node-sass && yarn run build-i18n && yarn run gulp compress #### STAGE 2: Setup ### FROM nginx:1.13.3-alpine ENV APP_PATH /app MAINTAINER Sergey Moiseev < [email protected] > ### Copy our default nginx config RUN rm -rf /etc/nginx/conf.d/* COPY nginx/default.conf /etc/nginx/conf.d/ ### Remove default nginx website RUN rm -rf /usr/share/nginx/html/* EXPOSE 80 ### From 'builder' stage copy over the artifacts in dist folder to default nginx public folder COPY --from=builder $APP_PATH/dist/ /usr/share/nginx/html/ CMD ['nginx', '-g', 'daemon off;'] Χρησιμοποιούμε λοιπόν μια έκδοση πολλαπλών σταδίων για την εφαρμογή μας με μια εικόνα που βασίζεται σε κόμβο και στη συνέχεια δημιουργούμε το πακέτο διακομιστή με μια εικόνα που βασίζεται σε Nginx. Χρησιμοποιούμε επίσης το Gulp για να συμπιέσουμε τα αντικείμενα μας, ως Angular CLI δεν το κάνει πλέον για εμάς . Το βρίσκω περίεργο, αλλά εντάξει, ας προσθέσουμε σενάρια Gulp και συμπίεσης.
yarn add [email protected] [email protected] --dev [...] success Saved 2 new dependencies. ├─ [email protected] └─ [email protected] Done in 10.48s. Ας προσθέσουμε gulpfile.js στη ρίζα της εφαρμογής μας:
const gulp = require('gulp'); const zip = require('gulp-gzip'); gulp.task('compress', function() { for (var lang in ['en', 'ru']) { gulp.src([`./dist/${lang}/*.js`, `./dist/${lang}/*.css`]) .pipe(zip()) .pipe(gulp.dest(`./dist/${lang}/`)); } }); Τώρα χρειαζόμαστε μόνο τη διαμόρφωση Nginx για να χτίσουμε το κοντέινερ μας. Ας το προσθέσουμε στο nginx/default.conf:
server { listen 80; sendfile on; default_type application/octet-stream; client_max_body_size 16m; gzip on; gzip_disable 'msie6'; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.0; # This allow us to gzip on nginx2nginx upstream. gzip_min_length 256; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon; root /usr/share/nginx/html; location ~* .(js|css)$ { gzip_static on; expires max; add_header Cache-Control public; } location ~ ^/(en|ru)/ { try_files $uri $uri/ /index.html =404; } location = / { return 301 /en/; } } Επομένως, εξυπηρετούμε την εφαρμογή build από καταλόγους en ή ru και από προεπιλογή, ανακατευθύνουμε από το root URL στο /en/.
Τώρα μπορούμε να δημιουργήσουμε την εφαρμογή μας χρησιμοποιώντας το docker build -t app . εντολή:
docker build -t app . Sending build context to Docker daemon 347MB Step 1/17 : FROM node:8.6-alpine as builder ---> b7e15c83cdaf Step 2/17 : ENV APP_PATH /app [...] Removing intermediate container 1ef1d5b8d86b Successfully built db57c0948f1e Successfully tagged app:latest Και μετά μπορούμε να το εξυπηρετήσουμε χρησιμοποιώντας το Docker από ένα τοπικό μηχάνημα εκτελώντας docker run -it -p 80:80 app. Και λειτουργεί:
Προσοχή στο /en/ στη διεύθυνση URL.
Περίληψη
Συγχαρητήρια για την ολοκλήρωση αυτού του σεμιναρίου. Τώρα μπορείτε να συμμετάσχετε στις τάξεις των άλλων Γωνιακοί προγραμματιστές . Μόλις δημιουργήσατε την πρώτη σας γωνιακή εφαρμογή, χρησιμοποιήσατε το Firebase ως backend και την εξυπηρετήσατε μέσω του Nginx σε ένα κοντέινερ Docker.
Όπως και με οποιοδήποτε νέο πλαίσιο, ο μόνος τρόπος να γίνεις καλός είναι να συνεχίσεις να εξασκείς. Ας ελπίσουμε ότι έχετε καταλάβει πόσο ισχυρή είναι η γωνιακή. Όταν είστε έτοιμοι να προχωρήσετε, το Γωνιακή τεκμηρίωση είναι ένας υπέροχος πόρος και συνοδεύεται από μια ολόκληρη ενότητα για τις προηγμένες τεχνικές.
Εάν θέλετε να πάρετε κάτι πιο προηγμένο, δοκιμάστε Εργασία με γωνιακές φόρμες 4: Επικύρωση ένθεσης και εισαγωγής από τους συναδέλφους ApeeScapeer Igor Geshoki.
Κατανόηση των βασικών
Γιατί χρησιμοποιούμε το Angular;
Το χρησιμοποιούμε για να αναπτύξουμε εφαρμογές πλούσιας διεπαφής από τον πελάτη, όπως εφαρμογές μιας σελίδας και εφαρμογές για κινητά. Το κύριο πλεονέκτημα του Angular είναι να αποκτήσει ένα πλήρως ενσωματωμένο πλαίσιο ιστού που προσφέρει τις δικές του λύσεις in-box για κατασκευή στοιχείων, δρομολόγηση και εργασία με απομακρυσμένα API.
Ποια είναι τα πλεονεκτήματα της χρήσης του Angular;
Το κύριο πλεονέκτημα της χρήσης του Angular είναι η απόκτηση ενός πλήρως ενσωματωμένου διαδικτυακού πλαισίου που προσφέρει τις δικές του λύσεις in-box για κατασκευή στοιχείων, δρομολόγηση και εργασία με απομακρυσμένα API
ποια γλώσσα χρησιμοποιεί το linux
Πώς λειτουργεί μια ενότητα στο Angular;
Οι ενότητες διαχωρίζουν το πεδίο των δηλώσεων σε αυτές. Αυτό μας επιτρέπει να δημιουργήσουμε πολλαπλές ανεξάρτητες ενότητες για την εφαρμογή μας και να χρησιμοποιήσουμε τεμπέλης φόρτωση για τις ενότητες. Ο σκοπός μιας ενότητας είναι να δηλώσει όλα όσα χρησιμοποιούνται σε αυτήν την ενότητα και να επιτρέψει στην Angular να κάνει εκ των προτέρων σύνταξη για αυτήν.
Βασίζεται το Angular MVC;
Το Angular δεν είναι πλέον πλαίσιο MVC, σε αντίθεση με το AngularJS. Είναι ένα πλαίσιο βασισμένο σε συστατικά. Τα στοιχεία παίρνουν το ρόλο των ελεγκτών εδώ, αλλά μόνο σε ένα πολύ απλοποιημένο επίπεδο αφαίρεσης.
Τι είναι το RxJS;
Το RxJS είναι η βιβλιοθήκη Reactive Extensions για JavaScript, η οποία μας επιτρέπει να λειτουργούμε με Observables, οι οποίες είναι ροές γεγονότων που αντικαθιστούν αυτόνομες υποσχέσεις για εμάς.
Τι είναι το NgRX;
Το NgRX είναι ένα μοτίβο για τη διαχείριση καταστάσεων εφαρμογής. Είναι μια βιβλιοθήκη διαχείρισης κατάστασης που υποστηρίζεται από RxJS για γωνιακές εφαρμογές. Μας επιτρέπει να έχουμε μια ενιαία κατάσταση εφαρμογής για τη σύνδεση όλων των στοιχείων μαζί και να παρέχουμε προβλέψιμη και συνεπή συμπεριφορά για την εφαρμογή μας.
