Kątowe 2 w 10 minut

Sposób, w jaki możemy dziś tworzyć aplikacje, znacznie zmniejszył złożoność rozwoju i pomimo włączenia nowych technologii, które na pierwszy rzut oka mogą wydawać się nieco skomplikowane, w rzeczywistości pomagają nie tylko budować lepsze aplikacje, ale także być dostosowywane do aktualnych wymagań użyteczności.

Jedną z tych technologii, z których możemy korzystać, jest AngularJS, który jest frameworkiem MVW (Model-Widok-Cokolwiek), co tłumaczy się jako Model-View-Cokolwiek-działa-dla Ciebie, jest oparte na JavaScript i pozwala nam dostarczać nasze dokumenty HTML statyczne cechy dynamicznej funkcjonalności i korzystania z wiązania wstrzykiwać dane do naszego HTML za pomocą własnych dyrektyw frameworka.

Angular działa całkiem nieźle, ale mamy jego nową iterację i pozwala znacznie bardziej rozszerzyć funkcjonalność frameworka, więc zobaczmy, jak możemy zacząć używać Angular 2 w zaledwie 10 minut.

1. Pobieranie TypeScript i Angular 2

Aby przeprowadzić to wdrożenie, będziemy pracować w możliwie najbardziej optymalny sposób, do tego wykorzystamy Maszynopis który jest językiem pozwalającym na rozszerzenie funkcjonalności JavaScript skupić się na używaniu klas i obiektów.

Aby dostać tak wiele Maszynopis Co kątowe 2 konieczne jest, abyśmy mieli Node.js, a także jego menedżera pakietów na naszym komputerze, jeśli nadal ich nie mamy, możesz spojrzeć na pierwsze kroki z Node.js w tym samouczku.

Kiedy już mamy Node.js i menedżer pakietów NPM możemy uruchomić polecenia, aby uzyskać to, czego potrzebujemy:

 npm install -g tsd@^0.6.0 tsd install angular2 es6-promise rx rx-lite 

Dodatkowo musimy zainstalować kompilator Maszynopis ponieważ przeglądarka nie rozpoznaje plików .ts:

 npm install -g typescript@^1.5.0-beta

Po wykonaniu powinniśmy zobaczyć za pomocą konsoli instalację modułów, kompilatora i bibliotek frameworka.

POWIĘKSZAĆ

Na koniec wystarczy zainstalować serwer lokalny, aby nasza aplikacja działała w sposób profesjonalny, do tego w naszej konsoli i poprzez NPM wykonujemy:

 npm install -g serwer http

2. Budowanie naszej aplikacji

Gdy mamy już wszystko, co niezbędne do działania naszej aplikacji tworzymy folder, w którym będziemy mieli pliki projektu, możemy to nazwać kątowy10min, a w środku stworzymy plik o nazwie aplikacja.ts i nasze zwykłe index.html.

Pierwszą rzeczą, którą zrobimy, jest dodanie klas i komponentów do naszego pliku application.ts, w tym celu pierwszą rzeczą, którą musimy zrobić, to zaimportować kątowe 2 następująco:

 import {Component, View, bootstrap} z 'angular2 / angular2';

Aby zweryfikować działanie naszego kompilatora znajdującego się w folderze naszego Projektu, wykonamy następujące czynności:

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

Z czym powinniśmy otrzymać przez konsolę, że kompilacja zakończyła się pomyślnie i że również czeka na zmiany w pliku, czyli z powodu użycia parametru -watch.

POWIĘKSZAĆ

Teraz tworzymy nasz komponent, w którym zadeklarujemy selektor którego użyjemy w naszym kodzie HTML, a także w naszym widoku, w którym umieścimy szablon, w którym wprowadzimy zmiany.

 @Component ({selector: 'moja-aplikacja'}) @View ({szablon: ''})

Ponieważ nasz kompilator wypatruje zmian i wprowadziliśmy niektóre z nich, normalne jest, że widzimy aktywność w naszej konsoli.

Teraz pozostaje nam tylko złożyć deklarację naszej klasy i zainicjalizować obiekty wewnątrz konstruktora, które będą tymi, które następnie zostaną opróżnione w widoku. Na koniec używamy funkcji bootstrap(), która będzie odpowiedzialna za renderowanie komponentów na naszej stronie.

 class myComponent {nazwa: ciąg; konstruktor () {this.name = 'Jonathan'; }} bootstrap (myComponent);

Mamy już gotowy nasz kod Typescript, a jeśli sprawdzimy w naszym folderze, powinniśmy mieć JavaScript, który jest wynikiem naszej kompilacji .ts.

POWIĘKSZAĆ

3. Budowanie HTML

Wreszcie musimy zbudować HTML, wykonaj odpowiednie importy, a także uwzględnij selektory, które zadeklarujemy w naszym pliku .ts, w tym celu uwzględnimy system.js, który pozwoli nam wykonać import naszego pliku, zobaczmy zawartość naszego kodu HTML:

 Kątowe 2 w 10 minut 

Gdy to zrobimy, wystarczy uruchomić nasz serwer i uruchomić naszą aplikację, w tym celu zatrzymujemy kompilator i uruchamiamy serwer za pomocą następującego polecenia:

 serwer http

Spowoduje to skonfigurowanie serwera w Lokalny Gospodarz: 8080 i pozwoli nam na dostęp do naszej aplikacji.

Zobaczymy dane zdefiniowane w naszym pliku Maszynopis to te wstrzyknięte do naszej aplikacji, w ten sposób oddzielamy logikę naszej aplikacji i możemy mieć czysty dokument HTML, który obsługuje tylko selektory, które stworzyliśmy dzięki kątowe 2, dając nam aplikację, która działa bardziej optymalnie i wydajniej przy jak najmniejszym wysiłku.