Изучение Angular 1#

Здравствуйте, друзья, как дела, надеюсь, у вас все хорошо.

Прошло некоторое время с тех пор, как я решил изучать новую технологию у одного инструктора и по одной документации, чтобы избежать слишком большого отравления ресурсов. Это решение позволило мне учиться чисто. Поэтому канал Gençay Hoca всегда был моим первым источником.

Сейчас я снова начинаю Angular, который является одной из его серий, которую я давно не изучал и забыл. В этом процессе я напишу серию статей здесь, чтобы закрепить то, что я узнал во всех отношениях. (Это мой план, вы можете немного потыкать меня, если я его упустил.) Термин "обмен заметками" может быть немного подходящим :D.

Тогда давайте начнем. Я надеюсь, что это будет серия, которую вам понравится читать.

Что такое Angular?

Angular - это JavaScript-фреймворк с открытым исходным кодом, разработанный компанией Google. Angular в первую очередь предназначен для создания одностраничных приложений (SPA). SPA обеспечивают лучший пользовательский опыт благодаря отсутствию необходимости перезагрузки страниц в веб-приложениях.

Angular разработан на основе таких паттернов проектирования, как MVC (Model-View-Controller) и MVVM (Model-View-ViewModel). Angular разработан для использования с HTML, CSS и JavaScript и может быть легко установлен и использован через Angular CLI (интерфейс командной строки).

Typescript - это язык программирования, построенный на Javascript. Angular использует язык программирования Typescript.

Необходимые установки

Прежде всего, нам необходимо установить Node.js. Скачиваем и устанавливаем Nodejs с сайта n. Выполним проверку установки в cmd:

Typescript - это язык программирования построенный на Javascript Angular использует язык

Устанавливаем Angular CLI с помощью команды npm install -g @angular/cli.
Мы проверяем установку с помощью команды ng version. Мы будем работать с Angular 15.

Команды и файловая структура Angular

Давайте вкратце рассмотрим начальные команды, которые нам необходимо знать:

ng version: Это команда, с помощью которой мы узнаем версию, как мы использовали выше.
ng new -appName: Эта команда используется для создания приложения Angular с простым шаблоном.
ng generate: Эта команда используется для создания структур Angular (компонент, модуль и т.д.).
ng build: Это команда для создания нашего приложения.
ng serve - open: Это команда, которая позволяет нам поднять наше приложение Angular и открыть его на порту по умолчанию в браузере по умолчанию.

Теперь давайте создадим приложение с помощью команды ng new и посмотрим на структуру файлов. Когда вы создаете приложение, оно спрашивает, нужна ли вам конфигурация маршрутизации, и спрашивает, каким должен быть тип файла стиля.

Я создал приложение под названием FirstProject, и структура файлов выглядит следующим образом:

Файл node-modules - это файл, в котором находятся пакеты npm. Когда нам понадобится новый пакет, мы загрузим его здесь.
Файл src - это корневой каталог, в котором находятся исходные файлы нашего приложения. Здесь мы проведем больше всего времени :)
Файл app - это каталог, в котором находятся все компоненты и модули приложения.
файл assets - это файл, содержащий наши статические файлы.
index.html - это корневая страница при первом открытии приложения.
main.ts - это основной файл запуска приложения. Когда приложение впервые встает, запускается main.ts.
style.css - это глобальный файл стилей.
Файл package.json содержит пакеты и версии, которые существуют в вашем приложении. В теге scripts здесь вы также можете настроить команды, которые необходимо использовать при запуске и сборке приложения.

Как работает логика Angular?

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