Започнете с Angular: Инструкцията за InfoWorld

Angular, наследникът на AngularJS, е платформа за разработка за изграждане на мобилни и настолни приложения, използващи TypeScript и / или JavaScript и други езици. Angular е популярен за създаване на големи обеми уебсайтове и поддържа уеб, мобилна мрежа, естествени мобилни приложения и приложения за настолни компютри.

Екипът на Angular core разработка е разделен между служители на Google и стабилна общност; скоро няма да изчезне. В допълнение към собствените си обширни възможности, платформата Angular има силна външна екосистема: Няколко известни IDE поддържат Angular, тя разполага с четири библиотеки с данни, има половин дузина полезни инструменти и над дузина набори от UI компоненти и има десетки Ъглови книги и курсове. През 2015 г., когато бе присъдена на AngularJS награда Bossie, обясних, че това е модел на AWAX рамка на JavaScript (MVW), която разширява HTML с маркиране за динамични изгледи и двупосочно свързване на данни. Angular е особено добър за разработване на уеб страници с една страница и свързване на HTML форми с модели и JavaScript контролери. Новият Angular е написан с TypeScript, а не с JavaScript, което има много предимства, както ще обясня.

Странно звучащият модел „модел-изглед-какъвто и да е“ е опит да се включат модели-изглед-контролер (MVC), модел-изглед-изглед-модел (MVVM) и модели-изглед-презентатор (MVP) под един прозвище. Разликите между тези три тясно свързани модела са онези неща, за които програмистите обичат да спорят яростно; разработчиците на Angular решиха да се откажат от дискусията.

По принцип Angular автоматично синхронизира данни от вашия потребителски интерфейс (изгледи в AngularJS и шаблони в Angular 2 и по-нови) с вашите JavaScript обекти (модел) чрез двупосочно свързване на данни. За да ви помогне да структурирате по-добре приложението си и да улесните тестването, Angular учи браузъра как да прави инжектиране на зависимост и обръщане на контрола. Новият Angular (версия 2 и по-нова) замества изгледите и контролерите с компоненти и приема стандартни конвенции, което улеснява разбирането и позволява на разработчиците да се концентрират върху разработването на ECMAScript 6 модули и класове. С други думи, Angular 2 е цялостно пренаписване на AngularJS, което се опитва да реализира същите идеи по-добре. Шаблоните за ъглови изгледи, които имат доста прост синтаксис, се компилират в JavaScript, който е добре оптимизиран за съвременните JavaScript двигатели.Новият маршрутизатор на компоненти в Angular 2 може да направи разделяне на кода (мързеливо зареждане), за да намали количеството код, доставено за изобразяване на изглед.

изтеглянето Започнете с Angular Изтеглете този урок за Angular в удобен PDF формат

Защо ъглова? И кога не е добър избор?

Изборът на JavaScript рамка за уеб приложение е вид процес, който поставя началото на религиозни войни сред разработчиците. Не съм тук, за да прозелитизирам Angular, но искам да знаете предимствата и недостатъците му. В идеалния случай трябва да изберете подходящата рамка за вашето приложение, като вземете предвид уменията във вашата организация и структурите, които използвате в други приложения. Като цяло Angular има добри инструменти и е подходящ за наистина големи проекти с голям трафик. Angular, като цялостно пренаписване от AngularJS, е проектиран от нулата за използване на мобилни устройства и за висока производителност. Подобно на своя предшественик, той прави свързването на данни лесно и добре.

Angular използва модел на уеб компонент, но не и Web Components per se. Това не е Polymer, който създава истински уеб компоненти, въпреки че можете да използвате Polymer Web Components в ъглови приложения, ако желаете. Angular използва инверсия на управление (IoC) и модели на инжектиране на зависимост (DI) и решава някои проблеми с прилагането на AngularJS от тях.

Angular използва директиви и компоненти, които смесват логиката с HTML маркирането. Една мисловна школа казва, че смесването на логиката с представянето е основен грях. Друга мисловна школа казва, че ако всичко, което една програма прави, е декларирано на едно място, това улеснява развитието и разбирането. Това е проблем, който ще трябва да решите сами, тъй като се озовах на различни страни на въпроса за различни проекти.

Angular има някои проблеми с документацията, чести проблеми със съвместимостта и много концепции, които да научи нов разработчик. От друга страна, Angular има огромна екосистема, която запълва пропуските в документацията на Angular с уеб уроци, видеоклипове и книги на трети страни.

Относно TypeScript

Angular е реализиран в TypeScript, патичен тип набор от JavaScript, който се транспилира в JavaScript. Като цяло приложенията TypeScript са по-лесни за поддръжка в производствен мащаб, отколкото JavaScript. Лесният процес за определяне дали вашите типове са правилни по време на компилиране елиминира голям клас често срещани грешки в JavaScript, а познаването на типовете позволява на редакторите, инструментите и IDE да бъдат по-полезни при завършването на кода, рефакторинга и проверката на кода.

Случайно съм голям фен на TypeScript. Смятам, че е много по-продуктивно да работя върху голям проект на TypeScript, отколкото да работя върху голям проект на JavaScript. С JavaScript наистина никога не знам дали грешки се крият в кода в очакване да ме ухапят, независимо колко често стартирам JSHint. С TypeScript, поне когато съм добавил незадължителни типове, класове, модули и интерфейси, се чувствам много по-сигурен.

Първи стъпки: Инсталирайте Angular, TypeScript и Visual Studio Code

С това казано, нека да инсталираме софтуера и да започнем.

Инсталирайте Node.js и NPM

Преди да направите нещо друго, трябва да инсталирате Node.js и NPM, мениджъра на пакети Node, защото те са в основата на голяма част от инсталацията и инструментариума на Angular. За да разберете дали са инсталирани и ако да, кои версии са инсталирани, отидете на конзолата или терминалния ред и въведете следните две команди:

$ възел -v $ npm -v

На моя компютър отчетената версия на Node.js е v6.9.5, а NPM версията е 3.10.10. Това са текущите версии за дългосрочна поддръжка в момента, както виждам от разглеждането на //nodejs.org/. Ако вашите версии са актуални, можете да преминете към следващия раздел. Ако нито една от командите не е намерена или някоя от версиите е остаряла, трябва да инсталирате текущите версии. Моите версии са актуални, защото наскоро преинсталирах Node, както е показано на екранната снимка по-долу. Инсталирането на Node.js и NPM е въпрос на сърфиране до nodejs.org, натискане на зеления бутон LTS и следване на инструкциите.

След като завършите инсталацията, проверете версиите отново, за да се уверите, че наистина са актуализирани. Знам, че повтарянето на проверката звучи параноично, но добрият програмист се нуждае от здравословна доза параноя, за да избегне грешки, а прекъснатите инсталации не са необичайни.

1. Инсталирайте Angular

Има два начина за инсталиране и използване на Angular. Първо ще ви покажа метода на интерфейса на командния ред (CLI) по няколко причини. Първото е, че се вписва по-добре с начина, по който обичам да работя. Второто е, че CLI генерира по-пълно приложение за начинаещи, отколкото QuickStart seed. Третото е, че стъпката за почистване в инструкциите за засяване на QuickStart изглежда сякаш може да причини хаос, ако се използва в грешното време или в грешната директория.

Отидете до //angular.io/ и кликнете върху един от трите бутона „Първи стъпки“. Всички те отиват на едно и също място, Angular QuickStart.

Моля, прочетете тази страница отново и не се колебайте да изпробвате примера QuickStart на Plunker чрез връзката след първия кодов блок. След като си помислите, че можете да следвате функцията @Componentдекоратор и израза за обвързване на ъглова интерполация {{name}}, щракнете върху връзката CLI QuickStart вляво. Не се притеснявайте твърде много за това как са приложени функцията декоратор и обвързването на интерполация: Ще стигнем до това.

1а. Инсталирайте и тествайте Angular-CL

Ще следваме инструкциите за настройка на средата за разработка на CLI. Първата стъпка е да инсталирате Angular и нейния CLI глобално с npm:

$ npm install -g @ angular / cli

Ако наблюдавате внимателно процеса на инсталиране, ще видите куп предпоставки и инструменти, инсталирани преди Angular и неговия CLI. Ако има предупреждения, не се притеснявайте за тях. Ако има грешки, може да се наложи да ги поправите; Виждал съм само предупреждения. Безопасно е да преинсталирате Angular CLI, когато пожелаете.

Следващата стъпка е да създадете нов проект с Angular CLI. Поставих моята в директория, наречена Work, под домашната ми потребителска папка.

$ cd работа $ ng ново мое приложение

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

Ще видите на екранната снимка, че проверих повторно версията си TypeScript ( tsc -v) след инсталирането на Angular CLI. Да, беше малко параноично. И да, добра идея е да направите и вие. Ако вече не сте инсталирали TypeScript, нека се погрижим за това сега:

$ npm install –g typecript

Почти сме там. След това влезте в новата директория и обслужвайте приложението.

$ cd my-app $ ng обслужва

Както сървърът ще ви каже, той слуша на порт 4200. Затова отворете раздела на браузъра към // localhost: 4200 и ще видите изображението вляво.

Балансът на страницата CLI QuickStart ви инструктира да промените свойството на заглавието и неговия CSS. Чувствайте се свободни да правите това с какъвто и да е редактор за програмиране ( не с текстов процесор!), Който сте инсталирали, или изчакайте, докато инсталирате Visual Studio Code по-късно. Прозорецът на браузъра ще се актуализира автоматично, когато записвате, тъй като сървърът наблюдава кода и актуализира промените.

Когато приключите със сървъра, натиснете Control-C в прозореца на терминала, за да убиете процеса.

1б. Инсталирайте семето Angular QuickStart

Само направи тази стъпка, ако имате прескочили стъпка 1а. Ако направите и двете стъпки, тази инсталация ще блокира част от инсталацията на CLI и ще трябва да я повторите, ако искате да я използвате отново. Инструкциите за инсталиране на семената QuickStart предлагат две възможности за стартиране на процеса: изтегляне на семето и разархивиране или алтернативно клониране на семето, както следва:

$ git clone //github.com/angular/quickstart.git quickstart

Каквато и опция да изберете за получаване на кода, следващите стъпки са същите:

$ cd бърз старт

(или както сте нарекли папката)

$ npm инсталиране

$ npm старт

В npm installстъпка прави по същество едно и също нещо като $ npm install -g @angular/cliстъпка в CLI версията на инсталацията, с изключение на това, че се инсталира пишеща машина и тя не не инсталирате ъглови CLI, тъй като това не е в списъка на зависимост в package.json. Всъщност, ако Angular CLI вече е инсталиран, този скрипт ще го деинсталира .

В npm startстъпка работи този скрипт:

"start": "едновременно \" npm run build: watch \ "\" npm run serve \ ""

За да го разширите, скриптове build: watch и serve са:

"build: watch": "tsc -p src / -w"

и

"serve": "lite-server -c = bs-config.json"

Споменах ли, че tscе компилаторът на TypeScript? В -pопция задава директорията на проекта за съставяне и -wопция казва да гледате входни файлове.

В npm startетапа (работи на двете скриптове едновременно) ще направи по същество едно и също нещо като ng serveстъпка в CLI версията на инсталацията, с изключение на това, че е вероятно да се избере друг порт, както и той автоматично ще се зареди страницата е на служба в стандартната си браузър и страницата ще изглежда като изображението вляво.

Когато приключите с играта с приложението Angular QuickStart, просто натиснете Ctrl + C или затворете прозореца на терминала, за да убиете процеса. Можете да го стартирате отново, като се върнете в директорията и стартирате ng serve.

Следващата (незадължителна) стъпка в инструкциите за засяване на QuikStart е тази, която ме изнервя: Тя ви казва да изтриете несъществените файлове, използващи rm -rfв MacOS или delв Windows. Ако решите да направите това, поне два пъти проверете дали сте в правилната директория, преди да стартирате скрипта, който сте копирали от сайта за документация. Моля, не го опитвайте, след като сте започнали да добавяте файлове към проекта.

Без значение дали сте спазили инструкциите за начален интерфейс CLI или QuickStart, следващата ви стъпка ще бъде да проучите изходния код на Angular проект. За тази цел нека да инсталираме редактор, съобразен с Angular.

2. Инсталирайте Visual Studio Code

Страницата Angular resources препоръчва три IDE: IntelliJ IDEA, Visual Studio Code и WebStorm. Използвам и трите, но за целите на това упражнение Visual Studio Code е най-добрият избор, защото е безплатен и с отворен код. Прегледайте началната страница на Visual Studio Code и изтеглете текущата стабилна версия за вашата платформа, след което инсталирайте пакета.

След като Visual Studio Code бъде инсталиран, стартирайте го и отворете директорията, която съдържа вашия основен проект. На моя Mac, генерираният от CLI проект е в ~/work/my-appи семето е в ~/work/quickstartmaster. Вашето местоположение ще варира в зависимост от това дали сте инсталирали CLI или инсталирането на семена и каквито и да е решения относно техните целеви директории. Дървото на източника трябва да изглежда по следния начин:

Visual Studio Code поддържа TypeScript от кутията, така че няма какво друго да се инсталира. Ако искате да инсталирате други езици по-късно, лесно е да го направите в панела Разширения, лесно се показва, като щракнете върху долната икона в горния ляв ъгъл. Въведете името на желания език или инструмент в полето за търсене в горната част на панела Разширения. Можете да се върнете към File Explorer, като щракнете върху горната икона в горния ляв ъгъл.