JS-файл Angular Connect

Обновлено: 03.07.2024

В этом кратком руководстве показано, как создать и запустить простое приложение Angular.

Давайте начнем с нуля и создадим очень простое приложение Angular на JavaScript.

Несмотря на то, что мы начинаем работу с JavaScript, вы также можете писать приложения Angular на TypeScript, выбрав его в поле со списком на баннере.

Посмотрите, как он работает!

Запуск — это самый быстрый способ увидеть, как приложение Angular оживает.

Нажатие на эту ссылку запускает браузер, загружает образец в plunker и отображает простое сообщение:

< бр />

Функционально это index.html , styles.css и три файла JavaScript в папке app/. Мы справимся!

Конечно, мы не будем создавать много приложений, которые работают только в plunker. Давайте рассмотрим процесс, который ближе к тому, что мы делаем в реальной жизни.

Настройка среды разработки
Напишите корневой компонент Angular для нашего приложения
Добавить модуль Angular
Загрузите его, чтобы получить контроль над главной веб-страницей.
Напишите главную страницу ( index.html )
Добавьте CSS (styles.css)

Мы действительно можем создать QuickStart с нуля за пять минут, если будем следовать инструкциям и игнорировать комментарии.

Большинство из нас будет интересоваться "почему" так же, как и "как", и это займет больше времени.

Среда разработки

Нам понадобится подставка (папка проекта приложения), несколько библиотек и выбранный вами редактор.

Создать новую папку проекта

Добавим нужные нам библиотеки

Мы рекомендуем менеджер пакетов npm для получения и управления нашими библиотеками разработки.

У вас нет npm? Получите его сейчас, потому что мы будем использовать его сейчас и неоднократно в этой документации.

Добавьте файл package.json в папку проекта и скопируйте/вставьте следующее:

package.json

Не терпится узнать подробности? Мы объясняем в приложении ниже

Установите эти пакеты, открыв окно терминала (окно команд в Windows) и выполнив эту команду npm.

Во время установки могут появляться страшные сообщения об ошибках, выделенные красным цветом. Игнорируй их. Установка пройдет успешно. Дополнительные сведения см. в приложении ниже.

Наш первый компонент Angular

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

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

Создайте подпапку исходного кода приложения

Нам нравится хранить код нашего приложения в подпапке вне корня с именем src/app/ . Выполните следующую команду в окне консоли.

приложение mkdir cd

Добавить файл компонента

Мы создаем визуальный компонент с именем AppComponent путем объединения методов Component и Class, принадлежащих глобальному пространству имен ядра Angular, ng.core .

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

Давайте подробно рассмотрим этот файл.

Модули

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

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

Мы назовем его приложением и добавим все артефакты нашего кода в этот глобальный объект.

Мы не хотим загрязнять глобальное пространство имен чем-либо еще. Таким образом, в каждом файле мы заключаем код в IIFE («Выражение немедленно вызываемой функции»).

Мы передаем объект глобального пространства имен приложения во IIFE, стараясь инициализировать его пустым объектом, если он еще не существует.

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

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

Модули зависят от других модулей. В приложениях JavaScript Angular, когда нам нужно что-то, предоставленное другим модулем, мы получаем это из объекта приложения. Когда другому модулю нужно сослаться на AppComponent , он получает его из app.AppComponent следующим образом:

src/app/app.module.js (импорт)

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

Когда нам нужно что-то от Angular, мы используем объект ng.

Объект определения класса

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

Объект определения компонента

Селектор задает простой селектор CSS для основного HTML-элемента с именем my-app . Angular создает и отображает экземпляр нашего AppComponent везде, где он встречает элемент my-app в основном HTML.

Помните о селекторе моего приложения! Нам понадобится эта информация, когда мы напишем наш index.html

Свойство template содержит сопутствующий шаблон компонента. Шаблон — это форма HTML, которая сообщает Angular, как отображать представление. Наш шаблон представляет собой одну строку HTML, объявляющую «Hello Angular».

Теперь нам нужно, чтобы Angular загрузил этот компонент.

Добавить NgModule

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

Создайте файл src/app/app.module.js со следующим содержимым:

источник/приложение/app.module.js

Подробнее о конфигурации NgModule читайте в приложении ниже.

Загрузить!

Добавьте новый файл main.js в папку src/app/ следующим образом:

источник/main.js

Для запуска приложения нам нужны две вещи:

Функция Angular platformBrowserDynamic().bootstrapModule
Корневой модуль приложения, который мы только что написали.

Они оба есть в наших "пространствах имен". Затем мы вызываем bootstrapModule , передавая корневой модуль приложения AppModule .

Узнайте, зачем нам нужен bootstrapModule из ng.platformBrowserDynamic и почему мы создаем отдельные файлы js, в приложении ниже.

Мы попросили Angular запустить приложение в браузере с нашим компонентом в корне. Куда его поместит Angular?

Привет, ребята! Как твои дела ? Сегодня я пишу об Angular и о том, как нам нужно использовать возможности Javascript в наших проектах.

Во-первых, сегодня у нас три цели:

Используйте некоторые функции из нашего custom.js
Используйте глобальный объект, объявленный iron-rules.js
Интеграция Jquery в наш проект

Использование функций JS 😉

У нас есть этот файл js:

custom.js находится в каталоге assets/js. Этот файл имеет 3 элементарные функции:

поздороваться(имя)
имя_журнала(имя)
сделать что-нибудь()

Мы должны использовать их в нашем компоненте, но как мы можем это сделать?

Во-первых, нам нужно объявить custom.js в нашем файле angular.json, чтобы сделать его глобальным и доступным для всех наших приложений.

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

Наконец, мы вызываем наши 3 функции в функции onClickSayHello();
Магия, работает 😀

Использование глобального объекта, объявленного в JS-файле 😉

У нас есть внешний файл js с объектом внутри него со многими функциями, которые мы хотим использовать.

IronValidator — это объект JS с двумя методами:

проверить имя
проверитьNBusinessRules

Мы хотим использовать оба для проверки бизнес-правил в нашем компоненте, но нам нужно импортировать объект ironValidator, как мы можем это сделать? 🙁

Во-первых, нам нужно импортировать файл iron-rules.js в наш angular.json.

Во-вторых, нам нужно объявить переменную ironValidator в нашем компоненте и использовать ее, но помните, что важно использовать то же имя, что и в jsFile. По этой причине имя переменной должно быть: ironValidator.

Наконец, мы можем использовать объект ironValidator и его методы 😉

Интеграция JQuery 😮

Иногда нам нужно использовать Jquery для выполнения некоторых операций, но это неплохо! некоторые разработчики думают, что jquery — самая плохая практика в мире, но это не так.JQuery — отличная библиотека, и в небольших проектах она может быть полезна и в наше время 😉
В Angular Real Life нам часто приходится работать с шаблонами Jquery, и мы должны знать, как интегрировать эту библиотеку в наши проекты. Поехали 😉

Во-первых, нам нужно установить Jquery:

Во-вторых, нам нужно объявить этот скрипт в нашем файле angular.json.

В-третьих, мы должны ссылаться на этот JQuery в нашем компоненте:

Наконец, мы используем Jquery для получения значения текстового поля say-hello-id 😉

Демонстрационные распечатки 😀

Приветствие приложения 😉 Мы видим простое представление с текстовым полем и кнопкой. Когда пользователь нажмет кнопку, будет вызвана наша функция onClickSayHello().

Читайте также: