Angular CLI история развития, последние новости и прогноз на будущее


Содержание материала:

Angular CLI установка

Авторизовавшись с реквизитами пользователя root выполняем на сервере команду, которая скачает NodeJS.

curl -sL https://deb.nodesource.com/setup_8.x | bash —

Чтобы убедиться в том, что процесс прошел успешно можно проверить актуальную версию

Теперь глобально ставится npm

Устанавливаем angular cli

npm install —unsafe-perm -g @angular/cli

Это удобная среда разработки с webpack, которая позволяет писать код быстро не занимаясь настройками, пересборка происходит после каждого сохранения любого файла проекта.

Создаем каталог под приложение и переходим в него

Теперь создаем проект

В каталоге одноименном указанному названию будут созданы нужные для работы файлы

На этом все готово.

Если приложение уже существует его можно скачать с github

Затем приложение запускается на белом IP адресе и произвольном порту

chunk

main.bundle.js (main) 932 kB [initial] [rendered]
chunk polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]
chunk vendor.bundle.js (vendor) 9.49 MB [initial] [rendered]

webpack: Compiled successfully.

Теперь в браузере можно обратиться к публичному IP адресу сервера по порту 1111 — откроется стартовая страница проекта:

На этом все, Angular CLI будет работать и автоматически перекомпилироваться. В production он запускается как любое приложение на NodeJS — обычно через Nginx и Supervisor / Systemd / runit.

Как обновить Angular CLI до последней версии

используя ng —version Я:

который не является последней доступной версией.

поскольку у меня есть угловой CLI глобально установленный в моей системе, чтобы обновить его, я попытался:

npm update angular-cli -g

но он не работает, потому что он остается в версии 1.0.0.

10 ответов

после прочтения некоторых проблем, сообщенных в репозитории GitHub, я нашел решение.

чтобы обновить пакет angular-cli, установленный глобально в вашей системе, вам нужно запустить:

в зависимости от вашей системы, вам может понадобиться префикс команды с sudo .

кроме того, скорее всего, вы также хотите обновить локальную версию проекта, потому что внутри каталога проекта он будет выбран с более высоким приоритетом, чем глобальный один:

спасибо grizzm0 указал на GitHub.

после обновления CLI вы, вероятно, захотите обновите свою угловую версию тоже.

Примечание: если вы обновляете до Angular CLI 6+ из более старой версии, вам может потребоваться прочитать этой.

не забудьте обновить основные пакеты после обновления Cli.

ng6+ (Cli 6.0+): особенности упрощенные команды

во-первых, обновите Cli

затем обновите свои основные пакеты

если вы используете RxJS, запустите

он обновит RxJS до версии 6 и установит rxjs-compat пакет под капотом.

если вы столкнулись с ошибками сборки, попробуйте установить вручную из:

наконец, проверьте свою версию

примечание по производству сборки:

ng6 больше не использует intl на polyfills.ts

ng5+ (Cli 1.5+)

  1. поддерживаемая версия Typescript для Cli 1.6 на момент написания составляет до 2.5.3.
  2. использование @next обновляет пакет до бета-версии, если таковая имеется. Используйте @latest, чтобы получить последнюю не-бета-версию версия.

после обновления глобального и локального пакетов очистите кэш, чтобы избежать ошибок:

вот официальные ссылки:

вы можете просто использовать

npm install -g angular-cli — Если это ваш первый раз

npm install -g @angular/[email protected] — если u уже установлен, поэтому для обновления

мощная команда устанавливает и заменяет последний пакет.

у меня была похожая проблема. Я его починил.

эта команда прекрасно работает:

Я сделал то, что он сказал, но мой пакет не обновляется угловой вариант, и я знаю, что этот пост о angular-cli , но я думаю, что это может тоже помочь.

  • Итак, сделав то, что @ShinDarth сказал выше, чтобы исправить мою угловую версию, мне пришлось создать новый проект с -ng new projectname это создало пакет.
  • скопируйте новый пакет, затем вставьте новый пакет во все необходимые пакеты проектов обновление (не забудьте добавить зависимостей и изменить имя на первой строке), или вы можете просто изменить версии вручную без копирования и вставки.
  • затем запустите -npm install .

теперь мой ng serve снова работает, возможно, есть лучший способ сделать все это, если кто-то знает, пожалуйста, поделитесь, потому что это боль, чтобы сделать со всеми проектами, которые нуждаются в обновлении.

следующий подход сработал для меня:

Я работаю на Windows 10, иногда приходилось использовать: npm cache clean —force как хорошо. Вам не нужно делать, если у вас нет никаких проблем во время установки.

обновить угловой CLI в новой версии, необходимо обновить как глобальный пакет и пакет вашего проекта.

глобальный пакет:

локальный проект пакет:

все, что вам нужно сделать, это diff с угловой-cli-diff и применить изменения в текущий проект.

  1. скажем, вы идете от 1.4. до 1,5 потом вы https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0. 1.5.0
  2. нажать на кнопку File changed tab
  3. применить изменения к текущему проекту.
  4. npm install / yarn

в моем случае я установил angular-cli локально, используя npm install —save-dev angular-cli. Итак, когда я использую команду npm install-g @angular/cli, она генерирует ошибку, говоря, что » ваша глобальная угловая версия CLI (1.7.3) больше, чем ваша локальная версия (1.4.9)». Обратите внимание, что angular-cli, @angular/cli и @angular/[email protected]это два разных cli. Что решает это, удалите все cli, а затем установите последний угловой cli, используя установка npm-g @angular / [email protected]последние

Angular CLI создание проекта: основные команды

Сегодня начинаем разбирать весьма новый фреймворк JavaScript — Angular. Для того чтобы не писать кучу лишнего кода самому, чтобы его запустить и не тратя на это время — сначала мы изучим инструмент Angular CLI.

Что такое Angular CLI

Это инструмент созданный командой Google, который помогает увеличить скорость работы с проектом. Чтобы с ним работать вам придется изучить несколько команд, которые прописываются в командной строке.

У вас наверное созрел вопрос, а что именно он может? С помощью его вы можете:

  • Создание стартового проекта.
  • Создание конфигурационных файлов для деплоймента (deployment — prodaction и development).
  • Сгенерировать файлы для тестирования.
  • Проделать минимизацию приложения.
  • Создавать шаблонные файлы: сервисов (service), компонентов (component), навигационных файлов (route).

Также у него в арсенале имеется Webpack, который пользуется большой популярностью. Он нужен чтобы компилировать и запускать проекты во время разработки.

Как видите это очень мощный инструмент в разработке больших проектов, и на старте проекта.

Установка Angular CLI

Для того чтобы начать необходимо установить:

  1. Node js — серверная часть Javascript.
  2. Npm — менеджер пакетов, без которого мы далеко не уйдем.

Npm подтянется вместе с Node js при его установки.

Он нам нужен из-за большого количества дополнительных библиотек, зависимостей, которые придется устанавливать. Так мы сможем производить установку каждой по отдельности библиотеки, либо сразу все, которые находятся в файле package.json.

package.json — может хранить все зависимости, которые используются для работы с проектом. Также в нем можно найти — имя проекта, версия, скрипты и т.д.

Заходим на сайт — nodejs. Здесь вас ждет две версии Node js — LTS и Current. Выбирайте LTS и устанавливайте ее.

Теперь давайте установим Angular CLI на ваш ПК. Для этого вам нужно перейти в командною строку. Это можно сделать двумя способами:

Или второй способ:

  1. Зажать shift на клавиатуре
  2. Нажать правой кнопкой мыши по пустому месту в папке или рабочем столе
  3. В появившимся списке нажать на пункт «Открыть окно команд».

Два данных способа относятся к операционной системе Windows

После открытия командной строки вводим строку ниже. Она представляет собой запрос на скачивание пакета npm:

  • i это укороченная форма слова install (установить).
  • Далее идет название нашего пакета — @angular/cli .
  • -g означает установить данный пакет глобально на весь компьютер. Иначе мы бы установили его только в папку, из которой была вызвана данная команда и смогли использовать функционал только там.

Эта библиотека большая, поэтому вас понадобиться подождать несколько минут для ее установки.

Вот и все работы были сделаны. Теперь можем перейти рассматривать функционал установленного пакета.

Команды Angular CLI

Все команды должны начинаться со слова — ng . Таким образом мы показываем, что именно хотим использовать Angular CLI.

Вот список всех команд, которые вам понадобиться знать:

ng new [name] — сгенерирует проект с данным названием — [name] . Вместе с этим установит необходимые зависимости в директорию node_modules — это может занять несколько минут.

Это будет зависеть от скорости вашего интернета соединения.

Если вы зайдете в данный проект, то увидите такую картину:

ng serve — запускает Webpack, который в свою очередь собирает файлы вашего проекта и переносит их в оперативную память вашего компьютера. Если вы замените какой-то файл, то он заново будет пересобирать ваш проект.

Перейдите на localhost:4200 в браузере и сможете увидеть ваш проект.

ng serve —prod — также запустит Webpack, но уже будет оптимизировать ваш проект. Таким образом можно уменьшить размер проекта от одной до нескольких сотен килобайт. В нашем случае на

ng build — собирает все ваши файлы проекта и переносит их в папку dist. Далее вы можете делать с ними все что угодно — например, залить куда-нибудь на хостинг.

При ng serve мы ни как не можем пощупать собранные файлы.

ng build —prod — оптимизирует файлы, больше ничем не отличается.

ng generate [spec_file] [name] — создает [spec_file] с названием [name] и автоматически добавляет(производит import) его в модуль.

[spec_file] — это левая колонка таблицы

Файл Запрос
Component ng g component name
Service ng g service name
Module ng g module name
Pipe ng g pipe name
Class ng g class name
Guard ng g guard name
Interface ng g interface name
Enum ng g enum name
Directive ng g directive name
Routing module ng g module name —routing

Со всем этими файлами вы познакомитесь позже.

Замена стилизации в проектах

Автоматически Angular CLI генерирует стили с типом .css , но его можно поменять на другие более удобные для вас. Например:

Таким образом у нас есть еще один бонус при использовании Angular CLI. Чтобы изменить стилизацию добавьте такой флаг — —style=[name] :

Angular CLI: история развития, последние новости и прогноз на будущее

Development tools and libraries specialized for Angular

This is the home of the DevKit and the Angular CLI code. You can find the Angular CLI specific README here.

The Goal of Angular CLI

The Angular CLI creates, manages, builds and test your Angular projects. It’s built on top of the Angular DevKit.

The Goal of DevKit

DevKit’s goal is to provide a large set of libraries that can be used to manage, develop, deploy and analyze your code.

Getting Started — Local Development

To get started locally, follow these instructions:

  1. If you haven’t done it already, make a fork of this repo.
  2. Clone to your local computer using git .
  3. Make sure that you have Node 10.13 or later installed. See instructions here.
  4. Make sure that you have yarn installed; see instructions here.
  5. Run yarn (no arguments) from the root of your clone of this project.
  6. Run yarn link to add all custom scripts we use to your global install.

Creating New Packages

Adding a package to this repository means running two separate commands:

  1. schematics devkit:package PACKAGE_NAME . This will update the .monorepo file, and create the base files for the new package (package.json, src/index, etc).
  2. devkit-admin templates . This will update the README and all other template files that might have changed when adding a new package.

For private packages, you will need to add a «private»: true key to your package.json manually. This will require re-running the template admin script.


This is a monorepo which contains many tools and packages:

Вышел Angular 5

1 ноября 2020 года Google анонсировали мажорную версию Angular 5.0.0 под кодовым названием «пятиугольный пончик». Новая версия включает в себя новые функции и исправления ошибок, и в тоже время основной упор был снова сделан на то, чтобы уменьшить размер Angular, сделать его быстрым и простым в использовании. Полное описание всех изменений, включая критические, можно посмотреть в changelog файле официального репозитория Angular.

Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы поговорим о вышедшей новой версии, кратко рассмотрим некоторые из наиболее важных изменений и вспомнить историю Angular. Также для тех кто только начинает изучать этот фреймворк, мы рассмотрим примеры того, как быстро разворачивать приложение на Angular. Хотелось бы отметить, что вы можете присоединиться к отечественному сообществу Angular в Telegram, а также посещать Angular Meetup в Москве.

1. История Angular
1.1. AngularJS и остальные
1.2. Почему нам все еще нравится Angular 1.x?
1.3. И все же Angular не jQuery
1.4. Все, что вам нужно, это … ядро Angular
1.5. Так почему мы ушли от AngularJS?
1.6. Что сделал AngularJS для Web?

2. Angular QuickStart
2.1. Зачем нам TypeScript?
2.2. Шаг 1. Настройка окружения
2.3. Шаг 2. Создание нового проекта
2.4. Шаг 3: Запуск веб-приложения в режиме разработки
2.5. Шаг 4: Редактирование своего первого Angular компонента
2.6. Что дальше?
2.7. Каталог проекта
2.8. Angular CLI vs. Manual Setup

3. Новшества Angular 5
3.1. Улучшенный компилятор
3.2. Оптимизированная сборка
3.3. Улучшенный server-side rendering в Angular Universal
3.4. Улучшенная производительность при работе с формами
3.5. Переписанные под локализацию Pipes
3.6. Замена ReflectiveInjector на StaticInjector
3.7. Улучшенный NgZone
3.8. Multi exportAs
3.9. Улучшенный RxJS
3.10. Обновленный цикл жизни у Router
3.11. Улучшенный Mobile Experience
3.12. Breaking Changes и не только

История Angular

Выбор правильного фреймворка для нашего JavaScript окружения, приложения или простого веб-сайта является главным приоритетом для любого бизнеса. Сегодняшний ландшафт JavaScript-фреймворков заставляет многих разработчиков задаться вопросом, в каком же лагере им находится.

Angular — это JavaScript-фреймворк с открытым исходным кодом, обеспечивающий все необходимое для создания клиентской логики вашего приложения:

  • Тот факт, что Angular поддерживается Google, внушает доверие сам по себе;
  • Данный фреймворк спроектирован таким образом, чтобы вы могли легко перейти на него с других языков программирования, не сломав себе психику;
  • Многие разработчики отмечают, что если ваш код на Angular выглядит сложным, то это значит, что вы делаете что-то неправильно;
  • Большое количество веб-сайтов и приложений, написано на AngularJS и Angular: YouTube (для PS3), GoodFilms, Freelancer, Upwork, и другие.

1.1. AngularJS и остальные

Почти каждый разработчик знает, что AngularJS был одним из первых JavaScript-фреймворков, необходимых для создания одностраничных приложений (SPA). В настоящее время мы не удивляемся появлению SPA, они повсюду. Но в 2012 году (AngularJS 1.0.0) это было нечто новое. AngularJS был детищем Google, впервые он был выпущен в 2009 году как фреймворк с открытым исходным кодом под лицензией MIT.

Согласно SimilarTech.com, который замеряет использование веб-технологий, ReactJS в настоящее время используется на 112k веб-сайтах (при 3.20% росте в октябре 2020 года), а AngularJS (сюда же входит и Angular) используется 542k сайтами (при росте 1.93%).

Правда, стоит отметить рост VueJS за последнее время, который используется на текущий момент на 19k сайтах (при росте 28.3%).

Многие скажут, что неправильно сравнивать библиотеку и фреймворк (и отчасти вы окажетесь правы, Angular vs React), но люди имеют на то право. Если мы обратим внимание на jQuery, который используется на 70 млн. сайтах (при росте 0.16%), и начнем его сравнивать со всем подряд, то конечно, он всегда будет в лидерах, однако, для того же Enterprise очевидно, что мы выберем что-то посерьезней. Забавно, что Mootools тоже стал набирать популярность в рассматриваемом периоде (рост 18.5%).

1.2. Почему нам все еще нравится Angular 1.x?

  • На AngularJS легко было начать писать приложения

Да, было очень легко создавать новый проект. Просто вставляем ссылку на CDN, добавляем ng-app в html тег, быстро изучаем какой-нибудь туториал и новое приложение готово. Официальные модули, такие как ngAnimate и ngRouter, быстро решали все наши проблемы.

  • AngularJS Docs и Tutorial

У AngularJS была очень хорошая документация и множество потрясающих туториалов. После того же «Phonecat App» вы прекрасно понимали, что такое AngularJS и как его использовать. На самом деле, он был куда понятнее, чем «Tour of Heroes» (текущий туториал написан под Angular2, quick start которого использует SystemJS, а Angular CLI использует Webpack). Хотя для нового Angular скоро решится и эта проблема.

  • AngularJS был модульным с самого начала (1.x versions)

Вы помните время, когда все использовали Browserify и Bower? Тогда еще не было таких систем сборки, как Webpack. Да, в то время, конечно же, существовал Grunt и Gulp, но они были предназначены для использования, например, gulp-browserify. Так мы формально использовали Browserify. И все же, ng.module от AngularJS была очень важной особенностью. Вы могли просто вставить ссылки на свои скрипты, и они интерпретировались как модули одного приложения. Это была замечательная модульная система. В отличие от jQuery ($.fn.myNewAwesomePluginForJQueryThatNobodyDownloads), AngularJS предоставлял вам возможность писать свои собственные модули и использовать их в качестве плагинов или частей вашего приложения. Кроме того, это было очень удобно в виде lazy-loading.

1.3. И все же Angular не jQuery

Многие до сих пор помнят то время, когда почти каждая статья сравнивала AngularJS с jQuery. Многие разработчики начали переключаться на AngularJS с jQuery. Правда, сейчас уже не хочется думать о jQuery вовсе, ассоциируя его с плохим кодом.

  • Двустороннее связывание объектов и модели было «killer feature» или просто «killer»?

ng-model — связывал ваш объект со $scope-объектом и DOM-элементом — это было «killer feature» и «killer» одновременно:

1) Вы могли легко реализовать двустороннюю привязку данных — «killer feature»;
2) Неопытные разработчики привязывали каждую переменную к $scope-объекту в контроллере и после этого жаловались: «А почему мое приложение так медленно работает?» — «killer».

Одностороннее связывание данных было введено еще в версии 1.2, но не все разработчики знали об этом.

  • jqLite — миниатюрная альтернатива jQuery внутри вашего фреймворка

jqLite — это крошечное, API-совместимое подмножество jQuery, которое позволяло AngularJS кроссбраузерно манипулировать с DOM. jqLite реализовал только наиболее часто используемые функции с целью покрывать мелкие требования. Основной парадигмой являлись директивы и компоненты.

Таким образом, о вас позаботились и вам не нужно было включать полную версию jQuery. jqLite предоставляет все, что вам нужно. Но подождите… Вам это действительно нужно?

DOM-манипуляции были вынесены в небольшую библиотеку, доступ к которым возможен был только через angular.element. Это был шаг к новому уровню абстракции? Может быть.

Первая попытка реализации компонентной модели была в AngularJS. Но в отличие от ReactJS, AngularJS был «JS в HTML», а не «HTML в JS». Даже девиз AngularJS говорил сам за себя: «AngularJS — улучшенный HTML для веб-приложений!».

Почему «JS в HTML»? Все просто, вы использовали директивы, такие как ng-click, ng-for и ng-class в файлах .html вашего приложения.

Директивы были первой попыткой разделить часто используемые компоненты в небольших модулях. Однако, эта затея потерпела неудачу из-за React-подобных компонентов, реализованных в Angular 1.5. Возможно, React и выиграл в этой борьбе, потому что однажды ваш file-name.html мог стать таким (плохой код, который показывает самую большую проблему при работе с Angular):

1.4. Все, что вам нужно, это … ядро Angular

  • Встроенные директивы

Нет необходимости изобретать велосипед, когда у вас уже есть все необходимые директивы. По собственному опыту, некоторые разработчики вообще не создавали директивы. Они просто использовали встроенные директивы AngularJS, как упомянуто выше ng-click и ng-for.

  • Внедрение зависимостей в JavaScript

Одной очень интересной особенностью AngularJS является dependency injection. Кстати, вы когда-нибудь видели его в других проектах, за исключение AngularJS?

И на самом деле нет никакого смысла здесь рассматривать следующие вопросы:
1) «Services, factories, providers в AngularJS»;
2) «Как уменьшить Angular-приложение?»;
3) «Как работает $scope.$watch?»;
4) «Как работает AngularJS?»;
5) «Встроенный $http, фильтрация и производительность ng-for»;
6) «Какова была самая большая проблема с AngularJS?»;
… длинный список

Некоторые вопросы настолько велики, что можно проводить академическое исследование по ним.

1.5. Так почему мы ушли от AngularJS?

1) Не очень хорошая производительность из коробки;
2) Большая часть функционала из AngularJS не использовалось на практике;
3) AngularJS работал напрямую с DOM, а не c VirtualDOM, к примеру;
4) Низкий уровень абстракции, в AngularJS практически вся логика была завязана на HTML;
5) Трудно быть экспертом в AngularJS, если сам фреймворк огромен;
6) Современный Web требовал нового подхода.

1.6. Что сделал AngularJS для Web?

Это простой и сложный вопрос одновременно.

Возможно, AngularJS стал первым инструментом, который доказал, что JavaScript мощный язык. Обычно можно услышать, что «JavaScript — это язык для детей» или «JS — это язык для создания глупой анимации», все эти мифы были уничтожены силами AngularJS.

  • Сообщество, эксперты, экосистемы

1) Хороший фреймворк => много разработчиков;
2) Много разработчиков => Большое сообщество;
3) Большое сообщество => Дополнительные компоненты, инструменты, туториалы;
4) Большое количество инструментов и практик => Много экспертов;
5) Много экспертов => Новые идеи, модули, библиотеки;
6) Чистый прогресс…

Все эти фреймворки были вдохновлены AngularJS. Aurelia это ответвление (fork) AngularJS. Angular (Angular 2+) является продолжением AngularJS. Некоторые разработчики называют VueJS новым AngularJS из-за v-if, v-bind, v-on и других директив.

  • Вы все еще помните AngularJS?

2. Angular QuickStart

Хорошие инструменты для разработки делают вашу работу более комфортной, даже если вам нравится делать все вручную. Angular CLI — это интерфейс командной строки, который позволяет вам быстро создавать проекты, добавлять файлы и выполнять множество определенных задач, такие как тестирование, сборка и развертывание.

Основная цель этого раздела — создать и запустить простое Angular-приложение на TypeScript с использованием Angular CLI и в дальнейшем придерживаться официального Style Guide руководства, которые специфицирует и стандартизирует проекты на Angular. В конце концов, вы будете иметь базовое понимание того, как разрабатывать приложения с помощью CLI. Однако, сначала определимся, зачем нам TypeScript?

2.1. Зачем нам TypeScript?

TypeScript — это JavaScript (ES6/ES7/ES8/…) + информация о типах. То есть если вы знаете ES6+, то вы автоматически знаете TypeScript (добавится только информация о типах и некоторые нюансы, но в целом они строго следуют стандарту). TypeScript — это не Dart, который является другим языком. Это надстройка над JavaScript, которая позволяет в рамках очень больших проектов (таких, как сам Angular, который сам по себе очень большой проект) улучшить управление сложностью, получить статический анализ, мы имеем возможность пользоваться аннотациями, типизацией, наследованием, интерфейсами, а самое главное — модулями. В крупных проектах эта информация действительно позволяет избавиться от огромного набора ошибок. В интернете существует достаточно большое количество примеров и руководств по написанию приложений на TypeScript, но в нашем случае мы подготовили вам базовый starter kit, который работает под управлением системы сборки Webpack.

2.2. Шаг 1. Настройка окружения

Перед тем, как начать разрабатывать, вам необходимо настроить себе окружение. Установите Node.js и npm (если вы еще не установили их) себе на компьютер. Убедитесь, что вы используете Node.js версии не ниже 6.9.x и npm не ниже 3.x.x (для этого достаточно выполнить в терминале node -v и npm -v).

Затем установите Angular CLI глобально.

Как правило, этот шаг проделывается один раз, и в будущем его выполнение уже не потребуется.

2.3. Шаг 2. Создание нового проекта

Создайте новое приложение (разворачивание каркаса), выполнив следующие команды:

На этом шаге проявите терпение. Angular будет подтягивать все необходимые зависимости для вашего приложения, и большая часть времени будет потрачена на установку пакетов npm.

2.4. Шаг 3: Запуск веб-приложения в режиме разработки

Перейдите в каталог проекта и запустите веб-сервер.

Команда ng serve запускает веб-сервер, а также прослушивает каталог c исходниками вашего приложения и при изменениях в этих исходных файлах пересобирает проект «на лету». Стоит отметить, что в таком режиме проект не сохраняется на диске, он записывается непосредственно в оперативную память.

Использование ключа — open (или просто -o) означает, что после сборки проекта, автоматически откроется ваш браузер (по умолчанию выбранный в операционной системе).

В открытой вкладке http://localhost:4200/ по умолчанию вы уведите стандартный макет Angular приложения.

2.5. Шаг 4: Редактирование своего первого Angular компонента

По умолчанию Angular CLI создает для вас базовый компонент. Этот базовый компонент является корневым, он связан с селектором app-root. Вы можете найти его по следующему пути в каталоге ./src/app/app.component.ts.

В этом файле вы увидите следующее:

@Component— это один из базовых декораторов в Angular. Декораторы — это альтернатива для аннотаций (пример из Java), предложенная Yehuda Katz в стандарт ECMAScript 2020. Декораторы позволяют не только аннотировать метаданными объекты, но и модифицировать классы, методы и свойства. Также декорирование — это приём программирования, который позволяет
взять существующую функцию и изменить/расширить ее поведение. Во многих случаях код с использованием декораторов будет чище, красивее и эффективнее.

Декоратор получает функцию (в нашем случае, класс AppComponent) и возвращает обертку, которая делает что-то своё «вокруг» (magic) вызова основной функции. Что конкретно делает декоратор Component вы можете посмотреть тут.

Итак, самое очевидное, что вы можете сделать сейчас для своего компонента, это поменять его title, к примеру:

Как только вы внесете изменения в файле и сохраните их, браузер автоматически перезагрузит изменения (hot reloading). Конечно же, вы можете легко вносить изменения в стили вашего компонента.

Откройте файл .src/app/app.component.css и задайте компоненту некоторые стили:

Правда, тут стоит сразу отметить следующий момент: если вы попытаетесь сделать так:

то ничего не изменится, фон страницы не будет красным, а фон самого компонента не будет синим. И если мы посмотрим в код страницы, то увидим следующее:

Дело в том, что Angular по умолчанию инкапсулирует CSS (кроссбраузерно эмулирует Shadow DOM), чтобы стили одного компонента не сломали или переопределили стили другого. Поэтому ни в коем случае не используйте имя селектора компонента или внешние имена селекторов для задания его стилей. Атрибуты для инкапсуляции CSS кода генерируются только для дочерних элементов этого компонента.

Некоторые утверждают, что если на странице используется огромное количество компонентов, Angular проделывает лишнюю работу и нагружает наш процессор, что сказывается на скорости, к тому же, если вы используете какую-нибудь css-методологию (BEM, SMACSS), то вероятнее всего вы напишете хорошую верстку и css код, не требующий для этого инкапсуляции со стороны Angular. Для этого вы можете просто указать дополнительный параметр в декораторе:

Более подробно вы можете прочитать тут.

2.6. Что дальше?

Шаги, описанные выше — это все, что необходимо для простого «Hello, World». Дальше вы можете попытаться изучить туториал «Tour of Heroes» и создать небольшое приложение, которое поможет в будущем разрабатывать более сложные приложения с помощью Angular, но я бы порекомендовал посмотреть видеокурс на Udemy (неважно, что он на английском, вы сможете разобраться в силу того, что там все доступно показывается). Для ознакомления с командами angular-cli, вы можете перейти на данный русскоязычный ресурс. Сейчас же можно ознакомиться с каталогом проекта.

2.7. Каталог проекта

Angular CLI является удобным инструментом для разработки и развертывания enterprise-решений. Для начала самый первый файл, который вам необходимо изучить это README.md.
Он содержит информацию о базовых командах, которые вы должны знать при использовании Angular CLI. Всякий раз, когда вам потребуется узнать больше, чем есть в README и посмотреть какие-нибудь примеры использования Angular CLI, вам достаточно будет зайти на официальный репозиторий и открыть раздел Wiki.

Некоторые из сгенерированных файлов могут быть вам незнакомы, поэтому поговорим о них подробнее.

Сами исходники вашего разрабатываемого приложения, как правило, располагаются в директории src. Тут вы будете хранить Angular компоненты, шаблоны, стили, изображения и все остальное, что будет необходимо вашему приложению. Любые файлы вне этой папки предназначены для поддержки создания, сборки и развертывания вашего приложения.

app/app.component. — специфицирует AppComponent компонент html-шаблоном, стилями и юнит-тестами. Это корневой компонент, для которого по мере развития приложения появится дерево вложенных компонентов.

app/app.module.ts — специфицирует AppModule. Корневой модуль, который сообщает Angular, как будет собрано приложение. Сейчас в нем объявлен только AppComponent. Впоследствии вы будете объявлять в нем другие компоненты.

assets/* — директория, в которой вы размещаете изображения и все остальное, которую необходимо скопировать в конечную директорию сборки, когда вы создадите непосредственно само приложение.

environments/* — эта директория содержит файлы целей сборки (dev или prod режимы), каждый из которых экспортирует простые env-переменные конфигурации, необходимые для использования в вашем приложении. Когда вы разрабатываете приложение, файлы собираются «на лету». Вы можете использовать разный набор API при разработке (dev), отличный от продакшина (prod), у которого вы можете подключать всякие метрики или auth-токены. Вы даже можете использовать разные сервисы или заглушки при разных целях сборки.

favicon.ico — вы можете добавить свою собственную иконку, которая будет отображаться на вкладке в браузере.

index.html — основная HTML-страница, которая отображается, когда кто-то посещает ваш сайт. В большинстве случаев вам никогда не понадобится его редактировать. Angular CLI автоматически добавляет все сгенерированные js и css-файлы при создании вашего приложения, поэтому вам не нужно добавлять какие-либо теги (script, link) вручную.

main.ts — точка входа вашего приложения. Сейчас, по умолчанию, ваше приложение компилируется в поставке с JIT-компилятором. Данный файл загружает корневой модуль приложения (AppModule) и запускает его в браузере. Вы также можете использовать AOT-компилятор, заранее скомпилировав свое приложение, исключив JIT-компилятор из сборки, для этого вы должны использовать флаг — aot для команд Angular CLI ng build и ng serve.

polyfills.ts — различные браузеры имеют различные уровни поддержки тех или иных веб-стандартов. Полифиллы помогают нормализовать эти различия. Однако не забывайте проверять текущую [поддержку браузерами](https://angular.io/guide/browser-support).

styles.css— здесь хранятся глобальные стили. Большую часть времени вы будете работать с локальными стилями своих компонентов, но стили, которые влияют на все ваше приложение, должны находиться в этом месте.

test.ts— это точка входа всех ваших юнит-тестов. Этот файл имеет настраиваемую конфигурацию, но, как правило, вы будете редко его править.

tsconfig..json — конфигурация компилятора TypeScript описывается в файле tsconfig.app.json, для юнит-тестов же используется конфигурация tsconfig.spec.json.

Корневая директория проекта

src/ является только одним из элементов корневой директории проекта. Другие файлы помогают собирать, тестировать, поддерживать, документировать и развертывать приложение.

e2e/* — внутри директории e2e/ располагаются e2e (end-to-end) тесты. Они не должны находиться внутри директории src/, поскольку эти тесты представляют собой отдельное приложение, которое тестирует ваше основное приложение. Внутри располагаются конфигурационные файлы, например, tsconfig.e2e.json.

node_modules/* — Node.js создает данную директорию, в которой хранит все сторонние модули, перечисленные в package.json.

.angular-cli.json — конфигурационный файл Angular CLI. В этом файле вы можете установить несколько значений по умолчанию, а также настроить, какие файлы будут включены при сборке проекта.

.editorconfig — Простая настройка для вашего редактора, специфицирующая одинаковую базовую конфигурацию для форматирования текста кода. Большинство редакторов поддерживают файл .editorconfig. Дополнительную информацию смотрите на странице [http://editorconfig.org](http://editorconfig.org).

.gitignore — это файл необходим для системы контроля версий, он нужен, чтобы исключить автосгенерированные файлы, которые не нужно хранить в Git-репозитории.

karma.conf.js— конфигурационный файл для запуска юнит-тестов с использованием Karma, запуск тестов можно выполнить командой ng test.

package.json — конфигурационный файл npm, в нем перечисляются сторонние модули (пакеты) разработчиков, которые использует ваш проект. Здесь вы также можете прописать и свои собственные скрипты.

README.md — основная документация для вашего проекта, предварительно заполненная информацией Angular CLI.

tsconfig.json — конфигурация компилятора TypeScript для вашей IDE.

tslint.json — конфигурация для статического анализатора TSLint, используется при запуске ng lint. Для чего нужен анализатор вы можете [посмотрев на пример](http://codelyzer.com/).

2.8. Angular CLI vs. Manual Setup

Существует множество способов, которые вы можете опробовать для создания нового проекта на Angular. Но на самом деле существует два основных подхода, первый из них — это использование Angular CLI, а второе — ручная настройка Webpack.

Самый простой и быстрый способ создания нового проекта на Angular. Не прибегая к ручной настройке, вы можете в течение нескольких минут развернуть проект и начать разрабатывать без проблем даже большие приложения.


Плюсы:
— Быстрая и простая в установке, идеально подходит для начинающих
— Является надстройкой над Webpack
— Включает в себя инструменты тестирования Protractor e2e, Karma, Jasmine
— Не нужно самостоятельно следить за зависимостями
— Централизованный конфигурационный файл
— Быстрые и простые CLI-команды для запуска приложения, создания новых компонентов и многое другое

Минусы:
— Менее расширенная конфигурация (невозможно изменить встроенную конфигурацию Webpack)
— Жесткая структура конфигурационных файлов (несколько tsconfig файлов, которые сложнее перемещать из директории в директорию)
— Слабая поддержка или полное отсутствие плагинов (невозможно, к примеру, добавить Pug-шаблонизатор)

Все плюсы и минусы действительно сводятся к следующему: c Angular CLI намного легче управлять проектом, но также он делает проект менее гибким. Это отлично подходит для начинающих или простых проектов, но, скорее всего, в будущем вам потребуется ручной подход настройки вашего проекта.

В этом случае ручная настройка с использованием Webpack фактически является противоположностью плюсам и минусам Angular CLI. Однако одним из лучших альтернатив Angular CLI, с точки зрения гибкости настройки, является проект AngularClass [Angular Webpack Starter](https://github.com/AngularClass/angular-starter). Однако за счет легкого конфигурирования webpack вы можете настроить простое окружения для своего проекта, оставив [только необходимое](https://github.com/Angular-RU/webpack-angular-starter).

Плюсы:
— Расширенная настройка Webpack
— Возможность использования любых HTML-шаблонизаторов
— Чистый конфигурационный файл и структура каталогов
— Большая гибкость (конфигурационные файлы являются javascript файлами, для которых можно писать свою логику)

Минусы:
— Трудность настройки эффективного e2e-тестирования
— Возможность расширенной конфигурации увеличивает вероятность конфигурационных ошибок
— Проблемы с зависимостями и их upgrade-обновлениями

SystemJS позиционирует себя как универсальный динамический загрузчик модулей — модулей ES6, AMD, CommonJS и глобальных браузерных или Node.js пакетов. Поскольку вы используете модули в TypeScript, так же, как в ES6, вам нужен загрузчик модулей (в Webpack за это отвечают loaders). В случае с SystemJS вы пишете конфигурационный systemjs.config.js, который позволяет вам настроить способ сопоставления имен модулей с их соответствующими файлами в каталоге node_modules или где-либо еще.

Этот конфигурационный файл необходим для того случая, когда на клиенте вы используете именно SystemJS, при помощи него вы импортируете основной модуль вашего приложения:

Причем забегая вперед, для TypeScript конфигурации вы указывали определенный параметр [типа модуля](https://auth0.com/blog/javascript-module-systems-showdown/):

Таким образом, после компиляции из TypeScript в ваших JavaScript файлах вы увидели бы внутри особые функции require(). Если бы указали “module”: “es6”, вы увидели бы в скомпилированных файлах ключевые слова import, export. Однако, вы все еще не можете использовать этот синтаксис, поскольку полной поддержки браузерами еще нет. Если бы указали тип “module”: “amd”, вы увидели бы другой синтаксис, который использовал функции define(). Стоит отметить, что в обучающем туториале на официальном сайте «Tour of Heroes» до сих пор в примерах участвует SystemJS, однако, после выхода Angular 5, разработчики вскоре поправят документацию и заменят на примеры с Angular CLI.

SystemJS как одна из модульных систем сборки, предназначалась для того, чтобы эмулировать поддержку ES6 модулей, а как только браузеры начнут их поддерживать, можно было бы от него легко избавиться, однако, в целом эта затея провалилась из-за минусов SystemJS.

Webpack это достаточно гибкая система сборки. Он не только обрабатывает какие-либо типы модулей (ES6, AMD, CommonJS), но и позволяет выполнить прилегающие задачи, обеспечивая выполнение сжатия, минификации каких-либо файлов, работу с картинками, css-препроцессорами и многое другое. Он также предоставляет веб-сервер для разработки в режиме инкрементальной сборки. Когда вы используете Webpack, SystemJS становится избыточным. Webpack готовит для вас как минимум один файл с возможным именем bundle.js. Этот файл может содержит все необходимые HTML, CSS, JS составляющие ваших веб-компонентов. Поскольку все файлы объединены в один файл, то нет жесткой необходимости в ленивом загрузчике, такой как у SystemJS. Главный потенциал SystemJS был в ленивой загрузке ваших файлов. Приложение должно было загружаться быстрее, потому что вы не загружаете один большой бандл, но на практике это оказалось не очень выгодным решением.

Но даже сейчас Webpack позволяет использовать вынесение кода из общего бандла (code splitting) и подгружать их при помощи ленивой загрузки по требованию, а также представляет улучшенный Tree Shaking для ваших модулей. Поэтому начиная с версии 1.2, Angular CLI использует внутри себя реализацию Webpack.

На самом деле, уже практически невозможно найти какой-либо работающий Starter Kit, использующий SystemJS, многие либо переписали на Webpack, либо забросили. Но даже если вы и найдете его, он будет скорее всего с версией Angular 2. Поэтому настоятельно рекомендую изучать первые два способа сборки ваших приложений на Angular.

Здесь мы не будем много говорить на эту тему. Хотя есть примеры (хоть и в сравнении с Webpack второй версии), какой код генерирует Webpack, а какой генерирует Rollup на выходе, и тут последний куда лучше. При этом стоит снова отметить, что Webpack — это не просто сборщик модулей, а куда больше. Поэтому Webpack, как правило, лучше подходит для разработки приложений, а Rollup, как правило, лучше подходит для разработки библиотек.

3. Новшества Angular 5

Те, кто уже успел обновиться со второй версии на четвертую, не могли не заметить, насколько просто это было сделать. В пятой версии хотят продолжить эту приятную традицию и сделать все, чтобы переход с Angular 4 на Angular 5 произошел как можно более незаметно. В будущем будет реализована система автоматического обновления, встроенная в Angular CLI. Сейчас же, либо вам необходимо использовать Angular CLI 1.5+, либо самостоятельно обновить свои пакеты в проекте.

Улучшенный компилятор

В инкрементальной сборке Angular-компилятор (ngc) перекомпилировывал все файлы при каждом изменении, что замедляло процесс разработки.

Новые фичи Angular 6 за три минуты

Angular вышел с новыми функциями в версии 6.0.0, особенно в Angular-cli. Теперь, с помощью Angular 6, вы можете легко обновить свои старые пакеты, создать собственные веб-элементы, используя Angular Elements, и многое другое. Давайте посмотрим!

ng add — новая команда в Angular-cli, которая помогает устанавливать и загружать новые пакеты в ваших Angular приложениях. Он работает так же, как и npm, но не заменяет его.

ng update еще одна новая команда Angular-cli. Она используется для обновления пакетов. Это полезно, например, когда вы хотите перейти с Angular 5 на Angular 6 или на любой другой пакет в Angular приложении.

Объявление провайдеров внутри сервиса

До этого обновления, приходилось объявлять массив провайдеров в app.module.ts

Теперь с помощью Angular 6 вы можете предоставить свою услугу внутри самого супервизора, поместив свойство providedIn:root в пределах «@injectable».

Теперь с помощью Angular 6 вы можете предоставить ваш сервис внутри супервизора, поместив свойство providedIn:root в «@injectable»

Используйте ng-template вместо template директив

Вы можете использовать ng-template для отрисовки HTML вместо тега template в новой версии Angular. ng-template — элемент Angular, который используется со структурной директивой, такой как *ngFor и *ngIf

Angular 6 знакомит нас с элементами Angular. Вы можете отображать свои элементы Angular как собственные веб-элементы, и они интерпретируются как доверенные элементы HTML.

Вы можете добавить Angular элементы, выполнив следующую команду:

Импортируйте createCustomElement в свой компонент.

Затем создайте свой собственный элемент.

Примечание. Вы должны реализовать метод DomSanitizer из @angular/platform-browser, чтобы использовать ваш пользовательский элемент.

Обновление до RxJS 6.0.0

Angular 6 использует последнюю версию библиотеки Rxjs. Теперь вы можете наслаждаться новейшими функциями RxJS 6 в своем Angular приложении 🙂

Angular сам по себе не имеет много новаторских изменений в Angular core, но Angular-cli действительно захватывает. Команда Angular больше ориентируется на производительность, легко создает PWA, обеспечивая хорошую среду для работы, чтобы работать с Angular в простой форме.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

эм, наверное, с Хабром перепутали?

На хабре такой недообзор заплевали бы

Полгода назад вышел. Весной

В angular-cli 6 не работает команда eject, будьте осторожны, когда будете решать использовать его или нет.
Мне пришлось использовать ngw, который позволяет модифицировать существующий конфиг вебпака.
А ещё тайпинги ангуляра отвратительны — куча any в реактивных формах, нет дженериков там, где они очень нужны: например, в SimpleChanges. Так что, когда кто-нибудь будет рассказывать про тайпскрипт из коробки, — это скорее маркетинг, чем типобезопасное программирование.

То чувство когда перешел на работу с бекендом, и юзнал Angular, который был второй версии ))

Angular: состояние дел в 2020 году

Сейчас лето — то время года, когда во всём мире проводятся различные конференции и другие мероприятия. Программистов в эту пору буквально заваливает новой информацией, которую обычно бывает довольно непросто усвоить.

Вселенная фронтенд-разработки напоминает поезд, который движется без остановок. Все мы знаем о том, как сложно от этого поезда не отстать. Просмотр видеозаписей конференций занимает массу времени, в результате оказывается совершенно понятным причина того, что многие из нас, после офисной работы, предпочитают смотреть фильмы на Netflix.

Автор материала, перевод которого мы публикуем, говорит, что именно поэтому решил помочь всем желающим разобраться в новшествах Angular. Здесь пойдёт речь о современном состоянии Angular, о свежих возможностях этого фреймворка, об актуальных трендах.

О росте масштабов применения Angular

В соответствии с данными, предоставленными на ng-conf 2020 членом команды разработки Angular Брэдом Грином, масштабы применения Angular выросли за год примерно на 50%!

Понятно, что на эти данные могло повлиять то, что множество проектов находится в процессе перехода с Angular 1.X на более свежие версии фреймворка. Но 50% — это, всё равно, впечатляющий показатель.

Angular растёт не так быстро, как Svelte или Vue. Этот фреймворк используется не так широко, как React. Но, в отличие от того, что можно читать о других фреймворках на ресурсах вроде Reddit или Twitter, Angular пребывает в добром здравии и используется миллионами разработчиков и команд.

Angular отличается большой и динамично развивающейся инфраструктурой

Даже учитывая то, что в Angular имеется множество полезных встроенных инструментов, созданных основной командой разработчиков, его экосистема, вклад в развитие которой вносит сообщество энтузиастов, чрезвычайно велика. Она, кроме того, представлена проектами очень высокого качества.

Вместе с базовым фреймворком можно использовать массу интересных средств. А именно, речь идёт о следующем:

  • Глубокая интеграция с отличными, динамично развивающимися инструментами. Среди них можно отметить TypeScript и RxJS. Развитие этих технологий оказывает непосредственное положительное влияние и на Angular.
  • Различные виды библиотек для управления состоянием приложений.
  • Средства для анализа и улучшения качества кода. Такие, как Codelyzer.
  • Библиотеки элементов пользовательского интерфейса, компонентов, директив, конвейеров и так далее.
  • Большой выбор плагинов для различных IDE.
  • Библиотеки и фреймворки для тестирования приложений.
  • Высококачественная подробная документация, работой над которой занимаются и члены сообщества, и команда Angular. Сюда входят практические рекомендации, руководства, учебные материалы, книги, видеокурсы. Хотя это и последний пункт в данном списке, он, тем не менее, так же важен, как и другие.

В следующих разделах мы остановимся на некоторых особенно интересных инструментах, которые можно использовать при разработке Angular-проектов.

Angular CLI

▍Angular CLI и чрезвычайно простой процесс обновления Angular

Это — не пустые слова. Здесь можно найти хороший рассказ о том, как проект BlueWeb, обслуживающий ежегодно полмиллиарда пользователей, был обновлён с Angular 7 до Angular 8 за один рабочий день. Это — внушительное достижение, учитывая то, что переход со второй на четвёртую версию Angular занял у того же проекта 30 дней.

Это доказывает огромную ценность Angular CLI. Использование данного инструмента способно поднять производительность работы до такого уровня, с которым лично я раньше не встречался.

В наши дни становится очень сложно представить себе работу без Angular CLI.

▍Средство Schematics

Инструмент Angular Schematics представляет собой нечто такое, что Angular-разработчики, вероятно, используют на ежедневной основе. Например, я уверен, что вы часто пользуетесь такой командой:

Она основана на инструменте Schematics, встроенном в Angular CLI.

Возможно, для вас будет новостью то, что у разработчиков есть возможность создавать собственные правила Schematics. Их применение облегчает работу с часто используемыми фрагментами кода.

▍API Builders

API Builders позволяет расширять или дополнять существующие команды. Например, можно создать команду, которая выполняет тесты с помощью Jest и Cypress, а не с помощью Jasmine и Protractor. Можно и, например, воспользоваться альтернативным линтером.

Новые интересные возможности фреймворка

В момент написания этого материала уже вышла 8 версия Angular, содержащая различные улучшения и новые возможности.

Тут нет ничего такого, что серьёзным образом изменило бы то, как используется этот фреймворк. Подобное утверждение, касающееся новой версии некоего инструмента, обычно воспринимается как хорошая новость. Но в Angular 8 имеется множество улучшений, которые не видны, так сказать, «невооружённым глазом». Благодаря им Angular-проекты становятся меньше и быстрее. Эти улучшения делают процесс разработки Angular-приложений ещё более приятным, чем раньше. Кроме того, в новой версии фреймворка имеется почти готовая к полноценному использованию новая система рендеринга.

▍Дифференциальная загрузка

«Дифференциальная загрузка», если судить по названию этой технологии, может показаться чем-то очень сложным, но на самом деле это не так. Если в двух словах, то благодаря этой возможности компилятор генерирует два бандла. Один — для современных браузеров. В нём нет кода полифиллов. Второй — для более старых версий браузеров.

Самые новые браузеры загружают современные бандлы. А старые браузеры, которым нужны полифиллы, загружают сборки, предназначенные специально для них.

Это — весьма полезное новшество. Так как большинство пользователей, весьма вероятно, работает в последних версиях браузеров, это приводит к тому, что бандлы с полифиллами, более крупные, чем современные бандлы, используются лишь небольшим количеством пользователей.

▍Веб-воркеры

Вы, вероятно, уже слышали о веб-воркерах, поэтому разъяснением сути этой технологии мы тут заниматься не будем. Но вы, возможно, не знаете о том, насколько легко в новом релизе Angular осуществляется интеграция веб-воркеров в приложения. Здесь об этом можно почитать подробнее.

▍Набор инструментов CDK

CDK — это набор инструментов, выпущенный командой, которая занимается разработкой компонентов Angular. В нем можно найти абстракции, используемые Angular Material, которые независимы от стилей.

Например, благодаря CDK в распоряжении разработчика оказываются директивы, которые позволяют реализовать следующие возможности:

  • Работа с объектами в стиле «Drag-and-Drop».
  • Использование текстовых областей, автоматически меняющих размер.
  • Всплывающие окна.
  • Виртуальная прокрутка.

CDK — это чрезвычайно полезный инструмент из-за того, что большинство приложений может использовать качественные широко распространённые абстракции, каждая из которых реализует лишь ограниченный функционал. Это гораздо лучше, чем повсеместное и не всегда оправданное применение полномасштабных компонентов. Angular Material — это замечательный набор компонентов, но сила CDK в том, что это средство позволяет разработчику создавать собственные компоненты из базовых строительных блоков.

▍Движок рендеринга Ivy

Ivy — это весьма интересная новая разработка, представляющая собой движок рендеринга. Работа над Ivy пока ещё не завершена, по умолчанию этот движок пока отключён. Но, начиная с Angular 7, его уже можно включить и использовать. Ожидается, что Ivy будет основным движком рендеринга в Angular 9.

Вот чего можно ожидать от полнофункционального движка Ivy:

  • Уменьшение размеров бандлов.
  • Отлаживаемые шаблоны.
  • Более быстрая сборка проектов, ускорение их тестирования.
  • Исправление существующих ошибок.

Если говорить об отладке, то вот скриншот, на котором можно видеть срабатывание точки останова в консоли Chrome.

Как видите, директива ngForOf даёт нам сведения о переданном значении.

Angular и мобильные платформы

▍Ionic

Ionic — это фреймворк для разработки мобильных приложений. Хотя его базовые компоненты созданы с использованием Stencil, они дают разработчику абстракции, которые позволяют использовать Ionic с Angular и с другими фреймворками.

▍NativeScript

NativeScript — это фреймворк для разработки нативных мобильных приложений, похожий на React Native. Он отличается глубокой интеграцией с Angular — наряду с поддержкой Vue и с возможностью пользоваться им для разработки на чистом JavaScript. К несчастью, мой опыт работы с ним оказался не особенно удачным. Я не могу поставить его на один уровень с React Native. Однако если вы серьёзно занимаетесь разработкой мобильных приложений — испытайте NativeScript.

Тестирование

▍Jasmine и Protractor

Jasmine и Protractor в представлении не нуждаются. Это стандартные средства для тестирования Angular-приложений. Они отлично проверены временем, их регулярно обновляют, и с Angular они работают замечательно.

▍Jest и Cypress

Тестирование Angular-приложений с помощью Jest и Cypress стало возможным благодаря новым средствам, основанным на API Builders, входящим в состав Angular CLI.

Jest — это фреймворк для модульного тестирования, основанный на Jasmine. Он разработан в Facebook. Это — стандартный фреймворк для тестирования React-проектов, он широко распространён благодаря его скорости. Многие предпочитают использовать его, а не Jasmine. Если вы тоже склоняетесь к Jest — теперь вы можете пользоваться им для тестирования Angular-приложений.

Cypress — это весьма уважаемый фреймворк для проведения сквозного тестирования приложений. Сообщество разработчиков не случайно относится к нему очень хорошо. Он не зависит от Selenium или WebDriver. Cypress позволяет работать с журналами команд, умеет управлять сетевым трафиком. Он довольно-таки стабилен, поэтому можно ожидать, что результаты, полученные с его помощью, окажутся достаточно понятными и предсказуемыми.

▍Набор инструментов Angular Testing Library

Angular Testing Library — это набор инструментов для тестирования компонентов пользовательского интерфейса с ориентацией на воспроизведение действий пользователя.

Это означает, что данная библиотека подталкивает программиста к тому, чтобы он не работал бы с компонентами программно. Она направлена на тестирование поведения компонентов. Библиотека выполняет те действия, которые обычно выполняют пользователи.

Например, при работе с инструментами из этой библиотеки подобные конструкции не используются:

Вместо этого имитируется естественное поведение пользователя:

Управление состоянием

NgRx — это библиотека для управления состоянием приложений, созданная под влиянием идей, заложенных в Redux. NgRx, вероятнее всего, является самой распространённой в Angular-разработке библиотекой для управления состоянием. Название библиотеки позволяет предположить то, что в ней серьёзно используются потоки RxJs.

NGXS — это альтернативная библиотека для управления состоянием в Angular-приложениях, похожая на Redux. Если сравнить NGXS и RxJS, то окажется, что особенности NGXS заключаются в том, что здесь используется множество классов и декораторов. Делается это для уменьшения объёмов шаблонного кода. Вероятно, эта особенность NGXS может стать решающей при выборе библиотеки для управления состоянием в том случае, если тот, кто ищет подобную библиотеку, привык пользоваться классами.

▍Akita

Akita — это библиотека для управления состоянием, разработанная компанией Datorama. Данная библиотека тоже основана на RxJS. Если сравнить её с предыдущими двумя библиотеками, то окажется, что её особенность заключается в том, что применять её можно и в проектах, в которых Angular не используется. Это значит, что выбор библиотеки Akita, в долгосрочной перспективе, может привести к улучшению возможностей по повторному использованию кода проектов.

▍Может — просто взять RxJs?

Я могу дать положительный ответ на вопрос, вынесенный в заголовок этого раздела. Тут всё зависит от того, нравятся ли вам библиотеки, напоминающие Redux, и в том, нуждается ли проект в библиотеке для управления состоянием. При желании можно создавать сервисы, хранящие состояние с помощью стандартных средств RxJS.

Библиотеки компонентов пользовательского интерфейса

▍StoryBook

StoryBook — это, на самом деле, не библиотека UI-компонентов. Это — инструмент, который позволяет создавать изолированные компоненты и даёт возможность исследования компонентов и их вариантов.

Это — отличный инструмент. Раньше он был доступен лишь React-разработчикам. Я им тогда завидовал. Но теперь пользоваться им могут и Angular-разработчики, поэтому я просто не могу о нём не упомянуть.

▍Angular Material

Тут мы скажем пару слов о небезызвестной библиотеке Angular Material, которая даёт в руки современного разработчика приятный набор компонентов, предназначенных для самой свежей версии Angular.

Бэкенды для Angular-приложений

▍Firebase

Firebase — это платформа для разработки приложений, которой владеет Google. Следствием этого является то, что существует официальная библиотека для Firebase и Angular — AngularFire. Эта библиотека использует наблюдаемые объекты RxJS для организации потоковой передачи данных. Она глубоко и качественно интегрирована с Angular.

▍GraphQL

Возможно, вы думаете, что удовольствие от работы с GraphQL доступно лишь React-программистам. Если так — то вы ошибаетесь. Существует версия библиотеки Apollo и для Angular. То, что можно создать с помощью этой библиотеки, является отличной альтернативой Firebase. Apollo подойдёт тем, кто предпочитает работать с GraphQL.

▍NestJS

NestJS — это веб-фреймворк для Node.js, предназначенный для разработки серверных приложений. Из примеров к нему можно сделать вывод о том, что большое влияние на него оказали базовые концепции Angular. Это — модули, контроллеры, конвейеры, и так далее. Если вам нравится Angular, то вам, вероятно, понравится и NestJS.

Если вы пользуетесь Nx Workspaces, то создание каркаса фуллстек-приложения, основанного на Angular и NestJS, это вопрос выполнения одной команды в консоли.

Итоги

В итоге можно сказать, что обширная экосистема, сложившаяся вокруг Angular, предлагает всем желающим качественные и надёжные инструменты для решения широкого круга задач.


Конечно, я не могу рассказать здесь о десятках моих любимых библиотек и инструментов. Сделай я так — этот материал получился бы бесконечным. Но я надеюсь, что эта статья предоставила вам обзор того явления современной веб-разработки, которое называется «Angular». Надеюсь, что здесь вы нашли что-то такое, что, в перспективе, сможете использовать в своих проектах.

Уважаемые читатели! Что вам больше всего нравится (или не нравится) в Angular 8?

Прогноз развития технологий до 2099 года

Американский изобретатель и футуролог Рэй Курцвейл стал автором множества технологических прогнозов. Свои первые предсказания он опубликовал в книге «Эпоха мыслящих машин», вышедшей в 1990 году. Последний раз Рэй озвучил своё видение будущего неделю назад на международном конгрессе SAE 2015 в Детроите. Если собрать названные даты в единый список, то получится подробный прогноз развития ключевых отраслей до конца XXI века.

Рэймонд Курцвейл (Raymond Kurzweil) стал интересоваться параллельным развитием людей и машин ещё во время обучения в Массачусетском технологическом институте. Он всегда находил неожиданные направления – от разработки систем распознавания речи до решения проблемы бессмертия. Пока оцифровка сознания и его помещение в компьютерную модель мозга кажется научной фантастикой, но лауреат множества премий и автор книги «Как создать разум» готов уже сейчас назвать даты появления способствующих этому технологий.

Рэймонд Курцвейл даёт прогноз развития технологий до конца XXI века (фото: huffpost.com).

С недавних пор претворять фантастические идеи в жизнь стало для него непосредственной задачей, поскольку вот уже три года он занимает пост технического директора подразделения по развитию методов машинного обучения и обработки естественного языка компании Google.

Футурологические анонсы Рэя интересны хотя бы потому, что многие из его ранних прогнозов сбываются на наших глазах. Речь идёт о системах дополненной и виртуальной реальности, носимой электронике, «умной» одежде, электронных ассистентах (вроде Google, Siri и Cortana), автомобилях с автопилотом и десятках других изменений в привычной жизни. Что же ждёт нас в ближайшем будущем, если нам хватит ума дожить до него?

Пока мы ждём одного варианта будущего, наступает другой (фото: toptenz.net).

2020
Большинство людей будет иметь несколько компьютеров, хотя смысловая нагрузка самого термина тоже изменится. Вычислительная мощность компьютеров стоимостью до $4000 достигнет 20 квадриллионов вычислений в секунду. Микрокомпьютеры будут встраиваться повсеместно – в одежду, ювелирные изделия, мебель и даже в стены. Это же касается фото и видеокамер, объективы которых уменьшаться до размера булавочной головки.

Люди получат системы виртуальной реальности, формирующие изображение непосредственно на их сетчатке. Пользователи будут общаться со своими компьютерами через двусторонний речевой и жестовый интерфейс, практически не пользуясь клавиатурой. Кабели и проводные интерфейсы периферийных устройств почти полностью исчезнут.

Виртуальность в очках GearVR (изображение: vrscout.com).

Все студенты получат доступ к компьютерам. Основное обучение будет построено в виде дистанционных адаптивных курсов, на которых слушатели и преподаватели будут присутствовать удалённо.

Слепые и слабовидящие люди смогут надевать очки, которые будут интерпретировать реальный мир с помощью речи. Аналогично глухие люди станут использовать носимые устройства, преобразующие речь в текст или знаки, а музыку – в образы или тактильные ощущения. Также появится искусственная сетчатка, бионическое ухо и другие нейроимплантаты, но они будут существовать в ограниченном числе.

Бионическое ухо, созданное в Принстонском университете (фото: Frank Wojciechowski).

Пациенты с повреждениями спинного мозга вновь смогут ходить, используя экзоскелет с управлением через интерфейс мозг – компьютер или непосредственные команды от собственных нервных окончаний.

Появятся многочисленные устройства обратной тактильной связи. Например, перчатки или даже целые костюмы, транслирующие удалённые прикосновения. Они будут использоваться в системах виртуальной реальности и для более эмоционального общения людей через интернет, включая виртуальный секс.

Запрограммированная сексуальность (изображение: blogspot.com).

Объёмные решётки из нанотрубок вытеснят кремний из микроэлектроники. Вместо традиционных алгоритмов массово начнут использоваться параллельные нейронные сети и генетические алгоритмы.

Системы автоматического перевода станут настолько эффективными, что будут широко использоваться в профессиональных областях и повседневной жизни.

2021
Доступ в интернет будет доступен с 85% земной поверхности. Он станет преимущественно беспроводным и очень дешёвым. Формальная оплата за него будет списываться автоматически.

Коллаж по материалам bidnessetc.com.

Компьютерные программы научатся создавать предметы искусства на уровне современников, или даже лучше них. Появятся созданные AI картины, музыкальные композиции и скульптуры.

Бумажные книги станут раритетом. Основным средством для просмотра текстов будут тонкие легкие портативные дисплеи с очень высоким разрешением.

2022
Роботы станут настолько же привычными, как домашние животные. Правительства развитых стран начнут принимать законы, регулирующие взаимоотношения между людьми и роботами. На несколько лет раньше это произойдёт с виртуальными персонажами, общению с которыми некоторые станут уделять больше времени, чем беседам с живыми людьми.

Все ходы записаны! (изображение: imagine.pics).

2024
Системы автопилота и помощи водителям будут широко распространены в легковых, грузовых автомобилях и общественном транспорте. В ряде стран людям вовсе запретят управлять автомобилем без электронного ассистента водителя. В период с 2020 по 2025 годы появятся компактные персональные летательные аппараты.

2025
Носимая электроника начнёт вытесняться имплантируемой. Мы научимся эффективно бороться с процессами старения и будем постоянно продлевать свою жизнь с помощью нанороботов и других технологий, которым пока нет даже названия.

2028
Альтернативная энергетика станет одной из ключевых технологий для развития всех остальных. Она будет утверждена как доминирующая концепция. Солнечные батареи станут настолько эффективными, что их хватит на покрытие большей части энергетических затрат.

Солнечная электростанция Gemasolar вблизи Севильи (фото: swns.com).

2029
Программа не только сможет полностью пройти тест Тьюринга, а сделает это лучше многих реальных собеседников. Компьютер за тысячу долларов будет на порядки превосходить мозг среднего человека в большинстве областей.

Моделирование мозга станет гораздо точнее. Будут определены функции сотен различных субрегионов, алгоритмы их развития и работы. Они будут расшифрованы и включены в алгоритмы нейронных сетей.

2031
Многие люди добровольно станут киборгами, а из-за обилия имплантатов будет переосмыслен и сам термин «человеческое существо». Органы будут изготавливать машины в любой крупной больнице.

Появятся компьютерные имплантаты с прямым подключением к мозгу и отдельным группам нейронов. Они будут способны наделить человека сверхспособностями – усилить восприятие, улучшить память, увеличить скорость реакции и сократить время обучения.

3D печать органов уже не выглядит фантастикой (изображение: Frank Wojciechowski).

2033
Компьютеры станут обучаться без участия человека. Небиологические формы интеллекта объединят тонкость организации человеческого разума со скоростью, памятью и безграничными возможностями обмена знаниями машинного интеллекта.

Практически все автомобили станут самоуправляемыми. Сельскохозяйственные работы и системы транспорта также будут полностью автоматизированы.

2034
Развитие ИИ приведёт к появлению общественных движений за права машин. Глобальная программа орбитальной защиты будет эффективно предотвращать падение на Землю крупных метеоритов и астероидов.

Ле Боуг (Les Baugh) потерял в аварии обе руки, а теперь управляет двумя роботизированными благодаря специалистам из университета Джона Хопкинса (фото: jhuapl.edu).

2038
Трансгуманизм станет одним из ключевых направлений. Нейроимплантаты позволят быстрее получать профориентацию и любые специфические познания. Собственные клетки тела можно будет запрограммировать на новые функции и лечение болезней.

2041
Инернет-трафик возрастёт в сотни миллионов раз, а поисковые системы будут встроены повсюду. Запросы в них можно будет отсылать даже силой мысли через BCI.

2045
Первая реализация физического бессмертия: нанороботы помогают преодолевать апоптоз и защищают организм от любых негативных воздействий.

Рэй Курцвейл на конференции TED (фото: blog.ted.com).

2049
Еда обычно ассемблируется нанороботами из подручных материалов. Такая пища совершенно неотличима от “природной”, но может быть как угодно видоизменена простой модификацией программы. Например, она может стать более или менее калорийной, изменить содержание аминокислот, витаминов, микроэлементов, или даже изначально включать в свой состав ферменты для её переваривания. Технология производства синтетической пищи решит проблему голода и сделает добычу продовольствия независимой от климатических условий и наличия природных ресурсов.

Различие между виртуальной реальностью и тем, что пока принято называть «настоящим миром», полностью сотрётся. Способствовать этому будет как развитие систем дополненной реальности, так и тот факт, что практически все физические объекты смогут выполнять немедленную самосборку или изменение своих свойств.

Кадр из фильма Ex Machine.

2072 – 2099
Нанотехнологии породят пикотехнологии. Люди научатся манипулировать структурами размерностью в одну триллионную долю метра. Начнётся эра технологической сингулярности, которая распространится за пределы Земли вместе с человечеством. Наше мышление больше не обладает преимуществами над искусственным разумом. Люди и машины слились на всех уровнях бытия. Многие люди вообще не имеют постоянной формы. Они существуют в виде программ, их сознание способно контролировать сразу несколько разных физических тел и создавать новые. Границы между вещественными проявлениями личностей постепенно стираются, поэтому невозможно точно определить, сколько людей живёт на Земле и за её пределами.

Что нас ждёт в XXI веке? Футурологический прогноз Рэя Курцвейла

Публикуем наиболее полный футурологический прогноз Рэя Курцвейла, технического директора Google, который как никто другой знает, куда мы идём и что нас ожидает в ближайшем будущем.

Люди викторианской эпохи представляли, что через 100 лет в городах появятся движущиеся тротуары, дома, которые можно передвигать по рельсам, навесы от плохой погоды, личные дирижабли и другие буржуазные изыски. Дальше подобных урбанистических усовершенствований фантазии викторианских романтиков не простирались, хотя многие идеи нашли своё воплощение в течение XX века.

Но что нас ждёт в XXI веке? И о чём можем фантазировать мы, жители цифровой эпохи, для которых искусственный интеллект и «умные технологии» стали обычным делом? О сверхспособностях? О ещё более «умных технологиях»? Или о возвращении старых добрых изобретений — вроде дирижабля?

Гадать можно бесконечно, а можно просто изучить наиболее полный футурологический прогноз Рэймонда Курцвейла, технического директора Google. Он публикует свои прогнозы технических достижений современной цивилизации с 1990-х гг., и если попробовать собрать все предсказания, сделанные им за 25 лет в интервью, лекциях, книгах и блогах, можно проследить историю вероятного будущего с 2020 года по 2099 г. Итак, будущее глазами Рэя Курцвейла.

2020 – Провода и кабели для персональных и периферийных устройств любой сферы уйдут в прошлое.

2020 – Персональные компьютеры достигнут вычислительной мощности, сравнимой с человеческим мозгом.

2021 – Беспроводной Интернет покроет 85% поверхности Земли.

2022 – В США и Европе начнут принимать законы, регулирующие отношения людей и роботов. Права и обязанности роботов, их деятельность и любые ограничения будут строго регламентированы.

2024 – Элементы компьютерного интеллекта станут обязательными в автомобилях, а людям будет запрещено садиться за руль машины, не оборудованной компьютерным помощником.

2025 – Появление и развитие массового рынка гаджетов-имплантатов.

2026 – Благодаря научному прогрессу, за единицу времени мы будем продлевать свою жизнь на больше времени, чем прошло.

2027 – Персональный робот, способный выполнять сложные действия, станет такой же привычной вещью, как посудомоечная машина или кофеварка.

2028 – Солнечная энергия станет настолько дешёвой и распространенной, что будет удовлетворять всей суммарной энергетической потребности человечества.

2029 – Компьютер сможет пройти тест Тьюринга, доказывая наличие у него разума в человеческом понимании этого слова. По мнению Курцвейла, это будет достигнуто благодаря компьютерной симуляции человеческого мозга.

2030 – Благодаря расцвету нанотехнологий в промышленности производство продуктов значительно подешевеет.

2031 – 3D-принтеры для печати человеческих органов будут использоваться в любых больницах.

2032 – Нанороботы начнут использовать в медицинских целях: они смогут доставлять питательные вещества к клеткам человека, удалять отходы и проводить детальное сканирование человеческого мозга, что поможет лучше понять детали его работы.

2033 – На дорогах появятся самоуправляемые автомобили.

2034 – «Первое свидание человека с искусственным интеллектом» — своеобразное продолжение фильма «Она», но только с небольшими поправками: виртуальную возлюбленную можно оборудовать «телом», проецируя изображение на сетчатку глаза, – например, с помощью контактных линз или очков виртуальной реальности.

2035 – Космическая техника станет достаточно развитой, чтобы обеспечить надёжную защиту Земли от угрозы столкновения с астероидами.

2036 – Используя такой же подход к биологии, как к программированию, человечеству впервые удастся запрограммировать клетки для лечения болезней, а использование 3D-принтеров позволит выращивать новые ткани и органы.

2037 – Гигантский прорыв в понимании тайны человеческого мозга: будут определены сотни различных субрегионов со специализированными функциями, а некоторые алгоритмы, которые кодируют развитие этих регионов, будут расшифрованы и включены в нейронные сети компьютеров.

2038 – Появление роботизированных людей, продуктов трансгуманистичных технологий. Эти «новые Франкенштейны» будут оборудованы дополнительным интеллектом (например, ориентированным на конкретную узкую сферу знаний) и разнообразными имплантатами – от глаз-камер до дополнительных рук-протезов.

2039 – Наномашины будут имплантироваться прямо в мозг и осуществлять произвольный ввод и вывод сигналов из клеток мозга. Это приведет к виртуальной реальности «полного погружения», не требующей никакого дополнительного оборудования.

2040 – В человеческий организм начнут вживляться гаджеты, которые позволят осуществлять поиск не только с помощью языка, но и посредством мыслей, а результаты поисковых запросов будут выводиться на экран тех же линз или очков.

2041 – Предельная пропускная способность интернета станет в 500 млн раз больше, чем сегодня.

2042 – Первая потенциальная реализация бессмертия – благодаря армии нанороботов, которая будет дополнять иммунную систему и «вычищать» болезни.

2043 – Человеческое тело сможет принимать любую форму, благодаря большому количеству нанороботов. Внутренние органы будут заменяться кибернетическими устройствами гораздо лучшего качества.

2044 – Искусственный интеллект станет в миллиарды раз более разумным, чем биологический.

2045 – Наступление технологической сингулярности. Земля превратится в один гигантский компьютер.

2099 – Процесс технологической сингулярности распространяется на всю Вселенную.

Впечатляет, не так ли? По мнению Курцвейла, всего каких-то 30 лет отделяют нас от технологической сингулярности — этого вожделенного, стабильного и непостижимого рая техносферы, за которым, кстати, неизвестно ещё что стоит. Впрочем, иногда и пары лет хватает, чтобы повернуть историю вспять, не так ли? Поэтому, кажется, лучшее, что мы сейчас можем сделать, — подумать не о будущем, а о настоящем, попытаться изменить не мир, а себя.

По материалам: Marcdice, Reddit, Ubr.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Прогноз Артура Кларка на 21 век

Даже тем, кто научной фантастики не читает и вообще на дух не переносит, известно имя Артура Кларка. Славу ему принесли не только многочисленные романы, но и фильм «2001: Космическая Одиссея», поставленный по сценарию Кларка великим Стэнли Кубриком, и частые выступления на страницах самых престижных мировых периодических изданий.

Среди современных признанных оракулов английский фантаст и популяризатор науки —авторитет первостатейный. И что особенно любопытно: сам немало преуспевший на ниве пророчеств — но строго научных! — Кларк страстно и энергично борется с любыми проявлениями шарлатанства, с лжепророками и прорицателями, превратившими данный промысел в беспроигрышный бизнес.

В нашей стране широко известны его многочисленные научно-фантастические романы. Но не менее интересны в прогностическом плане публицистические и научно-популярные книги Кларка — «Черты будущего» (1962; именно в этой книге автор нарисовал свою первую обстоятельную «хронологию будущего»), «1984: Весна, выбор будущего» (1984), «20 июля 2020 года. Жизнь в XXI веке» (1986). И даже то, что многие из высказанных там прогнозов не сбылись — или вряд ли сбудутся в те сроки, что указал знаменитый фантаст, — не повредило высокой репутации писателя.

ФАНТАСТИКА С ОПТИМИЗМОМ И ИРОНИЕЙ

И вот в самом преддверии 2000 года пророк предпринял вторую попытку нарисовать «хронологию будущего». Она появилась в Интернете на веб-страничке AsiaNews — и, наверное, поэтому в предвидениях Кларка чувствуется некий «ориенталистский душок».

Как можно судить по таблице, английскому писателю-фантасту за прошедшие три с половиной десятилетия не изменило чувство технологического оптимизма правда, изрядно скорректированного. При этом Кларк сохраняет по отношению к своим прогнозам определенную иронию и вообще не склонен вставать в позу безгрешного пророка. Это подтверждает уже авторское вступление, которое стоит процитировать целиком:

«Несмотря на многочисленные утверждения обратного, никто не в состоянии предсказать будущее. И лично я всегда сопротивлялся любым попыткам наклеить мне ярлычок «пророка». Я бы предпочел другой термин: «экстраполятор». Все, что я пытался сделать — по крайней мере в своих научно-популярных книгах, — это представить читателю веер возможных будущих. При этом не забывая добавить, что любое, даже самое замечательное предвидение может не пережить и считанных лет и превратиться в абсурд благодаря какому-нибудь абсолютно непредвиденному изобретению или событию.

Классическим примером может служить высказывание председателя совета директоров фирмы IBM, сделанное в конце 1940-х годов: глава будущего компьютерного гиганта утверждал тогда, что спрос мирового рынка на компьютеры вряд ли превысит 5 (!) экземпляров. Уже сегодня в моем рабочем кабинете их больше — и они продолжают размножаться, как кролики.

Хотя, возможно, не мне критиковать Томаса Уотсона-старшего, которому и принадлежит тот исторический прогноз. В рассказе «Транзит Земли» (1970) я предположил, первая высадка на Марс произойдет и 1994 году. Сегодня я думаю иначе: хорошо, если нам удастся осуществить подобную задачу году эдак к 2010-му.

С другой стороны, в 1951 году, когда была опубликована другая моя книга, «Прелюдия к космосу», я еще считал себя умеренным оптимистом, полагая, что впервые человек ступит на Луну в 1978-м. Однако Армстронг и Олдрин обставили меня почти на десятилетие.

И все-таки лично мне, полагаю, есть чем гордиться. Орбитальные спутники связи сегодня расположены на орбите именно там, куда я их поместил в своей статье еще в 1945-м. И мне, разумеется, приятно слышать, как люди произносят: «орбита Кларка»! Пусть даже единственная причина состоит в том, что выговорить «геостационарная» просто чуть сложнее.

А целая глава под названием «Синдром Столетия» в моем романе «Дух Великих Отмелей» (1990), может быть, впервые сделала достоянием широких читающих масс (специальная литература не в счет) то, что сегодня известно под пугающим названием «вирус-2000».

А я ведь не только указал на его возможное происхождение, но и предложил способы лечения!

Но даже приняв во внимание все сказанное выше, мою схему предвидений на XXI столетие непременно следует воспринимать с оговорками — подобными тем предупреждениям, что печатают на пачках сигарет. Что-то вроде:

«Помните — чтение прогнозов опасно для вашего здоровья!».
Относительно некоторых указанных событий (особенно это касается космических исследований) я почти уверен в датах и сроках. Никакого секрета тут нет: «. сами события и технические свершения запланированы уже сегодня, и, если не произойдет ничего экстраординарного, все случится так и тогда, как я предсказываю. Хочу верить, что и в других случаях интуиция меня не подвела, — хотя по поводу многих прогнозов как раз сто раз предпочел бы ошибиться!»

Статья печатается с сокращениями, целиком она была напечатана в журнале «2000»- мы рекомендуем этот журнал всем интересующимся футурологией.

1 января. Начало нового века и нового тысячелетия. Автоматический зонд «Кассини», запущенный в октябре 1997 года и подлетевший к Сатурну в 2000 году, начал исследования колец и спутников планеты. Другой зонд — «Галилей», запущенный в октябре 1989 года, продолжил исследования другой планеты-гиганта — Юпитера (а также его спутников). Под поверхностью ледяных океанов крупнейшего спутника — Европы — обнаружена жизнь, оказавшаяся поразительно похожей на земную.

Поступил в коммерческую продажу первый прибор для получения «чистой» и безопасной энергии путем низкотемпературной ядерной реакции. Это событие возвестило об окончании эры сжигаемого ископаемого топлива (Fossil-Fuel Age), что не могло не вызвать волну экономических и геополитических потрясений. А американские ученые Понс и Флейшман, открывшие в 1989 году «холодный термояд», получили Нобелевскую премию.

Автомобильной промышленности дано 5 лет на то, чтобы полностью заменить все двигатели внутреннего сгорания на новые, использующие энергию «холодного термояда». Запущена американская автоматическая станция Mars Surveyor (с посадочным отсеком и автономной тележкой-«марсоходом»).

Появился первый официально зарегистрированный человеческий клон.

Станция Mars Surveyor доставила на Землю первый образец марсианской почвы. Далай-лама возвратился в Тибет.

В Индии закрыта последняя угольная шахта на Земле.

НАСА запустило на орбиту орбитальный телескоп следующего поколения (наследник ныне существующего «Хаббла»). Президент Чандрика Хамаратунга получил Нобелевскую премию мира за восстановление мира в Шри-Ланке.

26 июля постановщик фильма «2001: Космическая Одиссея» кинорежиссер Стэнли Кубрик (которому в этот день исполнилось бы 80 лет) посмертно награжден специальной премией «Оскар» — «За общий вклад в киноискусство».

В результате случайного взрыва атомной боеголовки полностью стерт с лица земли город в Северной Корее. После недолгих дебатов в Организации Объединенных Наций принято решение об окончательном уничтожении всего ядерного оружия.

Разработаны первые квантовые генераторы, «качающие» энергию прямо из космоса. Доступные как в домашнем, так и в портативном исполнении и требующие всего нескольких киловатт внешнего питания, они могут обеспечивать энергией практически бесконечно. Закрыты все электро- и атомные станции: эпоха линий электропередачи и распределительных щитов завершена! Несмотря на протесты против «правительства Старшего Брата» (намек на незримого диктатора из знаменитой антиутопии Джорджа Оруэлла «1984». — В. Г.), электронный мониторинг фактически «выдавил» из общества профессиональную преступность.

2011
Заснята на пленку самая крупная форма жизни из сохранившихся на Земле: гигантский 75-метровый осьминог, постоянно проживавший в Марианской впадине. По странному совпадению, в тот же год еще более крупные морские существа обнаружены в океанах спутника Юпитера — Европы. Это случилось после того, как робот-разведчик пробурил первую скважину в толще льда, открыв человечеству невиданное богатство внеземной жизни.

Начали регулярные полеты первые аэрокосмолеты (комбинация самолета и космического корабля). История космических путешествий повторила историю авиации, только все происходило гораздо медленнее, поскольку технологические проблемы выросли на порядок: от полета Юрия Гагарина до первых коммерческих рейсов прошло вдвое больше времени, чем от биплана братьев Райт до лайнера DC-3.

Пассажир одного из коммерческих космических рейсов — принц Брунея — стал первым из членов «августейших фамилий», слетавших в космос.

2014
Началось строительство первой орбитальной гостиницы — Hilton Orbiter Hotel. В качестве стройматериала решено использовать гигантские отработанные топливные баки «шаттлов», которым ранее просто давали сгорать в верхних слоях атмосферы.

2015
В качестве неизбежного побочного продукта квантовых генераторов человек получил полный контроль над материей на атомном уровне. Реализована древняя мечта алхимиков — причем в коммерческих масштабах. Результатом этого стали события поистине сенсационные: за считанные годы цены на свинец и медь превзошли цену на золото, поскольку первые больше и чаще использовались в промышленности.

2020
Все мировые валюты прекратили существование, а единственной мерой обмена стал мегаватт-час.

2020
16 декабря, в день открытия «Орбитального Хилтона», среди первых посетителей был сэр Артур Кларк, приглашенный по случаю его 100-летия. В Китае проведены первые всенародные свободные выборы в парламент.

2020
Крупный метеорит упал в районе Северного полюса. Человеческих жертв не было, однако поднятая взрывом волна цунами вызвала значительные разрушения у берегов Канады и Гренландии. В результате был наконец запущен обсуждавшийся долгие годы проект «Спасатель» (Safeguard) — создание системы обнаружения и уничтожения (или отклонения) опасных метеоров и комет.

2020
Искусственный интеллект достиг в своем «развитии» уровня человеческого мозга. С этого момента на Земле началось сосуществование двух разумных форм жизни, причем вторая эволюционировала со скоростью, недоступной биологической эволюции. К ближайшим звездам отправились первые корабли, снабженные системами искусственного интеллекта.

2021
Первые люди высадились на Марсе, и сюрпризы не заставили себя ждать.

2022
Точные живые «реплики» динозавров были клонированы из ДНК, генерированной с помощью компьютеров. Во Флориде открыт первый Парк Триасового периода. Невзирая на ряд неприятных инцидентов, началась реализация программы замены охранных собак специально обученными мини-динозаврами.

2024
Пойманы инфракрасные сигналы, шедшие из центра Млечного пути. То, что они посланы высокоразвитой технологической цивилизацией, не вызывало сомнений, однако все попытки расшифровать послания не увенчались успехом.

2025
Бурный рост нейробиологических исследований привел ученых к полному пониманию того, как функционируют все органы чувств, после чего стало возможным прямое подключение к органам зрения, слуха, осязания и т.п. Результатом этой нейробиологической революции стала «мозгокепка» (Braincap) — дальний потомок примитивных walkman’ов XX века. Перед человеком с «мозгокепкой» на голове, плотно прижатой к черепу, отныне открывалась целая вселенная чувств и восприятии — реальных или искусственных, и появилась даже возможность непосредственно обмениваться мыслями с другими людьми в реальном времени. Кроме использования «мозгокепок» в индустрии развлечений и воображаемых путешествий, изобретение произвело переворот в медицине: отныне врач мог непосредственно испытывать все симптомы своего пациента. А также в юриспруденции: сознательная ложь подсудимого или свидетелей теперь теряла всякий смысл. Поскольку исправно функционировать прибор мог лишь на абсолютно обритом черепе, бурный расцвет пережила парикмахерская индустрия — в буквальном смысле: как изготовление париков!

2026
Сингапур стал первой страной, законодательно внедрившей принцип Честности Рекламы.

2036
Китай превзошел США по уровню национального валового продукта, став единоличным экономическим лидером в мире.

2040
Доведен до состояния совершенства «универсальный репликатор», основанный на достижениях нанотехнологии: отныне при наличии достаточного количества сырья и информационной матрицы можно было в точности копировать любой материальный объект какой угодно сложности. В буквальном смысле: «бриллианты или деликатесы — из кучи грязи». В результате этого открытия отошли в историю сельское хозяйство и промышленность, а вместе с ними — и то, что составляло саму суть существования человечества на протяжении его долгой истории: рутинная работа, физический и даже частично творческий труд! Настоящий бум испытали сферы искусства, развлечений и образования. Общество, веками и тысячелетиями основанное на охоте и сборе урожая, вынуждено было трансформироваться, и огромные территории планеты, ранее служившие исключительно для производства пищи, обрели наконец свой первоначальный вид. А молодежь стала разряжать агрессивные инстинкты с помощью арбалетов в специально организованных для этих целей играх, полностью «компьютизированных», но не исключавших риск и чувство опасности.

2045
Доведен до совершенства Дом Будущего — полностью автономный, самообслуживаемый, работающий на замкнутом цикле и мобильный (нечто подобное почти век назад предвидел архитектор, философ и визионер Бакминстер Фуллер). Дополнительный углерод, необходимый для синтезирования пищи, отныне добывался из двуокиси углерода, извлекаемой из атмосферы.

2047
50-летие существования в качестве независимой свободной области Китая Гонконг отметил полной отменой пограничных формальностей и рогаток на границе с материковым государством.

2050
«Бегство от Утопии». Миллионы людей, у которых эта мирная, лишенная возбуждающих моментов эпоха вызвала лишь скуку, решили с помощью криогеники «эмигрировать» в будущее. Надеясь, что там их ожидает жизнь, полная настоящих приключений. С этой целью в Антарктике и под полярными районами на Луне созданы обширные хранилища замороженных до лучшей поры тел — «гибернакулы».

2051
Огромные неосвоенные лунные территории отданы земным колонистам. Колонии управляются роботами и находятся на полном самообеспечении, а основу населения составляют старики, переселившиеся с Земли в надежде прожить дольше в условиях ослабленной лунной гравитации.

2057
4 октября — 100-летие первого спутника. Юбилей торжественно отмечался людьми не только на Земле, но и на Луне, Марсе, Европе, Ганимеде и Титане, а также на орбитальных станциях, кружащих вокруг Венеры, Нептуна и Плутона.

2061
Возвращение кометы Галлея и первая высадка людей на ее ядро. Сенсационное открытие там «спящих» и активных форм жизни подтвердило столетней давности гипотезу Хойла-Викрама-Сингхе о том, что жизнь присутствует в космосе почти повсеместно — и отнюдь не только на планетах.

2090
Человечество решило снова вернуться к широкомасштабному сжиганию «ископаемого» топлива — нефти, газа (вместо того чтобы «качать» двуокись углерода из воздуха). Это было сделано с целью предотвращения нового ледникового периода, который неизбежно наступил бы, если бы утечка двуокиси углерода продолжалась теми же темпами. Благодаря принятым мерам планета вступила в эпоху Глобального потепления.

2095
Изобретение истинного «космического двигателя» (своего рода реактивной системы, «отталкивающейся» от самой структуры пространства-времени) поставило крест на ракетах, позволив реально достигать скоростей, близких к световой. Первые экспедиции с людьми отправились к перспективным планетным системам ближайших звезд, которые до того посетили и исследовали зонды с роботами.

Топ-пост этого месяца:  Добавляем эмоций в текстовую область формы.
Добавить комментарий