Johdatus kulmaiseen JS-sovellukseen

Angular JS on avoimen lähdekoodin sovellus. Se kirjoitettiin JavaScriptinä. Google kehitti kulma-JS: n vuonna 2010. Kulmainen JS-sovellus tarjoaa dynaamisen viitteen myös verkkosovelluksiin ja sivuihin. Kulmaisen JS: n avulla voit laajentaa HTML-sanastoa sovelluksellesi. Kulmaista JS: tä käytetään, koska HTML epäonnistuu, kun sitä yritetään käyttää dynaamisten näkymien ilmoittamiseen verkkosovelluksissa. Kulmaiseen JS: ään viitataan sovelluskehitykseen parhaiten soveltuvan kehysrakenteen työkalupakkona.

Kulmaisia ​​JS-kehysominaisuuksia voidaan muokata tai korvata, käyttää uudelleen, jotta ne sopisivat enemmän tai yksilöllisemmiksi työnkululle ja tulevaa käyttöä varten. Se on täysin laajennettavissa ja toimii myös muiden kirjastojen kanssa. AngularJS-sovelluskoodi on yksinkertainen vanhoissa javascript-objekteissa. Se saa koodisi testaamaan, ylläpitämään ja käyttämään uudelleen. Kulmaisessa JS: ssä ei ole tarvetta periä omistamilta tyypeiltä, ​​jotta mallit kääritään lisälaitemenetelmiin, kuten meidän on tehtävä muissa. Kulmikas JS on noudattanut uusimpia kehityskonsepteja.

Kulman JS-sovelluksen käsitteet

Kulmaisen JS-sovelluksen käsitteet ja esimerkit ovat seuraavat:

  • Ohjeet HTML-määritteiden laajentamiseksi

Ominaisuusdirektiivi on ainutlaatuinen ja saatavana muissa puitteissa. Direktiivit on kirjoitettu helposti ja ne voivat olla myös yleisiä, koska ne voidaan kirjoittaa kerran ja käyttää uudelleen useita kertoja. Direktiivit ovat todella hyödyllisiä, ja käyttämiseen on monia syitä, kuten silloin, kun sinulla on erityistarpeita mukautettuna ruudukkona tai muuna toiminnallisuutena, haluamaasi direktiiviä ei todellakaan ole vielä olemassa. Kulmainen JS-sovellusdirektiivi alkaa merkinnällä 'ng-', kuten ng-pp, ng-ohjain, ng-view, ng-model, ng-class, ng-click, ng-src jne.

Esimerkki:




Silmukka ng-toistolla:

    ((x))
  • laajuus

Sitä käytetään tiedonsiirtoon ohjaimen ja kuvan välillä. Se sitoo näkymän ohjaimella määriteltyyn näkymämalliin ja toimintoihin. Kulmainen JS-sovellus tukee sisäkkäisiä tai hierarkkisia laajuuksia. Se on tietolähde Angular JS -sovellukselle, ja se voi tarvittaessa lisätä tai poistaa ominaisuutta. Kaikki datan manipulointi ja datan osoittaminen tapahtuvat laajuusobjektin kautta, kun CRUD-toiminta suoritetaan.

  • ohjaimet

Niitä käytetään määrittelemään näkymien laajuus ja laajuutta voidaan ajatella muuttujina ja funktioina, jotka näkymässä voivat käyttää jonkin verran sitovuutta.

Esimerkki:




First Name:

Last Name:


Full Name: ((firstName + " " + lastName))

var app = angular.module('myApp', ());
app.controller('myCtrl', function ($scope) (
$scope.firstName = "James";
$scope.lastName = "Anderson";
));

  • Tietojen sitominen

Se synkronoi tiedot mallin ja näkymän välillä. Se tarkoittaa, että mallin muutos päivittää näkymän. Ng-mallidirektiiviä käytetään kaksisuuntaiseen tiedon sitomiseen.

Esimerkki:
Kun käyttäjä kirjoittaa tekstikenttään, muutettu arvo näkyy isoilla ja pienillä kirjaimilla, jotka ovat kaksisuuntaisia ​​dataa sitovia.

  • Palvelut

Sitä käytetään, kun tila on jaettu sovellukselle ja se tarvitsee ratkaisun tietojen tallennukseen. Se voi olla singleton, ja sitä voivat käyttää muut komponentit, kuten direktiivit, ohjaimet ja muut palvelut. Käytettyjä palveluita ovat $ http, $ location, $ log, $ route, $ suodatin, $ document, $ timeout, $ poikkeusHandler.

  • reititys

Se auttaa jakamaan sovelluksen useisiin näkymiin ja sitomaan useita näkymiä ohjaimiin. Se jakaa SPA: n useisiin näkymiin sovelluksen loogiseksi jakamiseksi ja sen hallittavuuden parantamiseksi.

Esimerkki: oletusreitti

App.config(('$routeProvider',
function($routeProvider)
(
$routeProvider.
when('/List',
(
templateUrl: 'Views/list.html',
controller: 'ListController'
)).
when('/Add',
(
templateUrl: 'Views/add.html',
controller: 'AddController'
).
otherwise((
redirectTo: '/List'
));
)));

  • Suodattimet

Niitä käytetään laajentamaan sitovan ilmaisun ja ohjeistuksen käyttäytymistä. Se mahdollistaa tietojen alustamisen ja arvojen muotoilun tai tiettyjen ehtojen soveltamisen. Suodattimet kutsutaan HTML-muodossa piipun sisäisten lausekkeiden sisällä.

Esimerkki:

< html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

Suodatuksen tulo:

    (((x.nimi | iso kirjain) + ', ' + x.age + ', ' + x.city))
  • expressions

Lausekkeet (()) ovat deklaratiivinen tapa määritellä datan sitomispaikka HTML: ssä ja käyttää lauseketta datan sitomiseen. Se voidaan lisätä HTML-malleihin, eikä se tue ohjausvirtalausekkeita, mutta tukee suodattimia tietojen muotoiluun ennen niiden näyttämistä.

Esimerkki:




Syötä jotain syöttöruutuun:

Nimi:

Kirjoitit: ((firstName))

  • moduulit

    Moduuli on sovelluksen kontti ja sovelluksen ohjaimet kuuluvat moduuliin. Se on toimintojen kokoelma ja jakaa sovelluksen pieneen ja uudelleen käytettävään toiminnalliseen komponenttiin. Moduuli voidaan tunnistaa yksilöivällä nimellä ja se voi olla riippuvainen muista moduuleista.

Esimerkki:



//Referring module name myApp
(( firstName + " " + lastName ))


  • Testaus

Testataksesi kulma-JS-sovelluskoodia, testikehyksiä käytetään laajasti, kuten Jasmine ja karma. Nämä testauskehykset tukevat pääasiassa pilkkaamista ja erittäin konfiguroitavissa käyttämällä JSON-tiedostoa erilaisten plug-in Angular JS -sovellusten avulla.

Johtopäätös - Kulmainen JS-sovellus

Kulmainen JS tarjoaa puitteet, joilla on ainutlaatuisia direktiivejä ja tehokkaita ominaisuuksia. Direktiivit auttavat meitä uuden HTML-syntaksin rakentamisessa, joka on pääasiassa sovelluskohtainen. Sitä käytetään uudelleenkäytettävinä komponenteina. Komponentti antaa sinun piilottaa monimutkainen rakenne ja muu käyttäytyminen. Painopiste olisi vain siinä, mitä sovellus tekee ja kuinka sovellus näyttää erikseen. Kulmikas JS-sovellus on tulossa suosituksi nykyään, koska sovelluksen oppiminen ja kehittäminen on helppoa. Markkinoilla on monia mahdollisuuksia käyttöliittymäkehittäjälle. Jos sinulla on JavaScriptiä, niin Angular JS ei ole sinulle kova oppimista varten ja päivittää taitosi tällä tekniikalla olisi hieno idea.

Suositellut artikkelit

Tämä artikkeli on opas kulmikkaaseen JS-sovellukseen. Tässä olemme keskustelleet kulmikkaan JS-sovelluksen käsitteistä jonkin esimerkin avulla ymmärtääksesi paremmin. Voit myös tarkastella seuraavaa artikkelia saadaksesi lisätietoja.

  1. Kulman 5 ja kulman 4 erot
  2. Mikä on koneoppiminen?
  3. Erot JSON: n ja BSON: n välillä
  4. Mikä on Laravel Framework?
  5. Mikä on Java-testauskehys?