Kiedy parę tygodni temu spotkałem AngularJS, początkowo byłem zaintrygowany. Zanim przejrzałem zestaw samouczków dostępnych na stronie AngularJS, byłem zachwycony, że znalazłem tę strukturę.
Czym jest AngularJS? AngularJS jest (stosunkowo) nowym dzieckiem w bloku kodującym. Cytując na ich stronie internetowej jest to "struktura strukturalna dla dynamicznych aplikacji internetowych", która jest szczególnie dobrze dostosowana do budowania jednostronicowych aplikacji internetowych, choć z pewnością nie ogranicza się do tego.
Opracowany w 2009 r. Przez Miško Hevery i Adama Abronsa - pracowników Google w tym czasie - jest całkowicie JavaScript i całkowicie po stronie klienta, więc gdziekolwiek JavaScript może działać, AngularJS może działać. Jest również mały: skompresowany i zminimalizowany, ma mniej niż 29 kb. I jest open source na licencji MIT. Możesz nawet użyć logo dostępnego na licencji Creative Commons Uznanie autorstwa-Na tych samych warunkach 3.0 Unported.
Według Wikipedii celem Angular jest "rozszerzanie aplikacji opartych na przeglądarkach za pomocą możliwości MVC (model-view-controller)" i właśnie to zapewnia, dostarczając ramę wiążącą / MVC. To dwukierunkowe wiązanie, pamiętajcie. Pyszne. Dzięki strukturze tak prostej jak {{moje dane}} wiążesz dane ze swoją stroną. Usługa $ scope wykrywa zmiany w modelu i modyfikuje wyrażenia HTML w widoku za pomocą kontrolerów. Działając w innym kierunku, zmiany w widoku są odzwierciedlone w modelu. To eliminuje potrzebę znacznej większości manipulacji DOM zorientowanych na dane, z których wielu, włączając mnie, bierze za pewnik podczas pracy z biblioteką taką jak jQuery.
Kątowe działa natychmiast po wyjęciu z pudełka bez zależności bibliotek, chociaż można go rozszerzyć o wiele modułów, które są dostępne, i oczywiście można zbudować własne, aby dopasować się do konkretnych potrzeb. Będąc czystym JavaScriptem, ma także tę zaletę, że jest agnostykiem serwera.
Przyzwyczajając się do potężnej biblioteki, takiej jak jQuery, łatwo jest ją miksować, aby robić rzeczy, które Angular może już robić. Dostrzegając tę potencjalną pułapkę, programiści mają to do powiedzenia: "Jeśli walczysz z pokrzywdzeniem, rozważ usunięcie jQuery z aplikacji. Naprawdę. Angular ma usługę $ http i potężne dyrektywy, które sprawiają, że prawie zawsze jest to zbędne. "Jedno jest pewne, jeśli trzymasz się Angulara, pętle jQuery i wyraźne back-and-forth z serwerem będą nieobecne w twoim kodzie, ponieważ Angular dostarcza tak zwięzłej i czystej metody osiągania tych samych rzeczy.
Angular używa dyrektyw, aby podłączyć swoją akcję do strony. Dyrektywy, wszystkie poprzedzone ng-, są umieszczane w atrybutach html.
Niektóre z typowych dyrektyw, które pochodzą z prefabrykacji Angular, to:
ng-app: jest to zasadniczo początkowy punkt wejścia Angular do strony. Mówi Angularowi, dokąd zmierza. to wszystko, czego potrzeba, aby zdefiniować stronę jako aplikację kątową.
ng-bind: zmienia tekst elementu na wartość wyrażenia.
wyświetli wartość "name" wewnątrz zakresu. Wszelkie zmiany w "nazwa" są natychmiast odzwierciedlane w DOM gdziekolwiek używana jest zmienna.
ng-controller: określa klasę JavaScript dla danej akcji. Kontrolery są zwykle przechowywane w zewnętrznych plikach .js.
ng-repeat: tworzy bardzo czyste struktury pętli na twojej stronie.
- {{item.description}}
bez trudu przechwytuje każdy przedmiot z kolekcji.
Nie używałem ich jeszcze samemu, ale przeczytałem, że tworzenie niestandardowych dyrektyw może być trudnym problemem, który zajmuje trochę czasu, aby owinąć głowę. Angular oferuje wideo, aby pomóc wyjaśnić Koncepcja.
Jak wspomniano wcześniej, dyrektywa ng-app w tag ustawia scenę, którą Angular ma uruchomić na stronie.
Dodaj do strony głównej, aby wprowadzić samą ramę Angular.
wskazuje na zewnętrzny plik JavaScript lub pliki zawierające klasy JavaScript, które wywoła aplikacja Angular. Bardzo prosta klasa, na przykład, może być:
function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" } , {"description": "nerf gun"}, {"description": "phone"},];} Przekazywanie ng-kontrolera "ItemListCtrl", nazwy mojej wyimaginowanej klasy JavaScript, mówi Angularowi, jaki kod uruchomić:
notacja z podwójnym nawiasem mówi Angularowi, jakie wyrażenia oceniać.
ng-repeat to cudownie zwięzła dyrektywa przemiennika, która przechwytuje bieżącą kolekcję i wykonuje określone działanie lub dostarcza określone dane. To jest takie proste i czyste.
Stuff on my desk:
{{item.description}}Ta prosta konfiguracja wyświetli:
Stuff on my desk:coffee potnerf gunphoneWprawdzie nie wydaje się to tak imponujące, ale sam pomysł jest. Bardzo prosty znacznik strony i kontrolery ułatwiają rozpoczęcie pracy z Angular, cóż, bardzo proste.
Uzyskanie prawdziwych danych w twojej aplikacji jest równie proste. Angular lubi konsumować JSON:
function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;} } Zwraca obiekt JSON, który można dowolnie modyfikować w aplikacji Angular.
Jedną z podstawowych zasad, na których opierał się program Angular, było to, że aplikacje stworzone z niego można w pełni przetestować. W przypadku testów end-to-end mamy Angular Scenario Runner, aby symulować interakcje użytkownika z Twoją aplikacją. Przygotowujesz testy scenariuszy napisane w JavaScript.
Do debugowania w przeglądarce, AngularJS Batarang to rozszerzenie Chrome dostępne na github.
Ponieważ AngularJS zyskuje więcej trakcji, dostępnych będzie więcej zasobów, ale istnieje już wiele stron, które zapewniają instrukcje i sposoby rozszerzania Angular.
The Strona AngularJS sama w sobie, jest oczywiście twoim ostatecznym źródłem. Oferują solidne, proste samouczki i są dość aktywne Obecność w Google+.
Istnieje pewna liczba Angular repozytoria na GitHub.
Moduły kątowe, oferuje zbiór modułów przesłanych przez użytkownika, od usług szkieletowych po integrację Rails.
Czy używałeś już AngularJS? Jak to porównać do znacznie większych bibliotek, takich jak jQuery? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, kąt obrazu przez Shutterstock.