Дозвольте мені передмовити, сказавши: я припускаю, що ви та всі, хто буде це читати, вже зручніше з Angular 1 ( тепер його називають AngularJS , на відміну від просто Angular для нових версій). Якщо говорити, давайте розберемося з деякими доповненнями та ключовими відмінностями у Angular 2+.
- Вони додали кутовий
cli.
Ви можете розпочати новий проект, запустивши ng new [app name]. Ви можете подати свій проект, запустивши ng serve
докладніше тут: https://github.com/angular/angular-cli
- Ваш кутовий код записаний у ES6 Typescript і він збирається під час виконання Javascript у браузері.
Щоб зрозуміти це, я рекомендую ознайомитись із списком ресурсів, який я маю внизу своєї відповіді.
- Структура проекту
У базовій структурі у вас буде app/tsпапка, в якій ви будете виконувати більшу роботу, і app/jsви знайдете у app/jsпапках файли з .js.mapрозширенням. Вони "відображають" ваші ".ts" файли у вашому веб-переглядачі для налагодження, оскільки ваш браузер не може читати нативну машинопис.
Оновлення . Не ввімкнено бета-версію. Структура проекту дещо змінилася, в більшості випадків, і якщо ви використовуєте кутовий кліп, ви будете працювати в
src/app/папці. У проекті для початківців у вас буде наступне.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css : CSS-файл, який слід використовувати конкретно дляcomponent.html
app.component.html : Перегляд (змінна оголошена в app.component.js)
app.component.spec.ts : використовується для тестуванняapp.component.ts
app.component.ts : Ваш код, на який пов'язуєтьсяapp.component.html
app.module.ts : це те, що стартує у вашій програмі, і де ви визначаєте всі плагіни, компоненти, послуги тощо. Це еквівалент app.jsкутового 1
index.ts використовується для визначення або експорту файлів проекту
Додаткова інформація:
Підказка: ви можете запускати ng generate [option] [name]для створення нових служб, компонентів, труб тощо.
Також tsconfig.json файл важливий, оскільки він визначає правила складання TS для вашого проекту.
Якщо ви думаєте, я повинен вивчити зовсім нову мову?... Ех, начебто, TypeScript - це набір JavaScript. Не лякайтеся; це там, щоб полегшити ваш розвиток. Я відчував, що я добре зрозумів це лише через кілька годин, граючи з ним, і все це впало через 3 дні.
- Ви пов'язуєте свій HTML так само, як і в директиві Angular 1. Настільки змінні, як
$scopeі $rootScopeбули застарілими.
Цього ти мав на увазі. Кутовий 2 все ще є MV *, але ви будете використовувати " компоненти " як спосіб прив'язування коду до ваших шаблонів, наприклад, візьміть наступне
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
Тут подумайте про цю importзаяву як про ін'єкцію залежності у контролер v1. Ви використовуєте importдля імпорту ваших пакунків, де import {Component}йдеться про те, що ви будете робити componentприв'язку до свого HTML.
Зверніть увагу , що @Componentдекоратор у вас є selectorі template. Тут подумайте про те selector, $scopeщо ви використовуєте, як ви використовуєте v1, directivesде ім'я цього те selector, що ви використовуєте для прив'язки до свого HTML, як так
<my-app> </my-app>
Де <my-app>ви використовуєте власний тег, який ви будете використовувати, який буде виконувати функції заповнення для того, що оголошено у вашому шаблоні. тобто) <h1> Hello World! </h1>. Тоді як це виглядатиме так у v1:
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
Також ви можете додати щось між цими тегами, щоб створити повідомлення про завантаження, наприклад таке:
<my-app> Loading... </my-app>
Потім відобразиться " Завантаження ... " як повідомлення про завантаження.
Зауважте, що те, що оголошено, template- це шлях або необроблений HTML, який ви будете використовувати HTMLу своєму selectorтезі.
Більш повна реалізація Angular 1 виглядала б приблизно так:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
У v1 це виглядатиме щось на кшталт
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
Це мені дуже подобається v2. Я виявив, що директива була крутою кривою навчання для мене в v1, і навіть коли я їх зрозумів, я часто маюCSS рендеринг не так, як я задумав. Я вважаю, що це спосіб простіше.
V2 дозволяє легше масштабувати додаток, оскільки ви можете розбити свій додаток легше, ніж ви могли б у v1. Мені подобається такий підхід, оскільки ви можете мати всі свої робочі частини в одному файлі, на відміну від декількох у кутовій v1.
Що щодо перетворення вашого проекту з v1 в v2?
З того, що я чув від команди розробників, якщо ви хочете оновити свій проект v1 до v2, ви просто переживете і видалите застарілі краплі і заміните свої $scopes на selectors. Я вважаю це відео корисним. Це з деякими командами Ionic, які працюють поруч із кутовою командою, оскільки v2 має більшу увагу на мобільному https://youtu.be/OZg4M_nWuIk Сподіваюся, що це допомагає.
ОНОВЛЕННЯ: Я оновив, додавши приклади, оскільки офіційні реалізації Angular 2 з'явилися.
ОНОВЛЕННЯ 2: Це все ще видається популярним питанням, тому я просто подумав, що я знайшов би якийсь ресурс, який мені дуже корисний, коли я почав працювати з кутовим 2.
Корисні ресурси:
Для отримання додаткової інформації про ES6, я рекомендую ознайомитися з навчальними посібниками з нових можливостей ECMAScript 6 / ES6 New Boston - Плейлист YouTube
Щоб написати функції Typescript і подивитися, як вони компілюються в Javascript, ознайомтеся з майданчиком для мови Typescript
Щоб побачити функцію за розбиттям функцій того, що відповідає еквівалентності Angular 1 у Angular 2, див. Короткий довідник Angular.io - Cookbook -A1 A2