Уеб Интерфейс

Урок за ъглов 5: Ръководство стъпка по стъпка към първото ви приложение за ъглови 5

Angular е нова версия на рамката AngularJS, разработена от Google. Той идва с пълно пренаписване и различни подобрения, включително оптимизирани компилации и по-бързо време за компилиране. В този урок за Angular 5 ще създадем приложение за бележки от нулата. Ако сте чакали да научите Angular 5, този урок е за вас.

Урок за ъглов 5: Ръководство стъпка по стъпка към първото ви приложение за ъглови 5

Крайният изходен код за приложението може да бъде намерен тук .

Има две основни версии на рамката: AngularJS (версия 1) и Angular (версия 2+). От версия 2, Angular вече не е JavaScript рамка, така че има огромна разлика между тях, което налага фундаментална промяна на името.

Трябва ли да използвам ъглова?

Зависи. Някои разработчици ще ви кажат, че е по-добре да използвате React и да изградите свои собствени компоненти без много допълнителен код. Но и това може да е проблем. Angular е напълно интегрирана рамка, която ви позволява бързо да започнете да работите по вашия проект, без да мислите кои библиотеки да изберете и как да се справите с ежедневните проблеми. Мисля, че Angular е за предния край, както RoR е за задния край.

TypeScript

Ако не знаете TypeScript , не се страхувайте. Вашите познания за JavaScript са достатъчни, за да научите бързо TypeScript и повечето съвременни редактори са доста ефективни за това. Най-предпочитаните опции в днешно време са VSCode и някое от семейството на JetBrains IntelliJ (напр. Уеб буря или, в моя случай, RubyMine ). За мен е за предпочитане да се използва по-интелигентен редактор от vim, тъй като ще ви даде допълнителна информация за евентуални грешки в кода като TypeScript е силно написан . Друго нещо, което трябва да споменем, е, че Angular CLI със своя Webpack се грижи за компилирането на TS към JS, така че не трябва да позволявате на IDE да го компилира вместо вас.

____ тестването тества поведението на група модули или методи.

Ъглов CLI

Angular вече има своя собствена CLI , или command line interface, което ще направи повечето рутинни операции вместо вас. За да започнем да използваме Angular, трябва да го инсталираме. Изисква Node 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 работи уеб сървър за разработчици , което прави приложението ни на следващия безплатен порт (така че да можете да стартирате множество приложения на една и съща машина), с презареждане на живо. Той също така следи за всяка промяна в източника на проекта и прекомпилира всички промени, след което иска от браузъра да презареди отворената страница. Така че, използвайки Angular CLI, ние вече работим в среда за разработка, без да пишем линия на конфигурация или да правим каквото и да било. Но тепърва започваме тук ...

Компоненти

Пустото ни приложение работи. Нека поговорим за състава на приложението в Angular. Ако имате някакъв опит в Разработване на AngularJS , знаете, че имаше контролери, директиви и компоненти, които бяха някак си като директиви, но по-прости, за да ви позволят да надстроите до Angular 2. За тези, които нямат това прекрасно изживяване да се налага да избират между тях и да разберат какво отива къде, не се притеснявайте. В днешно време това са само компоненти. Компонентът е най-основният градивен елемент в ъгловия свят. Нека да разгледаме кода, който е генериран за нас от Angular CLI.

Първо, ето index.html:

GettingStartedNg5

Изглежда, каквато маркиране виждате всеки ден. Но има специален таг, app-root. Как Angular прави тази работа и как можем да знаем какво се случва вътре в нея?

какво е .cpp файл

Нека отворим src/app директория и вижте какво има там. Можете да погледнете ng new изведете формуляр по-рано тук или го отворете в избраната от вас IDE. Ще видите, че имаме app.component.ts там със следващия бит (това може да варира в зависимост от това колко скорошна е вашата версия на 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 и тя се премахва от компилатора в процеса на компилация и се заменя с превода за даден език. Така че маркирахме първото си преведено съобщение, но какво следва? Как всъщност можем да го преведем? За това 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 Нека да видим дали работи:

Сервиране в приложението на руски език

Сега, нека автоматизираме нашия скрипт за компилация, за да можем да направим приложението ни да се изгражда на два езика за всяка производствена компилация и да извикваме съответните директории 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;']

Така че ние използваме многоетапна компилация за нашето приложение с Node-базирано изображение и след това изграждаме сървърния пакет с 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/; } }

Така че ние обслужваме нашето приложение за изграждане от директории en или ru и по подразбиране пренасочваме от основния 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. И работи:

Работи! Този урок за Angular 5 вече е завършен

Имайте предвид /en/ в URL.

Обобщение

Поздравления за завършването на този урок. Вече можете да се присъедините към редиците на други Ъглови разработчици . Току-що създадохте първото си приложение Angular, използвахте Firebase като бекенд и го обслужвахте чрез Nginx в контейнер на Docker.

Както при всяка нова рамка, единственият начин да се справите добре е да продължите да практикувате. Надяваме се, че сте разбрали колко мощен е Angular. Когато сте готови да продължите, Ъглова документация е чудесен ресурс и идва с цял раздел за усъвършенствани техники.

Ако ви се иска да вземете нещо по-напреднало, опитайте Работа с ъглови 4 форми: влагане и валидиране на входа от колегата ApeeScapeer Игор Гешоки.

Разбиране на основите

Защо използваме Angular?

Използваме го за разработване на богат интерфейс от страна на клиента, като приложения на една страница и мобилни приложения. Основното предимство на Angular е получаването на напълно интегрирана уеб рамка, която предлага свои собствени решения за изграждане на компоненти, маршрутизиране и работа с отдалечени API.

Какви са предимствата на използването на Angular?

Основното предимство на използването на Angular е получаването на напълно интегрирана уеб рамка, която предлага свои собствени решения за изграждане на компоненти, маршрутизиране и работа с отдалечени API.

Как работи модулът в Angular?

Модулите отделят обхвата на декларациите в тях. Това ни позволява да изградим множество независими модули за нашето приложение и да използваме мързеливо зареждане за модулите. Целта на модула е да декларира всичко, което се използва в този модул, и да позволи на Angular да направи компилация преди време за него.

Базиран ли е ъгловият MVC?

Angular вече не е MVC рамка, за разлика от AngularJS. Това е рамка, базирана на компоненти. Компонентите играят ролята на контролери тук, но само на много опростено ниво на абстракция.

Какво е RxJS?

RxJS е библиотеката Reactive Extensions за JavaScript, която ни позволява да работим с Observables, които са потоци от събития, които заменят самостоятелните обещания за нас.

Какво е NgRX?

NgRX е модел за управление на състоянията на приложенията. Това е RxJS-захранвана библиотека за управление на състоянието за ъглови приложения. Позволява ни да имаме едно състояние на приложението, за да свързваме всички компоненти заедно и да осигурим предсказуемо и последователно поведение за нашето приложение.