Úvod do AngularJS

Když jsem se před pár týdny setkal s AngularJS, nejdřív mě zaujalo. V době, kdy jsem pracovala přes sadu výukových programů dostupných na webových stránkách AngularJS, jsem byl nadšený, že jsem našel tento rámec.

Co je AngularJS? AngularJS je (relativně) nové dítě na kódovacím bloku. Citovat se z jejich webových stránek je "strukturálním rámcem pro dynamické webové aplikace", který je obzvláště vhodný pro vytváření jednostránkových webových aplikací, ačkoli to určitě není omezeno.

Vyvinutý v roce 2009 Miško Hevery a Adam Abrons - oba zaměstnanci společnosti Google v té době - ​​to je zcela JavaScript a zcela na straně klienta, takže kdekoli může JavaScript běžet, může být AngularJS spuštěn. Je také malý: komprimovaný a minimalizovaný je menší než 29 kb. A je to pod licencí MIT open source. Můžete dokonce použít logo, které je k dispozici pod Creative Commons Attribution-ShareAlike 3.0 Unported License.

Podle Wikipedia je cílem Angular "rozšíření aplikací založených na prohlížeči s funkcí MVC (Model-View-Controller)" a to je jen to, že poskytuje rámec pro vazbu / MVC. To je oboustranná vazba, myslí tě. Lahodné. Stejně jednoduchá struktura jako {{my data}} sváže data na vaši stránku. Služba $ scope detekuje změny modelu a upravuje výrazy HTML v pohledu prostřednictvím řadičů. V opačném směru se v modelu projeví změna pohledu. To odstraňuje potřebu velké drtivé manipulace DOM, zaměřené na data, které mnozí z nás, včetně mne, považují za samozřejmost při práci s knihovnou, jako je jQuery.

Úhlové běhy jsou přímo z krabice bez závislostí na knihovnách, ačkoli je možné je rozšířit o mnoho dostupných modulů a samozřejmě můžete vytvořit vlastní, aby vyhovovaly vašim specifickým potřebám. Jelikož je čistý JavaScript, má také výhodu, že je server-agnostik.

Být zvyklý na výkonnou knihovnu, jako je jQuery, je snadné ji chtít mixovat, aby bylo možné udělat věci, které už Angular může udělat. Rozpoznávání tohoto potenciálního úskoku, vývojáři mají toto říci: "Pokud se snažíte překonat zvyk, zvážíte odstranění jQuery z vaší aplikace. Opravdu. Angular má $ http službu a výkonné směrnice, díky nimž je téměř vždy zbytečné. "Jedna věc je jistá, pokud se budete držet Angular, smyčky jQuery a explicitní zpětná vazba se serverem budou z vašeho kódu chybějící. Úhlová poskytuje tak stručnou a čistou metodu, jak dosáhnout stejných věcí.

Směrnice

Angulární používá direktivy pro připojení své akce do stránky. Směry, které jsou předem označeny ng-, jsou umístěny v atributech html.

Některé společné směrnice, které přicházejí předběžně s funkcí Angular, jsou:

ng-app: toto je v podstatě výchozí vstupní bod úhlu na stránku. Říká Angullu, kde se to děje. je potřeba definovat stránku jako úhlovou aplikaci.

ng-bind: změní text prvku na hodnotu výrazu.
zobrazí hodnotu "jméno" uvnitř rozpětí. Jakékoliv změny v "name" se okamžitě promítají v doméně DOM kdekoli se používá proměnná.

ng-controller: určuje třídu JavaScript pro danou akci. Kontroléry se obvykle uchovávají ve vnějších souborech .js.

ng-repeat: vytvoří struktury velmi čisté smyčky ve vaší stránce.

{{item.description}}

bez námahy prochází každou položku ve sbírce.

Ještě jsem je nepoužíval sám, ale četl jsem, že vytváření vlastních směrnic může být choulostivým problémem, něco, co zabere trochu času, aby jste zabalili hlavu. Úhlové nabídky a video, které vám pomůže vyjasnit koncept.

Nějaký ukázkový kód

Jak již bylo zmíněno dříve, směrnice ng-app v tag nastaví fázi pro úhlové spuštění na stránce.

Přidat na hlavu stránky přineste vlastní úhlový rámec.

poukazuje na externí soubor JavaScript nebo soubory, které obsahují třídy JavaScript, které vám zavolá Angulární aplikace. Velmi jednoduchá třída může být například:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"popis": "Nerf pistole"}, {"popis": "telefon"},];} 

Při přechodu ng-controller "ItemListCtrl", název mého imaginárního javascriptu třídy, říká Angle, jaký kód se má spustit:

a double-bracket notation říká Angular, jaké výrazy se mají vyhodnotit.

ng-repeat je nádherně stručná direktiva opakovačů, která prochází aktuální kolekcí a provádí zadané akce nebo poskytuje zadaná data. Je to tak jednoduché a čisté.

Stuff on my desk:
{{item.description}}

Toto jednoduché nastavení zobrazí:

Stuff on my desk:coffee potnerf gunphone

Skutečně to nevypadá tak působivě, ale samotný nápad je. Velmi jednoduchá značkovací stránka a regulátory umožňují začít s úhlovým, dobře, velmi jednoduchým.

Získání skutečných dat do aplikace je příjemně jednoduché. Angulární rád konzumuje JSON:

function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;}  }} 

Tím se vrátí objekt JSON, který lze ve vaší aplikaci Uhlová manipulovat.

A je také vybudováno pro testování!

Jedna ze základních principů Angular byla založena na tom, že aplikace postavené s ním mohou být plně testovatelné. Pro testování typu end-to-end máme k dispozici systém úhlového scénáře, který simuluje interakci uživatelů s vaší aplikací. Krmíte testy scénářů napsané v jazyce JavaScript.

Pro ladění v prohlížeči, AngularJS Batarang je rozšíření pro Chrome dostupné na adrese github.

Zdroje

Vzhledem k tomu, že systém AngularJS získá více trakce, bude k dispozici více zdrojů, ale již existuje řada stránek, které poskytují instrukce a způsoby rozšíření úhlu.

The Místo AngularJS je samozřejmě vaším konečným zdrojem. Nabízejí rock-solid, jednoduché výukové programy a poměrně aktivní Google+ přítomnost.

Existuje několik úhlů úložišť na GitHubu.

Úhlové moduly, nabízí sadu modulů odeslaných uživateli, od služeb Backbone po integraci Rails.

Už jste použili AngularJS? Jak se porovná s mnohem většími knihovnami, jako je jQuery? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, úhel obrazu přes Shutterstock.