Pradedančiųjų žiniatinklio programų kūrimo su „AngularJS“ vadovas

angularjs pagrindinis puslapis

Prisijunkite naudodamiesi „Google“ žiniatinklio programų sistema

Jei esate profesionalus „JavaScript“ kūrėjas, tikriausiai apie tai girdėjote Ember.js (atviro kodo „JavaScript“ sistema) ir Backbone.js („JavaScript“ biblioteka su RESTful JSON sąsaja). Bet jei nesate susipažinę KampinisJS vis dėlto jūs praleisite kai kurias labai patrauklias savybes, kurios tikrai gali patobulinti jūsų žiniatinklio programų HTML.

Čia mes suteiksime jums skonio „AngularJS“, super herojiškam „JavaScript MVW“ karkasui, įskaitant jo išskirtines savybes ir darbo su juo procesą.



Tikimės, kad tai ne tik padės sukurti gerai suprojektuotas ir prižiūrimas turtingas žiniatinklio programas, bet ir pateiks rimtų priežasčių pasirinkti „AngularJS“ būsimiems projektams. Pradėkime!

kibernetinio pirmadienio pasiūlymai nešiojamiesiems kompiuteriams 2017 m

01. Kas yra „AngularJS“?

„Google“ sukurta „AngularJS“ yra atvirojo kodo žiniatinklio programų sistema, sukurta taip, kad žiniatinklio kūrėjams būtų lengviau kurti ir išbandyti visas funkcijas. Pagrindinis „AngularJS“ tikslas yra pailginti žiniatinklio programas su MVC (Model – view – controller) galimybe. Tai yra kliento pusės „JavaScript MVC / MVVM“ sistema, kuri yra visiškai išplėsta, veikia be bibliotekos priklausomybės, taip pat puikiai veikia su kitomis bibliotekomis. Net galite modifikuoti arba pakeisti kiekvieną jos funkciją, kad atitiktų jūsų specifinius poreikius.

„AngularJS“ 2009 m. Sukūrė Adomas Abronsas ir Mi & scaron; ko Heverym, kurie tuo metu buvo „Google“ inžinieriai. Kaip minėta oficialioje svetainėje, tai yra „struktūrinė dinaminių žiniatinklio programų struktūra“, kuri geriausiai tinka sukurti vieno puslapio interneto programas, kurioms kliento pusėje reikia tik „JavaScript“, CSS ir HTML.

Tai leidžia jums naudoti HTML kaip šablono kalbą ir leidžia išplėsti HTML sintaksę, kad galėtumėte tvarkingai ir glaustai išreikšti savo žiniatinklio programos komponentus. „AngularJS“ padeda geriau susisteminti „JavaScript“ kodą ir palengvina testavimą, mokydamas naršyklę naudoti priklausomybės injekciją bet kuriai serverio technologijai.

Kaip naudoti AngularJS

Pradėti naudotis „AngularJS“ yra gana paprasta. Paprastą „Angular“ programą galite turėti vos per penkias minutes, įdėdami kelis atributus į HTML scenarijus. Šitie yra:

1. Į žymą įtraukite „ng-app“ direktyvą. Tai leis „AngularJS“ veikti puslapyje, apibrėžiant puslapį kaip „Angular“ programą.

kaip padaryti manga puslapį

2. Įdėkite kampinę žymą savo puslapio apačioje, kur baigsis žymė.

3. Pridėkite įprastą HTML. HTML atributai naudojami norint pasiekti „AngularJS“ direktyvas, o išraiškos vertinamos naudojant dvigubą skliaustą.

Today's tasks

  • {{task.name}}

Čia direktyva ng-controller apibrėžia vardų sritį, kurioje galite įdėti savo kampinį JS, kad galėtumėte valdyti duomenis ir įvertinti HTML išraiškas. Nors „ng-pakartojimo“ direktyva yra „Angular“ kartotuvo objektas, kuris paprašo „Angular“ sukurti sąrašo elementus tol, kol turite rodyti užduotis.

Nors šiandien dauguma sistemų yra tik pluoštas esamų įrankių, „AngularJS“ yra naujos kartos sistema, turinti keletą labai patrauklių funkcijų, kurios yra naudingos ne tik kūrėjams, bet ir vienodai naudingos dizaineriams. Toliau pateikiamos kelios neįtikėtinos „AngularJS“ savybės, kurios padės kūrėjams padaryti nuostabias būsimas žiniatinklio programas ...

Direktyvos

Direktyvos yra viena iš galingiausių ir patraukliausių „AngularJS“ savybių. Jie leidžia jums išplėsti savo HTML ir „AngularJS“ naudoja savo veiksmus prisijungti prie puslapio. Jie leidžia jums nurodyti pasirinktines ir daugkartines HTML žymas, kurios gali būti naudojamos manipuliuojant DOM atributais ir reguliuojant konkrečių elementų elgseną. Visos direktyvos yra su priešais „ng-“, sukurtos kaip atskiri elementai, atskirti nuo jūsų MVC programos, ir dedami į HTML atributus.



Kai kurios žinomos „AngularJS“ direktyvos yra:

  • „ng-app“: ši direktyva nurodo „Angular“, kur suaktyvinti. Norėdami apibrėžti puslapį kaip kampinę programą, turite naudoti paprastą kodą:.
  • „ng-bind“: ši direktyva nurodo „Angular“ pakeisti HTML elemento teksto turinį su nurodytos išraiškos verte ir atnaujinti tekstą, kai keičiasi tos išraiškos vertė.
  • „ng-model“: jis labai panašus į „ng-bind“, tačiau susieja vaizdą į modelį, kurio reikalauja kitos direktyvos, pvz., „Select“, „textarea“ ar „input“.
  • ng-class: leidžia dinamiškai įkelti klasės atributus.
  • „ng-controller“: ši direktyva leidžia nurodyti „JavaScript“ valdiklio klasę HTML išraiškoms vertinti.
  • ng-pakartojimas: Jis be vargo peržiūri elementą, kuriam nustatytas duoto kilpos kintamasis, kolekcijoje.
  • „ng-hide“ ir „ng-show“: Naudodama Bulio loginės išraiškos vertę, ši direktyva nusprendžia, ar elementas bus rodomas, ar ne.
  • ngIf: Tai yra pagrindinė „if“ sakinio direktyva, leidžianti iš naujo įterpti kompiliuoto elemento kloną į DOM, jei sąlygos yra tinkamos. Jei sąlyga yra klaidinga, ji pašalina elementą iš DOM.

Toliau pateikiamas direktyvos, kuri klauso įvykio ir atitinkamai atnaujina jo taikymo sritį, pavyzdys.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Šią pasirinktinę direktyvą galima naudoti taip:

Dvipusis duomenų įrišimas

Duomenų surišimas yra bene labiausiai dominuojantis ir pastebimas „AngularJS“ bruožas. Tai taupo kūrėjus nuo didelio kodo rašymo, nes sumažėja didelė serverio vidinės dalies našta. Įprastoje žiniatinklio programoje 80% kodo bazės skiriama manipuliuoti, važiuoti ir klausytis DOM. Susiejus duomenis, šis kodas tampa nematomas, todėl galite sutelkti dėmesį į kitus svarbius savo programos dalykus.

Tradiciškai dauguma šablonų sistemų turi vienpusį duomenų įrišimą: jie sujungia modelio ir šablono komponentus į rodinį. Po sujungimo modelio pakeitimai automatiškai neatsispindi rodinyje. Kad atspindėtų šiuos pokyčius, kūrėjas turi rankiniu būdu manipuliuoti DOM elementais ir atributais. Šis procesas tampa sudėtingesnis ir sudėtingesnis, kai vartotojas pakeičia rodinį. Kadangi kūrėjui reikia interpretuoti sąveikas, jas sujungti į modelį ir atnaujinti rodinį.

kaip priversti tekstą švytėti

Vienpusė duomenų įrišimo schema

Viršelio leidimas iš http://docs.angularjs.org

Priešingai, „AngularJS“ vykdo duomenų įrišimą geriau ir kitaip, tvarkydamas duomenų sinchronizavimą tarp modelio ir DOM ir atvirkščiai.

Dvipusė duomenų įrišimo schema

Viršelio leidimas iš http://docs.angularjs.org

Toliau pateikiamas paprastas pavyzdys, paaiškinantis įvesties vertės susiejimą su

žyma.

Name:

Hello, {{yourName}}!

Priklausomybės injekcija

„AngularJS“ turi įmontuotą purkštukų posistemį, leidžiantį kūrėjams lengvai kurti, suprasti ir išbandyti programas. Priklausomybės įpurškimas „AngularJS“ yra atsakingas už komponentų kūrimą, tvarkymą, kaip jie sužino savo priklausomybes, ir paprašius, kad jie būtų prieinami kitiems komponentams.

Pasinaudodamas priklausomybės injekcija, „AngularJS“ kliento pusėje esančiose žiniatinklio programose pateikia tradicines serverio paslaugas, o tai sumažina apkrovą programinei įrangai ir žymiai palengvina interneto programą.

Jei norite gauti prieigą prie pagrindinių „AngularJS“ paslaugų, turite pridėti tam tikrą paslaugą kaip parametrą. „AngularJS“ automatiškai pastebės, kad norite naudotis ta paslauga, ir padarys jums egzempliorių.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Be to, galite apibrėžti savo pasirinktines paslaugas ir padaryti jas prieinamas injekcijoms.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Šablonai

Programoje „AngularJS“ šablonas rašomas naudojant HTML, kuriame yra kampui būdingi atributai ir elementai. Derindamas šabloną su valdiklio ir modelio informacija, „AngularJS“ pateikia dinaminį rodinį naršyklėse.

Žemiau yra kampiniai elementai ir atributai, kuriuos galima naudoti:

  • Filtras: Duomenis rodyti formatuoja šis elementas.
  • Formos valdikliai: jis naudojamas vartotojo įvesties tikrinimui.
  • Žymėjimas: jei norite susieti išraiškas su elementais, naudokite dvigubo garbanoto breketo žymėjimą {{}}.
  • Direktyva: elementas ar atributas, kuris pateikia daugkartinio naudojimo DOM komponentą arba pailgina esamą DOM elementą.

Žemiau pateiktas kodas rodo šabloną su direktyvomis ir žymėjimu:

„MacBook Pro“ 15 colių apsauginis dėklas
{{buttonText}}

Įprastoje programoje šablone yra CSS, HTML ir Angular nurodymai viename HTML faile (paprastai index.html).

Testavimas

Kadangi „JavaScript“ yra dinamiška ir interpretuojama su didele išraiškos jėga, tačiau beveik nereikalauja kompiliatoriaus pagalbos. Todėl „AngularJS“ komanda puikiai supranta, kad bet koks „JavaScript“ kodas turi būti atliktas atlikus griežtus testus. Taigi jie sukūrė „AngularJS“ nuo pat pradžios, kad būtų galima išbandyti, todėl jūsų žiniatinklio programas galima išbandyti kuo paprasčiau.

„AngularJS“ naudojasi visais priklausomybės injekcijos privalumais, yra iš anksto susietas su pašaipomis ir skatina atskirti elgesio ir požiūrio požiūrį. „AngularJS“ turi „end-to-end“ bandymo bėgiklį, vadinamą „Protractor“, kuris supranta „AngularJS“ vidinį veikimą, kad pašalintų bandymo trūkumus, ir imituoja vartotojo sąveiką su jūsų programa.

Kitas „AngularJS“ tipo testas yra „Unit test“, per kurį galite išbandyti atskirus kodo vienetus. Be to, „Angular“ komanda taip pat sukūrė „Chrome“ plėtinį, pavadintą KampinisJS Batarangas , kuris leidžia kūrėjams lengvai aptikti našumo trūkumus ir leidžia jiems derinti savo programas naršyklėje.

Ajeet Yadav yra profesionalus interneto kūrėjas, susijęs su wordpressintegration.com , žinoma interneto svetainių kūrimo įmonė, teikianti aukštos kokybės „Photoshop“ ir „WordPress“ temų / šablonų konvertavimo paslaugą. Sekite @Wordpress_INT „Twitter“ tinkle.