Що таке Angular - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Що таке Angular. Доклад-сообщение содержит 18 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Веб-технології

Слайд 2

Описание слайда:

Що таке Angular https://angular.io/

Слайд 3

Описание слайда:

Latest version Latest version Остання версія Angular - Angular 7.2.13 вийшла 12 квітня 2019 року. Офіційний репозиторій фреймворка на гітхабе: https://github.com/angular/angular. Там ви можете знайти самі вихідні файли, а також деяку додаткову інформацію.

Слайд 4

Описание слайда:

Головні аспекти Angular надає таку функціональність, як двостороннє зв'язування, що дозволяє динамічно змінювати дані в одному місці інтерфейсу при зміні даних моделі в іншому, шаблони, маршрутизація і так далі. Однією з ключових особливостей Angular є те, що він використовує в якості мови програмування TypeScript. Тому перед початком роботи рекомендується ознайомитися з основами цієї мови, про які можна прочитати тут. Але ми не обмежені мовою TypeScript. При бажанні можемо писати програми на Angular за допомогою таких мов як Dart або JavaScript. Однак TypeScript все таки є основною мовою для Angular.

Слайд 5

Описание слайда:

Початок роботи Для роботи з Angular необхідно встановити сервер Node.js і пакетний менеджер npm, якщо вони відсутні на робочій машині. Node.js (https://nodejs.org/en/) Перевірте, що використовуєте, принаймні, Node 6.9.x та npm 3.x.x, запустивши node -v та npm -v у вікні терміналу / консолі. Старіші версії виробляють помилки, але новіші версії чудово.

Слайд 6

Описание слайда:

Використання Angular CLI Встановіть глобально Angular CLI npm install -g @angular/cli Створіть новий проект ng new my-app Запустіть сервер та додаток cd my-app ng serve --open

Слайд 7

Описание слайда:

Слайд 8

Описание слайда:

Створення проекту власноруч Для цього визначимо на жорсткому диску папку програми. Шлях вона буде називатися helloapp. У цій папці створимо новий файл package.json наступного змісту

Слайд 9

Описание слайда:

Відкриваємо командний рядок (термінал) і перейдемо в ній до папки проекту за допомогою команди cd: Відкриваємо командний рядок (термінал) і перейдемо в ній до папки проекту за допомогою команди cd: І потім виконаємо команду npm install, яка встановить всі необхідні модулі Створимо в папці проекту підпапку, яку назвемо src - вона буде містити всі вихідні файли. І далі в папці src створимо підкаталог app

Слайд 10

Описание слайда:

Створення компонента Angular Компоненти представляють основні будівельні блоки додатки Angular 2. Кожна програма Angular має як мінімум один компонент. Тому створимо в папці src / app новий файл, який назвемо app.component.ts і в якому визначимо наступний код компонента

Слайд 11

Описание слайда:

Створення модулю додатка Додаток Angular складається з модулів. Модульна структура дозволяє легко довантажувати і задіяти тільки ті модулі, які безпосередньо необхідні. І кожен додаток має як мінімум один кореневий модуль. Тому створимо в папці src / app новий файл, який назвемо app.module.ts наступного змісту

Слайд 12

Описание слайда:

Запуск додатка Тепер нам треба вказати Angularу, як запускати наш додаток. Для цього створимо в папці src (на рівень вище, ніж розташовані файли app.component.ts і app.module.ts) файл main.ts наступного змісту:

Слайд 13

Описание слайда:

Також в папці src визначимо ще один файл, який назвемо polyfills.ts з наступним кодом

Слайд 14

Описание слайда:

Визначення конфігурації Оскільки для визначення коду програми застосовується мова TypeScript, тому також створимо в кореневій папці проекту новий файл tsconfig.json

Слайд 15

Описание слайда:

Оскільки наш додаток буде розбито на кілька окремих файлів, то для їх складання будемо використовувати популярняй складальник webpack. Тому також визначимо в кореневій папці проекту ще один файл webpack.config.js: Оскільки наш додаток буде розбито на кілька окремих файлів, то для їх складання будемо використовувати популярняй складальник webpack. Тому також визначимо в кореневій папці проекту ще один файл webpack.config.js: