Здесь мы снова идем с более новой и яркой версией нашего действительно интерфейсного, поддерживаемого Google, фреймворка. На этот раз версия 7, и с Angular были обновлены также Angular Material, Angular CLI и Flex-Layout.
Я не просматриваю журналы изменений, но вот ссылки для каждого из них:
Angular 7 - Блог Angular
Angular CLI 7 - Angular CLI Github
Угловой материал - Угловой материал Github
Flex-Layout - Flex-Layout Github
TL; DR журнала изменений:
Подсказки CLI, виртуальная прокрутка, перетаскивание, производительность приложений, незначительные обновления cli, материалов и гибкого макета.
Давайте начнем. Прежде всего, для обновления до новой версии:
Тогда давайте посмотрим на меню.
Все выглядит знакомо, давайте начнем с нового проекта.
СЮРПРИЗ! новый кли подсказывает!
Добавление модуля маршрутизации автоматически.
Выбор между CSS / SCSS / SASS / LESS / Stylus для схем и компиляции.
Спустя чуть больше минуты все инициализируется, и, кроме удивительной папки node_modules объемом 701 МБ, вот окончательный результат:
- Начиная сверху у нас есть сквозные тесты с использованием транспортира.
- node_modules (абсолютная единица) со всеми пакетами и зависимостями npm
- src, который содержит наш исходный код:
- приложение, которое содержит исходный код нашего приложения angular
- активы, которые будут содержать все файлы ресурсов, такие как логотипы, изображения, видео, мультимедиа…
- среды для конфигураций на основе среды
- список браузеров, в котором перечислены правила для поддерживаемых браузеров.
- favicon.ico, крошечный логотип, который появляется рядом с заголовком на вкладке браузера.
- index.html, где все начинается
- все основные файлы для тестера кармы, основной файл angular, polyfill и основной style.sass, а также jsons tslint и tsconfig
- angular.json, который содержит всю необходимую конфигурацию для angular cli с точки зрения сборки и компиляции
- package.json - список всех зависимостей в проекте.
Теперь, когда все загружено, мы можем запустить наше приложение на локальном сервере с помощью следующей команды:
И вот наше приложение:
Мы можем добавить новый модуль следующим образом:
и он создаст новый модуль в папке нашего приложения:
Если мы хотим добавить новый компонент целиком, мы можем использовать следующую команду:
И он создаст новый компонент с модулем angular, таблицей стилей, тестовым файлом и шаблоном html.
Существует ряд различных нативных схем, которые мы можем сгенерировать через cli, и многие другие могут быть добавлены через пакеты npm, если они поддерживают схемы. Вот список родных:
Напоследок я хочу показать, как создать проект для производственной среды и позволить cli делать всю магию за сценой (обфускация, связывание, компиляция, транспиляция…)
Параметр «--prod» дает команду cli изучить angular.json для производственной сборки и выполнить все требования, такие как использование правильной конфигурации, связывание, отключение параметров отладки и многое другое.
Номер 7 предлагает ряд замечательных функций, и теперь, когда мы ознакомились с основами, мы готовы сразу перейти к ним!
