Какво е точно Angular?

Angular е JavaScript с отворен код на предния край и създава реактивни приложения за единични страници (SPA) и е създадена от разработчиците на Google. Angular е атестирал широкото разпространение на контрола в Open Source JavaScript Frameworks и е изключително ценен между разработчиците и предприятията заради отличните си функции на работа. Ъгловата иновативна рамка за MVW от страна на клиента е широко използвана в момента за разработване на мобилни приложения и уеб приложения. Той е написан на Typescript с поддръжка ES6 (ECMA Script 2015) стандартизация. Typescript, разработен от Microsoft и представлява суперсет от JavaScript. Това ще транспилира кода и ще конвертира във формат JavaScript или ES5. Typescript е силно набран и е позволено да се пише OOPS функция като класови, интерфейсни и модулни операции, подобно на C # или Java, които засилват изпълнението и намаляват грешките във времето на изпълнение.

Следват основните характеристики на Angular 2

  • Компоненти -

предишната версия на Angular имаше вниманието на контролерите, но сега изцяло промени фокуса върху работата с компоненти над контролерите. Компонентите помагат за създаването на приложенията в няколко модула. Това помага за по-ефективно управление на приложението в определен период от време.

  • Модул -

модулът е доста идентичен с клас. Модулът обикновено се описва от блок код, който се използва за изпълнение на определена единична задача. Angular има способността за модулност, при което само едно приложение е изградено чрез разделянето му в няколко модула. Експортната ключова дума се използва за експортиране на клас компонент от модул. Всяко Angular приложение има поне един ъглов модул по споразумение, наречен модул за приложение.

Например

  • Шаблон -

Шаблонът е ключовата роля, която оправдава разглеждането на компонента. Може да бъде деклариран изгледът на компонента се идентифицира с помощта на шаблон. Той е създаден с HTML, включва обвързване и директива.

Например

  • Метаданни -

От голямо значение е да се разшири ефективността на класа. В Typescript за тази цел се идентифицира чрез клас декориране. Например, за да посочите всеки компонент в Angular application, използвайте метаданни от класа (т.е.. @ @ Component decorator).

Декораторът е функция, която поставя метаданни в клас, той е член или е аргумент на метод.

  • Обвързване на данни -

Най-ефективната функция, свързване на данни, е свързващият мост между Model и View. Прави автоматично синхронизиране. Ъгловата поддържа четири типа обвързване - Свързване на свойства, Подвързване на събития, Интерполация и Двупосочно обвързване.

  • Директива -

Директивите са създадени по поръчка HTML атрибути, полезни за запазване на способността на HTML. За да направи директива, @Directive декораторът се използва на свързани метаданни от класа. Три типа директиви - Компонент, Декоратор и Шаблон.

  • Услуги -

Услугите се използват винаги, когато се изисква единична производителност в различни модули на приложението. По принцип се използва за споделяне на данни и поведение в рамките на приложението. Услугата няма базов клас. Често използваните услуги са регистрация на услуги, услуга за данни, масаж и т.н.

  • Инжектиране на зависимостта -

Инжектиране на зависимостта в ъгъл. Dependency Injection (DI) е основна концепция на Angular 2+ и дава възможност на клас да събира зависимости от друг клас. Обикновено в Angular, инжектирането на зависимост се извършва чрез инжектиране на сервизен клас в раздел или модулен клас.

Например

Има много Text Editor, който напълно поддържа Typescript. Или извън кутията, или с плъгин, включително всички от тях по-долу.

  1. Визуално студио.
  2. Visual Studio Code.
  3. Atom.
  4. Затъмнение.
  5. WebStorm.

Visual Studio Code е най-добрият избор, тъй като е с отворен код и работи на Linux, Windows и MacOS. Той предоставя страхотни функции, които поддържат Typescript, включително

  • Автоматично завършване
  • IntelliSense
  • Проверка на синтаксиса
  • рефакториране

За да изтеглите код на Visual Studio посетете уебсайта на адрес https://code.visualstudio.com/download.

Стъпки за инсталиране на Angular 2

Сега, Първи стъпки с процеса за инсталиране на Angular 2

Стъпка 1: За да инсталирате Angular 2, първо изтеглете пакета node.js от https://nodejs.org/en/download/ сайта.

Инсталирайте изтегленото хранилище npm (Node Package Manager) във вашата система.

  • Ако използвате Windows System, Инсталирайте инсталатора на Windows.
  • Ако използвате MacOS System, Инсталирайте инсталатора на MacOS.

Проверете вашите системни съвместими версии като 32-битова или 64-битова.

Стъпка 2: Инсталиране на възел,

Сега , щракнете двукратно върху изтегления файл node-v10 15.3-x64.msi, за да стартирате инсталатора и щракнете върху бутона Next на екрана на инсталатора.

Стъпка 3: Сега кликнете върху отметеното поле и приемете условията в Лицензионното споразумение . След това щракнете върху бутона Next.

Стъпка 4: На следващия екран Променете инсталационния път, ако е необходимо, или Щракнете върху бутона Следващ.

Стъпка 5: На екрана за избор на следващи функции Поддържайте избирането по подразбиране и щракнете върху бутона Напред.

Стъпка 6: Сега, за да инсталирате Node.js Кликнете върху бутона Инсталиране.

Стъпка 7: На следващия екран изчакайте инсталацията да приключи.

Стъпка 8: Сега щракнете върху бутона Finish.

Стъпка 9: Отворете командния ред на вашето устройство и напишете следната команда и проверете версията на nodejs и npm:

c:/>node -v

c:/>npm -v.

Стъпка 10: След като инсталацията приключи. Посетете сайта на https://cli.angular.io/ за Angular CLI (интерфейс на командния ред).

Стъпка 11: Отворете командния ред на вашето устройство и напишете командата „npm install –g @ angular / cli“ и натиснете клавиша enter, за да инсталирате Angular 2 CLI (интерфейс на командния ред).

Забележка: Ако използвате MacOS / Linux, просто поставете sudo преди npm, „sudo npm install - g @ angular / cli“

Стъпка 12: Въведете „ng new first-app“ и натиснете Enter, за да създадете First App.

Стъпка 13: Когато инсталирате приложение Angular 2, ще ви бъдат зададени някои въпроси от Angular CLI.

  • Искате ли да добавите ъглово маршрутизиране? (Y / Не) -> Не
  • Кой стандарт за стилен лист иска да използва? (Използвайте клавишите със стрелки) -> CSS

Стъпка 14: В Първото приложение добавете всички пакети, използвайки Angular CLI

След като инсталирате всички пакети, това означава, че приложението се създава на диска.

Стъпка 15: Въведете командата „ng –version“ в командния ред и натиснете enter, за да разберете ъгловата версия

Стъпка 16: Сега въведете командата “cd first-app”, за да влезете в директорията или папката на приложението.

Стъпка 17: Накрая се създава ъглово приложение „Първо приложение“; сега въведете командата „ng serve“.

Стъпка 18: Отворете браузъра и напишете http: // localhost: 4200 в адресната лента и натиснете Enter, за да стартирате приложението First Application Angular в браузъра.

Препоръчителни статии

Това е ръководство за инсталиране на Angular 2. Тук сме обсъдили основните характеристики на Angular 2 и стъпките за инсталиране на Angular 2. Можете също да разгледате следните статии, за да научите повече -

  1. Ъглов 2 мамян лист
  2. Angular 2 Въпроси за интервю
  3. Angular 2 срещу Vue JS
  4. Ъглови команди

Категория:

Разработване на софтуер