Introducere în aplicația unghiulară JS

Angular JS este o aplicație open-source. A fost scrisă în JavaScript. Angular JS a fost dezvoltat în anul 2010 de Google. Aplicația unghiulară JS oferă o referință dinamică și pentru aplicații web și pagini. Angular JS vă permite să extindeți vocabularul HTML pentru aplicația dvs. Angular JS se utilizează deoarece HTML înșeală atunci când se încearcă utilizarea pentru declararea vizualizărilor dinamice în aplicațiile web. Angular JS este denumit set de instrumente pentru construirea cadrului cel mai potrivit pentru dezvoltarea aplicației dvs.

Funcțiile de cadru angulare JS pot fi modificate sau înlocuite, refolosite pentru a se potrivi mai mult sau unic pentru fluxul de lucru și pentru referințe viitoare. Este complet extensibil și funcționează și cu alte biblioteci. AngularJS Codul aplicației este simplu în obiectele vechi javascript. Acesta vă face codul pentru a testa, menține, reutiliza. În JS unghiular, nu este necesară moștenirea de la tipurile de proprietate pentru a înfășura modelele în metode de accesorizare, așa cum trebuie să facem în alte. Angular JS a urmat cele mai noi concepte pentru dezvoltare.

Conceptele aplicației unghiulare JS

Conceptele aplicației Angular JS cu exemplele lor sunt următoarele:

  • Directive pentru extinderea atributelor HTML

Directiva funcțională este unică și disponibilă în alte cadre. Directivele sunt scrise cu ușurință și pot fi generice, deoarece pot fi scrise o dată și refolosite de mai multe ori. Instrucțiunile sunt cu adevărat utile și există numeroase motive pentru a utiliza, cum ar fi atunci când aveți nevoi speciale, precum grila personalizată sau alte funcționalități, directiva dorită nu există încă. Directiva Angular Application JS începe cu „ng-” ca ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src etc.

Exemplu:

Buclă cu ng-repere:

    (( X ))

  • domeniu

Este utilizat pentru comunicarea între controler și vizualizare. Se leagă o vedere la modelul de vizualizare și funcțiile definite în controler Angular JS Application acceptă scopuri imbibate sau ierarhice. Este o sursă de date pentru aplicația Angular JS și poate adăuga sau elimina proprietatea atunci când este necesar. Toată manipularea și alocarea datelor se realizează prin obiectul de aplicare atunci când se face operația CRUD.

  • controlerele

Acestea sunt utilizate pentru a defini domeniul de vizualizare și domeniul de aplicare poate fi gândit ca variabile și funcții care vizualizarea poate utiliza unele legături.

Exemplu:




First Name:

Last Name:


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

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

  • Legarea datelor

Se sincronizează datele dintre model și vizualizare. Înseamnă că modificarea modelului va actualiza vizualizarea. Directiva model ng este folosită pentru legarea datelor în două sensuri.

Exemplu:
Când utilizatorul introduce în caseta de text, valoarea modificată apare în majuscule și minuscule într-o etichetă care are legătură de date în două sensuri.

  • Servicii

Este utilizat atunci când statul a fost distribuit în întreaga aplicație și are nevoie de o soluție pentru stocarea datelor. Poate fi un singleton și poate fi utilizat de alte componente, cum ar fi directive, controlere și alte servicii. Serviciile utilizate sunt $ http, $ locație, $ log, $ ruta, $ filtru, $ document, $ timeout, $ exceptionHandler.

  • Routing

Ajută la împărțirea aplicației în mai multe vizualizări și leagă mai multe vizualizări la controlere. Împărțește SPA-ul în mai multe vizualizări pentru a împărți logic aplicația și a o face mai gestionabilă.

Exemplu: ruta implicită

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'
));
)));

  • Filtre

Acestea sunt utilizate pentru a extinde comportamentul expresiei și directivei obligatorii. Permite formatarea datelor și formatarea valorilor sau aplicarea anumitor condiții. Filtrele sunt invocate în HTML cu expresiile pipe în interior.

Exemplu:

< 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" ),
);
));

Intrare de filtrare:

    (((x.name | majuscule) + ', ' + x.age + ', ' + x.city))

  • Expresii

Expresiile (()) sunt modul declarativ de a specifica locația de legare a datelor în HTML și de a utiliza o expresie pentru legarea datelor. Poate fi adăugat în șabloane HTML și nu acceptă instrucțiunile de flux de control, dar acceptă filtre pentru formatarea datelor înainte de afișare.

Exemplu:

Introduceți ceva în caseta de introducere:

Nume:

Ai scris: ((firstName))

  • module

    Modulul este containerul unei aplicații și controlerele de aplicații aparțin modulului. Este o colecție de funcții și împarte aplicația în componenta funcțională mică și reutilizabilă. Un modul poate fi identificat cu un nume unic și poate fi dependent de alte module.

Exemplu:



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


  • Testarea

Pentru a testa codul aplicației unghiulare JS, cadrele de testare sunt utilizate pe scară largă precum Jasmine și karma. Aceste cadre de testare acceptă, în principal, derutarea și configurabila folosind un fișier JSON cu ajutorul diferitelor aplicații angulare JS plug-in.

Concluzie - Aplicație unghiulară JS

Angular JS oferă cadrul care are directive unice și caracteristici puternice. Directivele ne ajută să construim noua sintaxă HTML, care este în special specifică unei aplicații. Este utilizat ca componente refolosibile. Componenta vă permite să ascundeți o structură complexă și un alt comportament. Concentrația ar fi pusă doar pe ceea ce face aplicația și pe modul în care aceasta arată separat. Aplicația angulară JS devine populară în aceste zile, deoarece este ușor să înveți și să dezvolți aplicația. Există multe oportunități pe piață pentru dezvoltatorul front-end. Dacă vă pricepeți cu JavaScript, atunci Angular JS nu vă va fi greu să învățați și să vă actualizați abilitățile cu această tehnologie ar fi o idee grozavă.

Articole recomandate

Acest articol a fost un ghid pentru aplicația Angular JS. Aici am discutat Conceptele aplicației angulare JS cu un exemplu pentru a înțelege mai bine. De asemenea, puteți consulta articolul următor pentru a afla mai multe.

  1. Diferențele dintre unghiul 5 și unghiul 4
  2. Ce este învățarea automată?
  3. Diferențele dintre JSON și BSON
  4. Ce este Laravel Framework?
  5. Ce este Testarea cadrelor pentru Java?

Categorie:

Dezvoltare de software