Зміст
- 01. Почніть з Node
- 02. Створення нового проекту
- 03. Перевірка версій
- 04. Оновіть до Angular 4
- 05. Завантажте програму-підручник
- 06. Оновіть квітковий магазин до версії 4.0
- 07. Виправте залежності однолітків
- 08. Слідкуйте за зміною імені
- 09. Перевірте версії
- 10. Перевірте свою роботу
У березні команда Angular випустила версію 4, а разом із нею і кілька нових захоплюючих функцій для вивчення. У цьому посібнику ми покажемо вам, як створити програму, використовуючи деякі з цих нових функцій, а також продемонструємо деякі потужні зміни, що підвищують продуктивність.
Що нового?
Команда Angular називає це "невидимим перетворенням", оскільки більшість змін відбувається у фоновому режимі, а не з основними функціями кодування. Важливою зміною є перехід до стандартної компіляції, яка може значно покращити ефективність при правильному використанні. Також тепер підтримується TypeScript 2.1+, що дає нам доступ до всіх нових функцій ES2015.
Це не означає, що також не відбулося помітних змін в основах - наприклад, є корисний новий синтаксис прив’язки шаблонів, який дозволяє спростити наш код, додавши ще варіант до ngIf, і можливість присвоювати локальні змінні в межах ngFor.
Я пропустив 3.0?
Angular 4 - це перша основна версія випуску фреймворку, прийнятого семантичним керуванням версіями. Тож не хвилюйтеся, ви не пропустили 3.0 - було дві основні оновлення, і обидві були введені у версію 4.0.
Зауважимо також, що Angular 1.x тепер відомий як AngularJS, а Angular 2+ просто називається Angular. Будьте обережні, оскільки деякі сторонні підручники та бібліотеки, можливо, не оновили використання цих термінів.
Отримайте файли підручників
У цьому посібнику ми будемо працювати з додатком Квітковий магазин. Щоб завантажити приклад програми, перейдіть до FileSilo, виберіть «Безкоштовні речі» та «Безкоштовний вміст» поруч із підручником. Примітка: Користувачі, які вперше повинні зареєструватися, щоб використовувати FileSilo. Увійшовши, ви можете завантажити приклад програми тут.
Давайте розпочнемо!
01. Почніть з Node
Почнемо з нуля, а за допомогою Angular CLI створимо додаток Hello World. Якщо ви хочете оновити існуючу програму, перейдіть до кроку 4. Якщо ви цього ще не зробили, завантажте Node, який постачається в попередньо упакованій версії npm. Якщо у вас вже є Node, перевірте, що це принаймні Node 6.9.x та npm 3.x.x з командного рядка.
$ node -v v6.10.2 $ npm -v 3.10.10
02. Створення нового проекту
Тепер у нас є менеджер пакетів, за допомогою якого ми можемо встановити Angular та Angular CLI. Крім усього іншого, CLI дозволяє легко створювати нові проекти та компоненти.
$ npm install -g @ angular / cli $ ng new my-first-angular4-app # Angular CLI команди використовують 'ng' $ ng serve -open # Ця команда завантажує програму та запускає її у браузері
03. Перевірка версій
Якщо ви раніше не бачили проект Angular, знайдіть час, щоб ознайомитися зі структурою файлів, створеною CLI. Для нашого нового проекту, нашого package.json повинен вказати версію 4.0.0 Angular-пакети.
"залежності": {"@ angular / common": "^ 4.0.0", "@ angular / compiler": "^ 4.0.0", "@ angular / core": "^ 4.0.0", "@angular / forms ":" ^ 4.0.0 "," @ angular / http ":" ^ 4.0.0 "," @ angular / platform-browser ":" ^ 4.0.0 "," @ angular / platform-browser-dynamic ":" ^ 4.0.0 "," @ angular / router ":" ^ 4.0.0 "[...]}
04. Оновіть до Angular 4
Якщо у вас є існуюча програма Angular із переліченими версіями 2.x, в більшості випадків дійсно легко оновити її до версії 4. Нам просто потрібно встановити та оновити відповідні пакети з командного рядка. Мак:
$ npm install @ angular / {загальне, компілятор, компілятор-клі, ядро, форми, http, платформа-браузер, платформа-браузер-динамічна, платформа-сервер, маршрутизатор, анімація} @latest typecript @ latest --save
Windows:
> npm встановити @ angular / common @ latest @ angular / compiler @ latest @ angular / compiler-cli @ latest @ angular / core @ latest @ angular / forms @ latest @ angular / http @ latest @ angular / platform-browser @ latest @ angular / platform-browser-dynamic @ latest @ angular / platform-server @ latest @ angular / router @ latest @ angular / animations @ latest typecript @ latest --save
05. Завантажте програму-підручник
Відтепер ми будемо працювати з прикладом програми Angular 2, який ви можете завантажити з FileSilo (повну інформацію про те, як це зробити, див. Вступ вище). Зауважте, що ця програма створена виключно для ілюстративних цілей.Завантаживши додаток Flower Shop у свій кореневий каталог, встановіть залежності та запустіть у браузері.
$ npm встановити $ ng serve --open
06. Оновіть квітковий магазин до версії 4.0
У межах квітковий магазин каталог, оновіть до версії 4.0. У нас є дещо ВІДСТАНОВИТИ ЗАЛЕЖНІСТЬ РІВНИКІВ помилки після оновлення.
07. Виправте залежності однолітків
Залежності однолітків призначені для управління проектами, у яких пакети покладаються на різні версії однакових залежностей. Ви повинні додати їх вручну до вашого package.json файл. Залежності від однолітків, які нам потрібні для Квіткового магазину, включають старіші версії @ angular / {ядро, http}, rxjs і zone.js.
Перегляньте помилки у вихідних даних терміналу та додайте кожну відсутність залежності до package.json.
"peerDependencies": {"@ angular / core": "> = 2.0.0", "@ angular / http": "> = 2.0.0", "rxjs": "^ 5.0.0", "zone.js ":" 0,7,8 "},
08. Слідкуйте за зміною імені
Наш додаток Flower Shop використовує спеціальний компонент з відкритим кодом, який називається ng2-модальний. Однак з тих пір автор оновив свою конвенцію іменування до ngx-модальний. Нам потрібно змінити назву нашої залежності та ng-модуль відповідно імпорту.
package.json: "залежності": {[...] "ngx-modal": "0.0.25", [...]}, app / app.module.ts: імпорт {ModalModule} з 'ngx-modal ';
09. Перевірте версії
Наш користувальницький модальний компонент також потребує оновлення до останньої версії, тому обов’язково оновіть його за допомогою npm.
$ npm встановити ngx-modal @ latest --save
10. Перевірте свою роботу
Тепер ми залагодили свої залежності, радимо це очистити node_modules і побудувати його знову з нашого package.json. Якщо все піде добре, у вас повинна бути чиста побудова! Якщо цього не зробити, у ваших версіях залежностей все ще може щось не вистачати. Погляньте ще раз.
$ rm -rf node_modules / $ npm cache clean $ npm install $ ng serve --open
Наступна сторінка: Кроки 11-20
