Ъглова 2 за 10 минути

Начинът, по който можем да разработваме приложения днес, е намалил значително сложността на разработките и въпреки че включва нови технологии, които на пръв поглед може да изглеждат малко сложни, те всъщност помагат не само за изграждането на по -добри приложения, но и за адаптирането им към настоящите изисквания за използваемост.

Една от тези технологии, които можем да използваме, е AngularJS, която е рамка на MVW (Модел-Преглед-Каквото и да е), което се превежда като Model-View-Whatever-works-for you, то се основава на JavaScript и ни позволява да предоставим нашите документи HTML статични характеристики на динамична функционалност и да използвате обвързвания да инжектираме данни в нашия HTML, използвайки собствените директиви на рамката.

Angular работи доста добре, но имаме нова негова итерация и позволява да се разшири функционалността на рамката много повече, тогава нека видим как можем да започнем да използваме Angular 2 само за 10 минути.

1. Първи TypeScript и Angular 2

За да извършим това изпълнение, ще работим по възможно най -оптималния начин, за това ще използваме Машинопис който е език, който позволява да се разшири функционалността на JavaScript да се фокусира върху използването на класове и обекти.

За да получите толкова много TypeScript Какво Ъглова 2 необходимо е да имаме Node.js, както и неговия мениджър на пакети на нашия компютър, ако все още ги нямаме, можете да разгледате първите стъпки с Node.js в този урок.

След като имаме Node.js и мениджъра на пакети NPM можем да изпълним командите, за да получим това, от което се нуждаем:

 npm инсталиране -g tsd@^0.6.0 tsd инсталиране angular2 es6-обещание rx rx-lite 

Освен това трябва да инсталираме компилатора TypeScript тъй като браузърът не разпознава .ts файлове:

 npm install -g typcript@^1.5.0-beta

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

Увеличете

И накрая, трябва само да инсталираме локален сървър, за да стартираме нашето приложение по професионален начин, за това в нашата конзола и чрез NPM изпълняваме следното:

 npm install -g http -сървър

2. Изграждане на нашето приложение

След като имаме всичко необходимо за работата на нашето приложение, ние създаваме папка, където ще имаме файловете на проекта, можем да го наречем ъглови 10 минути, и вътре ще създадем файл, наречен application.ts и обичайното ни index.html.

Първото нещо, което ще направим, е да добавим класовете и компонентите към нашия файл application.ts, за това първото нещо, което трябва да направим, е да импортираме Ъглова 2 както следва:

 импортиране {Component, View, bootstrap} от 'angular2 / angular2';

За да проверим работата на нашия компилатор в папката на нашия проект, ще изпълним следното:

 tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.ts

С това, което трябва да получим от конзолата, че компилацията е завършена успешно и че също така чака за промени във файла, тоест поради използването на параметъра -watch.

Увеличете

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

 @Component ({selector: 'my-app'}) @View ({template: ''})

Тъй като нашият компилатор следи за промени и сме включили някои, нормално е да видим някаква активност в нашата конзола.

Сега остава само да направим декларацията на нашия клас и да инициализираме обектите в конструктора, които ще бъдат тези, които след това ще бъдат изпразнени в изгледа. Накрая използваме функцията bootstrap (), която ще отговаря за изобразяването на компонентите на нашата страница.

 клас myComponent {име: низ; конструктор () {this.name = 'Джонатан'; }} bootstrap (myComponent);

Вече имаме завършен кода на Typescript и ако проверим в нашата папка, трябва да имаме JavaScript, който е резултат от компилацията на .ts.

Увеличете

3. Изграждане на HTML

Накрая трябва да изградим HTML, да извършим дължимия внос, както и да включим селекторите, които декларираме в нашия .ts файл, за това ще включим system.js, което ще ни позволи да изпълним внос на нашия файл, нека видим съдържанието на нашия HTML:

 Ъглова 2 за 10 минути 

След като това стане, трябва само да стартираме нашия сървър и да стартираме нашето приложение, за това спираме компилатора и изпълняваме сървъра със следната команда:

 http-сървър

Това ще настрои сървър в localhost: 8080 и това ще ни позволи достъп до нашето приложение.

Ще видим данните, дефинирани в нашия файл TypeScript са тези, инжектирани в нашето приложение, по този начин ние разделяме логиката на нашето приложение и можем да имаме чист HTML документ, който обработва само селекторите, които сме създали благодарение на Ъглова 2, като ни дава приложение, което работи по -оптимално и ефективно, използвайки възможно най -малко усилия.