Introduksjon til Angular JS-applikasjon

Angular JS er en åpen kildekode-applikasjon. Det ble skrevet i JavaScript. Angular JS ble utviklet i 2010 av Google. Angular JS-applikasjon gir også en dynamisk referanse til webapplikasjoner og sider. Angular JS lar deg utvide HTML-vokabularet for applikasjonen din. Angular JS brukes fordi HTML vakler når det blir prøvd å bruke for å erklære de dynamiske visningene i webapplikasjoner. Angular JS blir referert til som verktøysettet for å bygge det rammeverket som er best egnet for din applikasjonsutvikling.

Kantete JS-rammefunksjoner kan modifiseres eller erstattes, brukes på nytt for å passe mer eller unike for arbeidsflyt og for fremtidig referanse. Det er fullt utvidbart og fungerer også med andre biblioteker. AngularJS-applikasjonskoden er vanlig i gamle JavaScript-objekter. Det gjør koden din til å teste, vedlikeholde, bruke på nytt. I kantete JS er det ikke nødvendig å arve fra proprietære typer for å pakke sammen modellene i tilbehørsmetoder som vi må gjøre i andre. Angular JS har fulgt de siste konseptene for utvikling.

Concepts of Angular JS Application

Konseptene til Angular JS Application med eksemplene deres er som følger:

  • Direktiv om å utvide HTML-attributter

Funksjonsdirektivet er unikt og tilgjengelig i andre rammer. Direktivene er skrevet enkelt og kan være generiske også da de kan skrives en gang og brukes på nytt mange ganger. Direktivene er veldig nyttige, og det er mange grunner til å bruke, for eksempel når du har spesielle behov som tilpasset rutenett eller annen funksjonalitet, direktivet du ønsker, eksisterer virkelig ikke ennå. Angular JS Application-direktivet starter med 'ng-' som ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, etc.

Eksempel:

Looping med ng-repetisjon:

    ((x))

  • omfang

Den brukes til kommunikasjonen mellom kontroller og visning. Den binder en visning til visningsmodellen og funksjonene som er definert i kontrolleren Angular JS Application støtter nestede eller hierarkiske omfang. Det er en datakilde for Angular JS Application, og den kan legge til eller fjerne eiendom når det er nødvendig. All datamanipulering og tildeling av data skjer gjennom omfangsobjekt når du skal utføre CRUD-operasjon.

  • Controllers

Disse brukes til å definere omfanget for visningene, og omfanget kan tenkes på som variabler og funksjoner som visningen kan bruke noe innbinding.

Eksempel:




First Name:

Last Name:


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

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

  • Innbinding av data

Det synkroniserer dataene mellom modellen og visningen. Det betyr at endringen i modellen vil oppdatere visningen. Direktivet på ng-modellen brukes til toveis databinding.

Eksempel:
Når brukeren skriver inn tekstboksen, vises den endrede verdien med store og små bokstaver på en etikett som er toveis datainbinding.

  • tjenester

Det brukes når staten har blitt delt på tvers av applikasjonen og trenger en løsning for datalagring. Det kan være en singleton og kan brukes av andre komponenter som direktiver, kontrollere og andre tjenester. Tjenestene som blir brukt er $ http, $ location, $ log, $ route, $ filter, $ document, $ timeout, $ exceptionHandler.

  • ruting

Det hjelper med å dele appen i flere visninger og binde flere visninger til kontrollere. Den deler SPA i flere visninger for logisk å dele appen og gjøre den mer håndterbar.

Eksempel: standardrute

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

Disse brukes til å utvide oppførselen til bindende uttrykk og direktiv. Det gjør det mulig å formatere dataene og formatere verdier eller å anvende visse betingelser. Filtre påberopes i HTML med røret i uttrykk.

Eksempel:

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

Filtrering av innspill:

    (((x.name | store bokstaver) + ', ' + x.age + ', ' + x.city))

  • Uttrykkene

Uttrykkene (()) er den erklærende måten å spesifisere databindingsplassering i HTML og bruke et uttrykk for databinding. Det kan legges til i HTML-maler og støtter ikke kontrollflytuttalelser, men det støtter filtre for å formatere dataene før de vises.

Eksempel:

Skriv inn noe i inntastingsboksen:

Navn:

Du skrev: ((firstName))

  • moduler

    Modulen er beholderen til et program, og applikasjonskontrollere tilhører modulen. Det er en samling funksjoner og deler applikasjonen i den lille og gjenbrukbare funksjonelle komponenten. En modul kan identifiseres med et unikt navn og kan være avhengig av andre moduler.

Eksempel:



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


  • testing

For å teste Angular JS Application-koden, er testrammer mye brukt som Jasmine og karma. Disse testerammene støtter hovedsakelig hån og veldig konfigurerbar ved hjelp av en JSON-fil ved hjelp av forskjellige plug-in Angular JS-applikasjoner.

Konklusjon - Angular JS-applikasjon

Angular JS gir rammeverket som har unike direktiver og kraftige funksjoner. Direktiver hjelper oss med å bygge den nye HTML-syntaks som hovedsakelig er spesifikk for et program. Det blir brukt som gjenbrukbare komponenter. Komponenten lar deg skjule kompleks struktur og annen oppførsel. Fokuset vil kun være på hva applikasjonen gjør og hvordan applikasjonen ser separat ut. Angular JS-applikasjonen blir populær i disse dager blant det det er lett å lære og utvikle applikasjonen. Det er mange muligheter i markedet for frontend-utvikleren. Hvis du er god med JavaScript, vil ikke Angular JS være tøft for deg å lære og å oppdatere ferdighetene dine med denne teknologien ville være en god idé.

Anbefalte artikler

Denne artikkelen har vært en guide til Angular JS Application. Her har vi diskutert Concepts of Angular JS Application med noen eksempler for å få en bedre forståelse. Du kan også se på følgende artikkel for å lære mer.

  1. Forskjeller på vinkel 5 og kant 4
  2. Hva er maskinlæring?
  3. Forskjeller mellom JSON og BSON
  4. Hva er Laravel Framework?
  5. Hva er testrammer for Java?

Kategori:

Programvare utvikling