Angular je nova različica ogrodja AngularJS, ki jo je razvil Google. Na voljo je s popolnim prepisovanjem in različnimi izboljšavami, vključno z optimiziranimi gradnjami in hitrejšim časom prevajanja. V tej vadnici za Angular 5 bomo sestavili aplikacijo za zapiske iz nič. Če ste čakali, da se naučite Angular 5, je ta vadnica za vas.

Najdete končno izvorno kodo aplikacije tukaj .

Obstajata dve glavni različici ogrodja: AngularJS (različica 1) in Angular (različica 2+). Od različice 2 Angular ni več ogrodje JavaScript, zato obstaja velika razlika med njimi in zahteva temeljno spremembo imena.

Ali naj uporabljam kotno?

Odvisno. Nekateri razvijalci vam bodo povedali, da je bolje uporabiti React in zgraditi lastne komponente brez veliko dodatne kode. Toda tudi to je lahko problem. Angular je popolnoma integriran okvir, ki vam omogoča, da hitro začnete delati na svojem projektu, ne da bi razmišljali, katere knjižnice izbrati in kako se spoprijeti z vsakodnevnimi težavami. Menim, da je Angular namenjen za čelni del, kot je RoR za zadnji del.

TypeScript

Če ne veste TypeScript , ne bojte se. Vaše znanje JavaScript je dovolj za hitro učenje Typescripta in večina sodobnih urejevalnikov je pri tem zelo učinkovita. Danes so najbolj zaželene možnosti VSCode in katero koli družino JetBrains IntelliJ (npr. Spletna nevihta ali v mojem primeru RubyMine ). Zame je zaželeno, da uporabljate pametnejši urejevalnik kot vim, saj vam bo to dodatno pomagalo pri morebitnih napakah v kodi kot TypeScript je močno natipkan . Treba je omeniti še to, da Angular CLI s svojim Webpackom skrbi za sestavljanje TS v JS, zato ne smete pustiti, da ga IDE sestavi za vas.

za kaj je c dobro

Kotni CLI

Kotni ima zdaj svojega CLI , ali command line interface, ki bo za vas opravil večino rutinskih operacij. Če želite začeti uporabljati Angular, ga moramo namestiti. Zahteva Node 6.9.0 ali novejšo, pa tudi NPM 3 ali novejšo. Njihove namestitve ne bomo pokrivali za vaš sistem, saj je bolje, da sami poiščete posodobljeno dokumentacijo za namestitev. Ko sta oba nameščena, bomo Angular CLI namestili tako, da zaženemo naslednje:

npm install -g @angular/cli

Po uspešni namestitvi lahko ustvarimo nov projekt tako, da zaženemo ng new ukaz:

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.

Po tem lahko zahtevamo, da se naša nova aplikacija začne tako, da zaženete ng serve iz imenika:

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.

Če v tem brskalniku poiščemo povezavo, bo prikazana, kot je prikazano tukaj:

Torej, kaj se pravzaprav dogaja tukaj? Kotni CLI deluje spletni strežnik za razvijalce , ki upodobi našo aplikacijo na naslednjih brezplačnih vratih (tako da lahko na istem računalniku zaženete več aplikacij) z vnovičnim nalaganjem v živo. Prav tako spremlja vsako spremembo v izvoru projekta in znova prevede vse spremembe, nakar brskalnik prosi, da znova naloži odprto stran. Torej z uporabo Angular CLI že delamo v razvojnem okolju, ne da bi napisali konfiguracijsko vrstico ali dejansko karkoli storili. Toda tu šele začenjamo ...

Komponente

Naša prazna aplikacija deluje. Pogovorimo se o sestavi aplikacij v programu Angular. Če imate nekaj izkušenj v Razvoj AngularJS , saj veste, da so bili nekako krmilniki, direktive in komponente všeč direktive, vendar preprostejše, da vam omogočijo nadgradnjo na Angular 2. Za tiste, ki nimajo čudovite izkušnje, ko bi morali izbirati med njimi in ugotoviti, kaj gre kam, ne skrbite. Dandanes so to večinoma samo sestavni deli. Sestavni del je najosnovnejši gradnik sveta Angular. Poglejmo kodo, ki nam jo je ustvaril Angular CLI.

Najprej, tukaj je index.html:

GettingStartedNg5

Videti je, kakšen pribitek vidite vsak dan. Obstaja pa posebna oznaka, app-root. Kako Angular deluje tako in kako lahko vemo, kaj se v njem dogaja?

sprednji razvijalec in oblikovalec

Odprimo src/app imenik in poglejte, kaj je tam. Ogledate si lahko ng new izhodni obrazec prej tukaj ali ga odprite v izbrani IDE. Videli boste, da imamo app.component.ts tam z naslednjim bitom (ta se lahko razlikuje, odvisno od tega, kako nedavna je vaša različica Angular-a):

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

@Component(...) tukaj izgleda kot klic funkcije ... Kaj je to? To je Dekorater TypeScript , o tem pa bomo govorili nekoliko kasneje. Za zdaj poskusimo razumeti, kaj počne, s posredovanimi parametri, kot je selector ki se uporablja za ustvarjanje naše izjave o komponentah. Za nas gre samo za veliko dela in vrnitev izjave o komponentah v delovni obliki. Ni nam treba implementirati dodatne kode, ki bi podpirala katerega koli od parametrov dekoraterja. Z vsem se ukvarja dekorater. Tako ga na splošno imenujemo tovarna metode.

Smo že videli app-root v našem index.html. Evo, kako Angular zna najti komponento, ki ustreza naši oznaki. Očitno je, templateUrl in styleUrls določite, od kod naj Angular prevzame našo oznako in CSS. Obstaja veliko več parametrov za dekorater komponent, nekatere pa bomo uporabili v naši novi aplikaciji, če pa želite popolno referenco, lahko vedno pogledate tukaj .

Poglejmo si oznake te komponente:

Z uporabo tega prevajalniku Angular sporočamo, da je treba vsebino oznake prevesti. To ni direktiva Angular in jo prevajalnik med prevajanjem odstrani in nadomesti s prevodom za dani jezik. Tako smo označili svoje prvo prevedeno sporočilo, a kaj potem? Kako lahko to dejansko prevedemo? Za to nam Angular ponuja ng xi18n ukaz:

ng xi18n cat src/messages.xlf Cards App app/about/about.component.ts 3

Tako imamo prevajalsko datoteko, ki preslika naša sporočila na njihova dejanska mesta v izvorni kodi. Zdaj lahko datoteko damo na Fraza . Lahko pa preprosto dodamo prevod ročno. Za to ustvarimo novo datoteko v src, messages.ru.xlf:

Cards App Картотека

Zdaj lahko aplikacijo uporabljamo - na primer v ruščini - tako, da zaženemo ta ukaz ng serve --aot --locale=ru --i18n-file=src/messages.ru.xlf Poglejmo, ali deluje:

Zdaj pa avtomatizirajmo naš skript za gradnjo, tako da bomo lahko pri vsaki gradnji aplikacije izdelali aplikacijo v dveh jezikih in poklicali ustrezne imenike en ali ru. Za to v scripts dodajte ukaz build-i18n del našega 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

Zdaj pakirajmo našo aplikacijo za proizvodno uporabo in za to uporabimo Docker. Začnimo z 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;']

Torej za aplikacijo uporabljamo večstopenjsko gradnjo s sliko, ki temelji na vozlišču, nato pa strežniški paket izdelamo s sliko na osnovi Nginx. Gulp uporabljamo tudi za stiskanje naših artefaktov kot kotni CLI ne počne več za nas . To se mi zdi čudno, ampak v redu, dodajmo skripte za Gulp in stiskanje.

yarn add [email protected] [email protected] --dev [...] success Saved 2 new dependencies. ├─ [email protected] └─ [email protected] Done in 10.48s.

Lets add gulpfile.js v našem korenu aplikacije:

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}/`)); } });

Zdaj za izdelavo vsebnika potrebujemo samo konfiguracijo Nginx. Dodajmo jo v 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/; } }

Torej služimo naši gradbeni aplikaciji iz imenikov en ali ru in privzeto preusmerjamo s korenskega URL-ja na /en/.

Zdaj lahko svojo aplikacijo izdelamo z uporabo docker build -t app . ukaz:

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

Nato ga lahko z lokalnim računalnikom postrežemo z Dockerjem tako, da zaženemo docker run -it -p 80:80 app. In deluje:

Upoštevajte /en/ v URL.

Povzetek

Čestitamo za dokončanje te vadnice. Zdaj se lahko pridružite vrstam drugih Kotni razvijalci . Pravkar ste ustvarili svojo prvo aplikacijo Angular, uporabili Firebase kot zaledni del in jo postregli prek Nginxa v vsebniku Docker.

Kot pri vsakem novem okviru je tudi tukaj edini način, da nadaljujete z vadbo. Upamo, da ste razumeli, kako močan je Angular. Ko ste pripravljeni za nadaljevanje, se Kotna dokumentacija je čudovit vir in vsebuje celoten razdelek o naprednih tehnikah.

Če vam je všeč kaj bolj naprednega, poskusite Delo s kotnimi 4 obrazci: gnezdenje in preverjanje vnosa avtor kolege ApeeScapeer Igor Geshoki.

primer pogajalske moči kupcev

Razumevanje osnov

Zakaj uporabljamo Angular?

Uporabljamo ga za razvoj bogatih vmesniških odjemalskih aplikacij, kot so enostranske in mobilne aplikacije. Glavna prednost programa Angular je, da dobi popolnoma integriran spletni okvir, ki ponuja lastne rešitve za izdelavo komponent, usmerjanje in delo z oddaljenimi API-ji.

Katere so prednosti uporabe programa Angular?

Glavna prednost uporabe programa Angular je pridobitev popolnoma integriranega spletnega ogrodja, ki ponuja lastne rešitve za izdelavo komponent, usmerjanje in delo z oddaljenimi API-ji.

Kako modul deluje v Angularju?

Moduli ločujejo obseg deklaracij v njih. To nam omogoča, da zgradimo več neodvisnih modulov za našo aplikacijo in uporabimo leno nalaganje modulov. Namen modula je razglasiti vse, kar se uporablja v tem modulu, in Angularju omogočiti, da za to izvede predčasno prevajanje.

Ali temelji kotni MVC?

Angular za razliko od AngularJS ni več okvir MVC. Je okvir, ki temelji na komponentah. Komponente tu prevzamejo vlogo krmilnikov, vendar le na zelo poenostavljeni ravni abstrakcije.

Kaj je RxJS?

RxJS je knjižnica Reactive Extensions za JavaScript, ki nam omogoča delovanje z Observables, ki so tokovi dogodkov, ki za nas nadomeščajo samostojne obljube.

Kaj je NgRX?

NgRX je vzorec za upravljanje stanj aplikacij. Je RxJS-knjižnica za upravljanje stanja za kotne aplikacije. Omogoča nam eno samo stanje aplikacije za povezovanje vseh komponent in zagotavlja predvidljivo in dosledno vedenje naše aplikacije.