Содержание
- 01. Запустите проверку версии
- 02. Установите Angular
- 03. Создайте каркас проекта.
- 04. Ремень дифференциальной нагрузки.
- 05. ... и посмотреть результаты
- 06. Создать веб-воркера.
- 07. Изучите код
- 08. Установка строительных лесов.
- 09. Не беспокойтесь об отсутствии конструктора.
- 10. Выполните небольшой запуск компиляции.
- 11. ... и найдите результат
- 12. Приступайте к работе.
- 13. Исследуйте Айви
- 14. Попробуйте модифицированную обработку ng.
- 15. Наслаждайтесь улучшенной миграцией
- 16. Изучите управление рабочим пространством
- 17. Ускорьте процесс.
- 18. Избегайте ходячих мертвецов
- 19. Посмотрите журнал изменений.
Angular 8 - это последняя версия Angular от Google - одного из лучших фреймворков JavaScript. В этой статье мы рассмотрим, что особенного в Angular 8, и покажем вам, с чего начать. Во-первых, краткий обзор того, что происходило с фреймворком до сих пор.
Введение Angular привело к смене парадигмы в веб-разработке: в то время как большинство библиотек ограничивалось предоставлением поддержки разработчикам с относительно ограниченным влиянием на архитектуру, команда разработчиков Angular пошла в другом направлении. Их продукт заставляет вас использовать определенную архитектуру с отклонениями от сложных до коммерчески бессмысленных. Фактически, большая часть кода Angular проходит через относительно сложную цепочку инструментов транспиляции, прежде чем попадет в браузер.
Благодаря огромному успеху Angular как внутри, так и за пределами Google Inc, разработка в целом стабилизировалась. Это означает, что критических изменений кода немного, а полугодовые обновления направлены на адаптацию фреймворка к изменениям в ландшафте просмотра веб-страниц.
В случае Angular 8, например, развернут новый компилятор JavaScript (хотя пока еще экспериментально). Он оптимизирует сгенерированный код совместимости, чтобы он был значительно меньше и быстрее за счет старых браузеров. Кроме того, интегрирована поддержка Web Worker для увеличения возможностей обработки Angular. Короче говоря, здесь есть на что посмотреть - так что приступим.
Если вы предпочитаете создавать сайт без кода, попробуйте один из этих простых конструкторов сайтов. И чтобы все работало еще более гладко, настройте свой веб-хостинг правильно.
01. Запустите проверку версии
Набор инструментов Angular находится внутри среды NodeJS. На момент написания этой статьи требуется Node.js 10.9 или выше - если вы обнаружите, что используете более старую версию, посетите веб-сайт Node.js и получите обновление. Приведенный ниже код показывает статус версии на этом компьютере.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Установите Angular
Набор инструментов Angular находится в утилите командной строки с именем нг. Его можно установить через всем известный NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng версия
Будьте внимательны, отвечая на вопрос, показанный на изображении ниже.
Получить информацию о версии из инструмента довольно сложно - уникален не только синтаксис, но и подробный вывод (см. Изображение ниже).
03. Создайте каркас проекта.
нг создает для нас строительные леса Angular. На следующих этапах мы хотим добавить маршрутизацию и использовать Sass для транспиляции CSS. Если по какой-либо причине развертывание завершится неудачно, очистите рабочий каталог и перезапустите нг с правами суперпользователя.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng новый workertest
04. Ремень дифференциальной нагрузки.
Новая версия Angular оптимизирует код обратной совместимости для уменьшения воздействия - файл с именем список браузеров позволяет вам решить, какие браузеры будут поддерживаться. Открыть список браузеров и удалите слово нет перед IE 9 до IE11.
. . . > 0,5% последние 2 версии Firefox ESR не мертв IE 9-11 # Для поддержки IE 9-11 удалите 'not'.
05. ... и посмотреть результаты
Закажите компиляцию проекта, перейдите в папку распространения и удалите ненужные файлы карты.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Вызвать дерево, чтобы увидеть результаты - нг создает несколько версий различных файлов кода (см. изображение ниже).
06. Создать веб-воркера.
Веб-воркеры позволяют JavaScript выйти на последний рубеж собственных приложений: массово-параллельную обработку задач. С Angular 8 веб-воркер может быть создан прямо с удобной нг утилита командной строки.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generate web-worker myworker СОЗДАТЬ tsconfig.worker.json (212 байт) СОЗДАТЬ src / app / myworker.worker.ts (157 байт) ОБНОВИТЬ tsconfig.app.json (236 байт) ) ОБНОВЛЕНИЕ angular.json (3640 байт)
07. Изучите код
нгНа первый взгляд результаты могут показаться устрашающими. Открытие файла SRC / приложение / myworker.worker.ts в редакторе кода по выбору показывает код, который вы должны хорошо знать из WebWorker Технические характеристики. В принципе, воркер получает сообщения и обрабатывает их по мере необходимости.
/// ссылка lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
08. Установка строительных лесов.
Angular-приложения состоят из компонентов. Отключить нашего веб-воркера лучше всего внутри AppComponent, который расширен, чтобы включить слушателя для OnInit мероприятие. На данный момент он будет выдавать только информацию о статусе.
импортировать {Component, OnInit} из ’@ angular / core’; @Component ({...}) Класс экспорта AppComponent реализует OnInit {title = ’workertest’; ngOnInit () {console.log ("Компонент приложения: OnInit ()"); }}
09. Не беспокойтесь об отсутствии конструктора.
Опытные разработчики TypeScript задаются вопросом, почему наш код не использует конструктор, предоставляемый языком программирования. Причина в том, что ngOnInit - это событие жизненного цикла, которое запускается всякий раз, когда происходит событие инициализации - его не нужно связывать с вызовом класса.
10. Выполните небольшой запуск компиляции.
На данный момент программа готова к запуску. Мы выполним его с сервера внутри нг, который можно вызвать с помощью команды serve. Изящный аспект этого подхода заключается в том, что программа обнаруживает изменения и перекомпилирует проект на лету.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Взгляните на рисунок, чтобы увидеть это в действии на изображении ниже.
11. ... и найдите результат
нг подавать помещает адрес своего локального веб-сервера, который обычно http: // локальный: 4200 /. Откройте веб-страницу и откройте инструменты разработчика, чтобы увидеть вывод статуса. Имейте в виду, что console.log выводит данные в консоль браузера и оставляет консоль экземпляра NodeJS нетронутой.
12. Приступайте к работе.
В этот момент мы создаем экземпляр рабочего и передаем ему сообщение. Затем его результаты отображаются в консоли браузера.
if (typeof Worker! == ’undefined’) {// Создаем новый const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’страница получила сообщение: $ {data }’); }; worker.postMessage ('привет'); } else {console.log («Работник не поддерживает»); }
13. Исследуйте Айви
В будущих версиях Angular будет использоваться более продвинутый компилятор, что приведет к еще более мелким представлениям. Пока продукт еще не закончен, скелет с плющом может быть порожден через ng новый проект плюща - включить плющ. Либо измените настройки компилятора, как показано во фрагменте.
"angularCompilerOptions": {"enableIvy": true}
Предупреждение: Плющ приводит к поразительному уменьшению размера, но это не бесплатно. Продукт еще не стабилизировался, поэтому использовать его в производственной среде не рекомендуется.
14. Попробуйте модифицированную обработку ng.
Angular's нг Инструмент командной строки некоторое время внутренне использовал дочерние скрипты. Angular 8 повышает ставку, так как теперь вы также можете использовать эту возможность для запуска ваших собственных задач по мере сборки и компиляции вашего приложения.
"Architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Одно аккуратное приложение нг сценарии подразумевают прямую загрузку приложений в облачные сервисы. Репозиторий Git предоставляет полезный скрипт, который загружает вашу работу в учетную запись Firebase.
15. Наслаждайтесь улучшенной миграцией
Разработчики, переходящие с Angular 1.x, также известного как AngularJS, столкнулись с немалой долей проблем, связанных с правильной работой навигатора в «комбинированных» приложениях. Новая унифицированная служба определения местоположения призвана упростить этот процесс.
16. Изучите управление рабочим пространством
Большие проекты выигрывают от возможности динамически изменять структуру рабочего пространства. Это делается с помощью нового API рабочей области, представленного в Angular 8.0 - фрагмент, сопровождающий этот шаг, дает краткий обзор поведения.
асинхронная функция демонстрации () {const host = workspaces. createWorkspaceHost (новый NodeJsSyncHost ()); const workspace = ожидают рабочие области. readWorkspace (’путь / к / рабочему пространству / каталогу /’, хост); const проект = рабочая область.projects. получить (’мое-приложение’); const buildTarget = project.targets. получить (’построить’); buildTarget.options.optimization = true; ожидание рабочих пространств.writeWorkspace (рабочая область, хост); }
17. Ускорьте процесс.
Создание больших баз кода JavaScript утомительно. В будущих версиях AngularJS для ускорения процесса будет использоваться система сборки Google Bazel - к сожалению, на момент написания она не была готова к использованию в прайм-тайм.
18. Избегайте ходячих мертвецов
Несмотря на то, что Google делает все возможное, чтобы не нарушить код, некоторые функции просто необходимо удалить, поскольку они больше не нужны. Просмотрите этот список устаревших функций, чтобы узнать больше о функциях, которых следует избегать.
19. Посмотрите журнал изменений.
Как всегда, одна статья никогда не сможет отразить весь выпуск целиком. К счастью, этот журнал изменений содержит подробный список всех изменений - на тот случай, если вам когда-нибудь захочется проверить пульс функции, которая вам особенно дорога.
Есть много файлов, готовых для загрузки на ваш сайт? Создавайте резервные копии в самом надежном облачном хранилище.
Эта статья изначально была опубликована в журнале Creative Web Design. Веб-дизайнер.
