Как запустить angular приложение
Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.
Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.
Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript.
Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.
Начало работы c Angular¶
Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm, если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.
После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку приложения. Путь она будет называться helloapp . В этой папке создадим новый файл package.json со следующим содержимым:
Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для сборки приложения в один файл с помощью сборщика webpack.
Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd :
И затем выполним команду npm install , которая установит все необходимые модули:
После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.
Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .
Создание компонента Angular¶
В начале файла определяется директива import , которая импортирует функциональность модуля @angular/core , предоставляя доступ к функции декоратора @Component .
Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent . В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]="name" и > к некоторой модели name .
И в конце экспортируется класс компонента AppComponent , в котором как раз определяется модель name — в данном случае это пустая строка.
Создание модуля приложения¶
Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:
Этот модуль, который в данном случае называется AppModule , будет входной точкой в приложение.
С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule . Для работы с браузером также требуется модуль BrowserModule . Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule . И далее импортируется созданный ранее компонент.
Запуск приложения¶
Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule .
Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:
Данный файл определяет полифилы — инструменты, которые необходимы для поддержки приложения на Angular старыми браузерами.
Создание главной страницы¶
Далее определим в папке src главную страницу index.html приложения:
А в элементе body определен элемент <my-app> , в который собственно и будет загружаться приложение.
Определение конфигурации¶
Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :
Данный файл определяет настройки для компилятора TypeScript. Опция " compilerOptions " устанавливает параметры компиляции. А опция " files " определяет компилируемые файлы. В нашем случае это файл приложения — main.ts , который подтягивает все остальные файлы приложения, и файл полифилов polyfills.ts .
Angular.json¶
Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json . Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:
Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.
Далее идет секция projects , которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта — helloapp .
Проект определяет следующие опции:
- projectType : тип проекта. Значение " application " указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
- root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
- sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src , где собственно определены все файлы приложения
- architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки.
Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды " build " задано значение " @angular-devkit/build-angular:browser " — данный билдер для построения использует сборщик пакетов webpack. А для команды " serve " задано значение " @angular-devkit/build-angular:dev-server " — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.
Параметр options задает параметры построения файлов. Для команды " build " здесь определены следующие опции:
- outputPath : путь, по которому будет публиковаться скомпилированное приложение
- index : путь к главной странице приложения
- main : путь к главному файлу приложения, где собственно запускается приложение Angular
- polyfills : путь к файлу полифилов
- tsConfig : путь к файлу конфигурации TypeScript
- aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Head) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется
Для команды " serve " указана только одна опцияя — browserTarget , которая содержит ссылку на конфигурацию для команды build — " helloapp:build ". То есть по сути эта команда использует ту же конфигурацию, что и команда build .
Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.
В итоге у нас получится следующая структура проекта:
Запуск проекта¶
И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve:
Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это " http://localhost:4200/ ". Если мы передаем команде флаг --open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:
Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.
Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.
Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.
| Необходимые условия: | Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки. |
|---|---|
| Цель: | Настроить локальную среду разработки Angular, создать стартовое приложение, и понять основные принципы работы. |
Что такое Angular?
Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:
- Основанный на компонентах фреймворк для создания масштабируемых веб-приложений
- Набор хорошо интегрированных библиотек, охватывающих широкий спектр функций: маршрутизация, управление формами, клиент-серверное взаимодействие и т.д.
- Набор инструментов разработчика, которые помогут вам разрабатывать, собирать, тестировать и обновлять ваш код
Когда вы создаете приложение с помощью Angular, вы пользуетесь преимуществами платформы, которая может масштабироваться от проекта, который разрабатывает один человек, до приложений корпоративного уровня. Angular разработан, чтобы максимально упростить обновление, поэтому вы можете использовать последние разработки с минимумом усилий. А самое замечательное то, что экосистема Angular состоит из огромного сообщества, включающего более чем 1.7 миллиона разработчиков, авторов библиотек и создателей контента.
Прежде, чем приступить к изучению платформы Angular, сначала стоит познакомиться с Angular CLI. Angular CLI - это быстрый, простой и рекомендуемый способ разработки Angular-приложений. Angular CLI облегчает выполнение ряда задач. Вот некоторые из них:
| ng build | Компилирует Angular-приложение в выходной каталог. |
| ng serve | Собирает и запускает ваше приложение, пересобирая его при изменении файлов. |
| ng generate | Генерирует или изменяет файлы на основе схематиков |
| ng test | Запускает модульные тесты для заданного проекта. |
| ng e2e | Собирает и запускает Angular-приложение, запуская затем сквозные тесты. |
Скоро вы сами убедитесь, что Angular CLI является полезным инструментом для создания ваших приложений.
Что вы создадите
Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.
Необходимые условия
Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:
Node.js
Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле.
пакетный менеджер npm
Angular, Angular CLI, Angular приложения зависят от npm пакетов которые обеспечивают множество функций. Для загрузки и установки npm пакетов, вам необходим пакетный менеджер npm. Это руководство использует npm через интерфейс командной строки, который устанавливается с Node.js по умолчанию. Для того, чтобы узнать какая версия npm установлена, запустите npm -v в терминале.
Настройка приложения
Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular. Для установки Angular CLI, запустите следующие команды в терминале:
Команды Angular CLI начинаются с ng , за которым следует то, что вы хотите CLI сделал. В рабочей директории (например, Desktop) выполните команду ng new , чтобы создать новое приложение под названием todo :
В текущей директории команда ng new создаст необходимое для работы маленькое Angular-приложение. Дополнительные флаги, --routing и --style , определяют, как обрабатывать навигацию и стили в приложении. В этом руководстве эти функции будут описаны позже.
Если вам будет предложено применить строгую проверку типов, вы можете ответить "yes".
Перейдите в ваш новый проект с помощью команды cd :
Запустите ваше приложение todo , выполнив команду ng serve :
Когда CLI спросить про аналитику, ответьте no .
Пока выполняется ng serve , запускать другие команды можно в новой вкладке или окне терминала. Если вы захотите остановить работу приложения, нажмите Ctrl+c в терминале, где оно было запущено.
Знакомство с вашим Angular приложением
Исходные файлы, на которых будет сосредоточено внимание в этом руководстве находится в src/app . Файлы, генерируемые CLI автоматически, на которые стоит обратить внимание:
Таким образом, с самого начала вы используете лучшие приёмы разработки.
Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.
Структура Angular приложения
Angular построен на TypeScript. TypeScript — это надмножество JavaScript, т.е. любой правильный JavaScript-код будет работать в TypeScript. TypeScript предлагает типизацию и более лаконичный синтаксис, чем простой JavaScript, который дает вам инструмент для создание более удобного в сопровождении кода и минимизации ошибок.
Компоненты — это строительные блоки Angular-приложений. Компоненты включают TypeScript-класс, который имеет декоратор @Component() , HTML-шаблон и стили.
Класс
Компонент называется ItemComponent , и имеет селектор app-item . Вы можете использовать этот селектор как и обычные HTML-теги, помещая его в другие шаблоны. Когда селектор находится в компоненте, браузер отображает шаблон этого компонента. Это руководство поможет вам создать два компонента и использовать один в другом.
Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения. Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.
HTML-шаблоны
У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать. Шаблон можно задать либо строкой, либо как путь к файлу.
Для ссылки на внешний HTML-файл, используется свойство templateUrl :
Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:
Angular расширяет HTML дополнительным синтаксисом, который позволяет вставлять динамические данные в компонент. Angular автоматически обновляет DOM, когда состояние компонента изменяется. Например, этот синтаксис можно применить для вставки динамического текста, как показано в следующем примере.
Двойные фигурные скобки говорят Angular, что содержимое внутри них нужно интерполировать. Значение для title берется из класса компонента:
Когда приложение загружает компонент и его шаблон, браузер видит следующее:
Стили
Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.
Чтобы включить стили непосредственного в декоратор компонента, используется свойство styles :
Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве styleUrls :
С помощью стилей для конкретных компонентов вы можете организовывать свой CSS так, чтобы его было легко поддерживать и переносить.
Резюме
Это ваше первое знакомство с Angular. На этом этапе всё должно быть настроено и готово к созданию Angular-приложения, а у вас быть базовое представление о том, как работает Angular. В следующей статье мы углубим эти знания и начнем создавать структуру вашего приложения списка дел.
Вашему вниманию предлагается перевод туториала «5 min quickstart» от команды Angular. Туториал описывает процесс создания «Hello World»-приложения на новом фреймворке Angular 2, который недавно получил статус «бета».
Давайте начнём с нуля и построим суперпростое приложение Angular2 на TypeScript.
Вот файловая структура:
Функционально это index.html и два файла TypeScript в папке app/ . Давайте сделаем это!
- Обустроим нашу среду разработки.
- Напишем корневой компонент Angular для нашего приложения.
- Загрузим его для того, чтобы он принял контроль над главной веб-страницей.
- Напишем главную страницу ( index.html ).
Мы действительно можем собрать QuickStart за пять минут, если будем следовать инструкциям и проигнорируем все комментарии.
Но многие из нас заинтересуются, «почему» и «как» всё это происходит, и ответ на эти вопросы займёт значительно больше времени.
Среда разработки
Нам необходимо место (папка проекта), несколько библиотек, некоторое количество настроек TypeScript и редактор с поддержкой TypeScript на ваш выбор.
Создадим новую папку нашего проекта
Добавим нужные нам библиотеки
Мы рекомендуем использовать менеджер пакетов npm для загрузки и управления библиотеками.
У вас нет npm? Установите его прямо сейчас, потому что мы будем использовать несколько раз на протяжении этого туториала.
Добавьте файл package.json в папку проекта и скопируйте в него следующий код:
Установите пакеты. Откройте окно терминала (командную строку в Windows) и запустите эту команду npm:
Сконфигурируем TypeScript
Нам необходимо довольно специфично настроить компилятор TypeScript.
Добавьте файл tsconfig.json в папку проекта и скопируйте в него следующее:
Итак, всё готово. Давайте напишем немного кода.
Наш первый компонент Angular
Компонент(Component) — это наиболее фундаментальная концепция Angular. Компонент настраивает отображение(view) — часть веб-страницы, где мы показываем информацию пользователю и реагируем на его действия.
Технически, компонент — это класс, который контролирует шаблон отображения. Мы будем писать много таких классов при создании приложений Angular. Это наша первая попытка, так что мы сделаем всё предельно просто.
Создадим подпапку, в которой будут находиться исходники
Мы предпочитаем хранить код нашего приложения в подпапке под названием app/ . Выполните следующую команду в консоли:
Добавим файл компонента
Давайте подробно рассмотрим этот файл, начиная с самого конца, где мы определяем класс.
Класс Компонента
В самом низу файла располагается пустой и ничем не занятый класс под названием AppComponent . Когда мы будем готовы создать независимое приложение, мы сможем дополнить этот класс свойствами и логикой приложения. Наш класс AppComponent пуст, потому что нам не нужно, чтобы он что-то делал в этом QuickStart.
Модули
Приложения на Angular модульны. Они включают в себя множество файлов, каждый из которых имеет определённую цель.
Более сложные приложения могут иметь дочерние компоненты, которые наследуют AppComponent в визуальном дереве. Более сложные приложения будут иметь больше файлов и модулей, как минимум столько, сколько у них есть компонентов.
QuickStart не сложен: один компонент — это всё, что нам нужно. Однако модули играют фундаментальную организационную роль даже в таком маленьком приложении.
Модули полагаются на другие модули. В приложениях Angular, написанных на TypeScript, когда нам нужно что-то, предоставляемое иным модулем, мы импортируем его. Когда другому модулю требуется сослаться на AppComponent , он импортирует символ AppComponent следующим образом:
Angular также является коллекцией библиотечных модулей. Каждая библиотека представляет собой модуль, составленный из нескольких связанных общим направлением модулей.
Если нам требуется что-то из Angular, мы импортируем это из его библиотечного модуля. И прямо сейчас нам нужно кое-что, чтобы иметь возможность определить метаданные для нашего компонента.
Метаданные компонента
Класс становится компонентом Angular, когда мы привязываем к нему метаданные. Angular нуждается в метаданных для того, чтобы понять, как нужно конструировать отображение, и как компонент взаимодействует с другими частями приложения.
Мы определяем метаданные компонента с помощью функции Component из Angular. Мы получаем доступ к этой функции, импортируя её из основной библиотеки Angular — angular2/core .
В TypeScirpt мы можем связать функцию и класс через превращение функции в декоратор. Для этого перед её названием нужно добавить символ @, и поместить её прямо перед объявлением класса.
@Component сообщает Angular, что данный класс является компонентом Angular. Объект конфигурации, отправляемый в @Component , имеет два поля: selector и template .
Свойство selector определяет обычный CSS селектор для HTML-элемента my-app , выступающего в качестве хоста. Angular создаёт и отображает экземпляр нашего AppComponent каждый раз, когда он сталкивается с my-app в родительском HTML.
Запомните селектор my-app ! Нам будет нужна эта информация, когда мы будем писать наш index.html .
Свойство template содержит шаблон компонента. Шаблон — это разновидность HTML, которая объясняет Angular, как рендерить отображение. Наш шаблон — это единственная строка HTML, объявляющая: «My First Angular App».
Теперь нам нужно как-то объяснить Angular, что этот компонент необходимо загрузить.
Запустим его
Добавьте новый файл, boot.ts , в папку app/ , и скопируйте в него следующий код:
- Браузерная функция Angular bootstrap .
- Корневой компонент приложения, который мы только что написали.
Изучить, почему мы импортируем bootstrap из angular2/platform/browser и почему мы создаём отдельный файл boot.ts , можно в приложении ниже.
Мы попросили Angular запустить приложение в браузере с нашим компонентом в качестве корневого. Однако, где же Angular его запустит?
Добавим страницу index.html
Angular отображает наше приложение в специфическом месте на нашей странице index.html . Пришло время создать этот файл.
Мы не будем класть index.html в папку app/ . Мы расположим его на один уровень выше, в корневой папке проекта.
Теперь создайте файл index.html и скопируйте в него следующее:
- Мы загружаем библиотеки JavaScript, которые нам требуются. angular2-polyfills.js и Rx.js требуются для работы Angular 2.
- Мы настраиваем нечто, что называется System , и просим его импортировать файл boot, который мы только что написали.
- Мы добавляем тэг <my-app> в <body> . Это то самое место, где обитает наше приложение!
Специфика настройки SystemJS выходит за пределы данного туториала. Мы кратко опишем часть конфигурации в приложении ниже.
Когда Angular вызывает функцию bootstrap в boot.js , он читает метаданные AppComponent , находит селектор my-app , обнаруживает тэг с именем my-app и загружает наше приложение в этот тэг.
Скомпилируем и запустим!
Откройте окно терминала и введите следующую команду
- Компилятор TypeScript в режиме наблюдения.
- Статический сервер lite-server, который загружает index.html в браузере и обновляет браузер каждый раз, когда код приложения изменяется.
Поздравляем! Вы в деле!
Внесём несколько изменений
Это изящный способ разработки приложений!
Мы закрываем окно терминала когда мы всё сделали для того, чтобы прервать одновременно компилятор и сервер.
Финальная структура
Финальная структура нашей папки проекта должна выглядеть так:
И вот наши файлы:
Заключение
Наше первое приложение делает не слишком много. Это, по сути, «Hello World» на Angular 2.
Для первого раза мы сделали всё максимально просто: написали небольшой компонент Angular, добавили немного библиотек JavaScript в index.html и запустили статический файловый сервер. В целом, это всё, что мы ожидали от «Hello World»-приложения.
У нас более серьёзные амбиции
Хорошая новость в том, что вся возня с установкой нас не касается. Возможно, мы чуть-чуть коснёмся package.json для обновления библиотек. Мы откроем index.html только если нам нужно будет добавить библиотеку или файл css-стилей.
Мы готовы к следующему шагу, и теперь наша задача — сконструировать приложение, которое демонстрирует, насколько великолепные вещи можно сделать с помощью Angular 2.
Приложения
Остаток данной главы посвящён набору приложений, более подробно излагающих кое-какие моменты, которые мы кратко затронули выше.
Здесь нет никакого критически важного материала. Читайте дальше, если вам интересны детали.
↑ Приложение: Поддержка ES6 браузерами
Angular 2 полагается на некоторые возможности стандарта ES2015, большая часть из которых уже включена в современные браузеры. Однако некоторым браузерам (таким, как IE11), требуются полифиллы (shim) для поддержки этой функциональности. Попробуйте загрузить следующие полифиллы перед другими скриптами в index.html :
↑ Приложение: package.json
npm — это популярный менеджер пакетов для node, и многие Angular-разработчики используют его для загрузки и управления библиотеками, которые необходимы их приложениям.
Мы определили пакеты, которые нам необходимы в файле npm package.json.
Команда Angular предлагает использовать пакеты, указанные в секциях dependencies и devDependencies в этом файле:
Вы можете выбрать и другие пакеты. Мы рекомендуем именно этот набор потому, что знаем, что все его компоненты хорошо работают вместе. Подыграйте нам сейчас, а позже экспериментируйте в своё удовольствие, подбирая варианты, которые будут соответствовать вашим опыту и вкусу.
В package.json может присутствовать необязательная секция scripts, в которой мы можем определить полезные команды для выполнения разработки и построения. Мы включаем несколько таких скриптов в предлагаемом нами package.json :
Мы уже видели, как можно запустить компилятор и сервер одновременно с помощью этой команды:
- npm run tsc — запуск компилятора TypeScript на один проход
- npm run tsc:w — запуск компилятора TypeScript в режиме наблюдения; процесс продолжает работу, перекомпилируя проект в тот момент, когда засекает изменения, внесённые в файлы TypeScript.
- npm run lite — запускает lite-server, легковесный статический файловый сервер, написанный и поддерживаемый Джоном Папа с великолепной поддержкой приложений Angular, которые используют маршрутизацию.
↑ Приложение: Предупреждения и ошибки npm
↑ Приложение: Конфигурация TypeScript
Мы добавили конфигурационный файл ( tsconfig.json ) в наш проект, чтобы объяснить компилятору, как нужно генерировать файлы JavaScript. Подробнее про tsconfig.json вы можете узнать из официальной TypeScript wiki.
Опции и флаги, которые мы добавили в файл, являются наиболее важными.
Хотелось бы немного подискутировать насчёт флага noImplicitAny . Разработчики TypeScript расходятся во мнении относительно того, должен он быть установлен как true или false . Здесь нет точного ответа, и мы всегда можем изменить флаг позже. Но наш выбор может серьёзно повлиять на крупные проекты, так что он достоин дискуссии.
Когда noImplicitAny установлен в позицию false , компилятор, если он не может вывести тип переменной в зависимости от того, как переменная используется, скрыто устанавливает тип переменной в any . Это и значит «скрытый (implicit) any ».
Когда noImplicitAny установлен в позицию true , и компилятор TypeScript не может вывести тип, он всё ещё генерирует файл JavaScript, но также и отчитывается об ошибке.
В этом QuickStart и во многих других примерах этого Developer Guide мы устанавливаем noImplicitAny в позицию false .
Разработчики, которые предпочитают более строгую типизацию, должны устанавливать noImplicitAny в позицию true . Мы всё ещё можем установить тип переменной в позицию any, если это кажется наилучшим выбором, но мы должны сделать это явно после того, как немного поразмыслим над необходимостью этого шага.
Если мы устанавливаем noImplicitAny в true , мы можем также получить скрытые ошибки индексации. Если нам кажется, что это больше раздражает, чем помогает, мы можем выключить их с помощью следующего флага.
↑ Приложение: Конфигурация SystemJS
QuickStart использует SystemJS для загрузки приложения и библиотечных модулей. Однако не забывайте, что у него есть рабочие альтернативы, такие как высоко оцениваемый сообществом webpack. SystemJS — это неплохой выбор, но мы хотим дать ясное понимание, что это лишь выбор, а не предпочтение.
Все загрузчики модулей требуют конфигурирования, и любое конфигурирование загрузчика становится тем сложнее, чем более разнообразнее становится файловая структура — вплоть до того, что мы начинаем задумываться об объединении файлов для повышения производительности.
Мы рекомендуем вам хорошо разобраться в загрузчике, который вы выберете.
Приняв во внимание эти предостережения, что мы можем сделать?
Узел packages указывает SystemJS, что делать, если он видит запрос на модуль из папки app/ .
Наш QuickStart создаёт такие запросы каждый раз, когда в любом TypeScript-файле приложения обнаруживается подобный оператор импорта:
Обратите внимание, что наименование модуля (после from ) не содержит расширения файла. Конфигурация packages задаёт SystemJS расширение по-умолчанию как 'js', то есть файл JavaScript.
Это разумно, потому что мы компилируем TypeScript в JavaScript прежде, чем запускать приложение.
В демо-примере на plunker мы компилируем в JavaScript прямо в браузере на лету. Это неплохо для демо, но это не может стать нашим выбором для разработки или релиза.
- Мы можем видеть ошибки и предупреждения времени компиляции, которые скрыты от нас в браузере.
- Прекомпиляция упрощает процесс загрузки модулей, да и намного проще найти проблему, когда компиляция является отдельным внешним процессом.
- Прекомпиляция даёт большую производительность, потому что браузеру нет нужды тратить время на компиляцию.
- Наша разработка движется быстрее, потому что мы всего лишь перекомпилируем изменившиеся файлы. Разница станет заметна, когда наше приложение будет содержать множество файлов.
- Прекомпиляция подходит беспрерывному процессу разработки — построению, тестам, деплою.
Вызов System.import заставляет SystemJS импортировать файл boot ( boot.js … после компиляции boot.ts , помните?) boot — это файл, где мы просим Angular запустить приложение. Мы также отлавливаем и логируем ошибки запуска в консоль.
Все прочие модули загружаются с помощью запроса, который создаётся оператором импорта или самим Angular.
↑ Приложение: boot.ts
Загрузка платформоспецифична
Мы импортируем функцию bootstrap из angular2/platform/browser , не из angular2/core . Этому есть причина.
Мы можем назвать «ядром» только те возможности, которые одинаковы для всех целевых платформ. Действительно, многие приложения Angular могут быть запущены только в браузере, и мы будем вызывать функцию bootstrap из этой библиотеки наибольшее количество времени. Вполне «core»-фича — если мы пишем исключительно для браузера.
Но ведь вполне возможно загружать компонент в ином окружении. Мы можем загрузить его на мобильном устройстве с помощью Apache Cordova. Мы можем захотеть отрендерить начальную страницу нашего приложения на сервере для увеличения производительности или содействия SEO-продвижению.
Эти платформы требуют других вариантов bootstrap-функции, которые мы будем загружать из другой библиотеки
Зачем создавать отдельный файл boot.ts?
- Сделать всё правильно — это просто.
- Удобство тестирования.
- Удобство переиспользования.
- Разделение обязанностей.
- Изучение импорта и экспорта.
Это просто
Да, это дополнительный шаг и дополнительный файл. Насколько это сложно в целом?
Мы увидим, что отдельный файл boot.ts предпочтительней для большинства приложений — даже если это не столь важно для QuickStart. Давайте вырабатывать хорошие привычки сейчас, пока цена этому невысока.
Удобство тестирования
Мы должны думать об удобстве тестирования с самого начала, даже если мы знаем, что никогда не будем тестировать QuickStart.
Это сложно — тестировать компонент, когда в этом же файле присутствует функция bootstrap . Каждый раз, когда мы загружаем файл компонента для тестирования, функция bootstrap пытается загрузить приложение в браузере. Это вызывает ошибку, потому что мы не ожидали запуска целого приложения — лишь компонента.
Перемещение bootstrap -функции в boot.ts убирает ложную ошибку и оставляет нас с чистым файлом компонента.
Переиспользование
Мы рефакторим, переименовываем и перемещаем файлы в течение эволюции нашего приложения. Мы не сможем сделать ничего из этого, пока файл вызывает bootstrap . Мы не можем переместить его. Мы не можем переиспользовать компонент в другом приложении. Мы не можем отрендерить компонент на сервере для увеличения производительности.
Разделение обязанностей
Задача компонента — представлять отображение и управлять им.
Запуск приложения не имеет ничего общего с управлением отображением. Это совершенно другая обязанность. Проблемы, с которыми мы столкнулись при тестировании и переиспользовании, исходят именно из этого ненужного смешения обязанностей.
Таким образом, Angular предлагает решение для всех настроек: Angular CLI . Мы можем начать разработку проекта Angular в течение нескольких минут с помощью Angular CLI.
Что такое Angular CLI?
CLI обозначает интерфейс командной строки. Angular CLI используется для автоматизации операций в проектах Angular, вместо их выполнения вручную. CLI поддерживает разработчиков в проекте Angular от начала до конца. Например, Angular CLI может использоваться для:
Конфигурации, настройки среды
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Создания компонентов, служб, системы маршрутизации
Запуска, тестирования и развертывания проекта
Установки сторонних библиотек, таких как Bootstrap, Sass и т. д. (с помощью Webpack )
и многого другого.
Angular CLI значительно экономит силы и время разработчиков. Вы можете посетить официальный сайт по ссылке ниже:
Как запустить приложение Angular с помощью CLI?
Если вы посетите официальный веб-сайт по приведенной ссылке, вы увидите, что там описаны некоторые команды. Вот 4 основных этапа запуска приложения Angular:
Установка Node Package Manager (NPM) (обязательное условие)
Установка Angular CLI
Создание приложения Angular с помощью CLI
1. Установка NPM
Для Angular требуется установка в вашей системе Node.js (версия 8.x или 10.x). Если он у вас уже установлен, вы можете пропустить эту часть.
У Node есть Node Package Manager (NPM) , который нам нужен для установки Angular CLI и других программ (пакетов). Вы можете скачать NPM отсюда.
После завершения установки перейдите в терминал или командную строку Windows и введите node -v, чтобы проверить, какая версия у вас установлена:
В моей системе установлена версия 8.11.4
2. Установка Angular CLI
После того, как вы установили NPM, вы можете приступить к установке Angular CLI. Откройте терминал или командную строку и введите следующую команду:
Читайте также: