Introduktion till Angular JS-applikation

Angular JS är en öppen källkodsprogram. Det skrevs i JavaScript. Angular JS utvecklades år 2010 av Google. Angular JS-applikation ger en dynamisk referens till webbapplikationer och sidor också. Angular JS låter dig utöka HTML-ordförrådet för din applikation. Angular JS används eftersom HTML vacklar när det försöks använda för att deklarera de dynamiska vyerna i webbapplikationer. Angular JS kallas verktygset för att bygga det ramverk som är bäst lämpat för din applikationsutveckling.

Vinkelformiga JS-ramfunktioner kan modifieras eller ersättas, återanvändas för att passa mer eller unika för arbetsflöde och för framtida referens. Det är helt töjbart och fungerar också med andra bibliotek. AngularJS-applikationskoden är vanlig i gamla javascript-objekt. Det gör din kod för att testa, underhålla, återanvända. I vinkelformig JS finns det inget behov av att ärva från egna typer för att slå in modellerna i tillbehörsmetoder som vi måste göra i andra. Angular JS har följt de senaste koncepten för utveckling.

Concepts of Angular JS Application

Begreppen Angular JS Application med deras exempel är följande:

  • Direktiv om att utöka HTML-attribut

Funktionsdirektivet är unikt och tillgängligt i andra ramverk. Direktiven skrivs enkelt och kan vara generiska också eftersom de kan skrivas en gång och återanvändas många gånger. Direktiven är verkligen användbara och det finns många skäl att använda, till exempel när du har speciella behov som det anpassade rutnätet eller annan funktionalitet, det direktiv du vill verkligen existerar inte ännu. Angular JS Application-direktivet börjar med 'ng-' som ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, etc.

Exempel:

Looping med ng-repetera:

    ((x))

  • Omfattning

Det används för kommunikation mellan styrenhet och vy. Det binder en vy till visningsmodellen och funktionerna som definieras i kontrollenheten Angular JS Application stöder kapslade eller hierarkiska omfång. Det är en datakälla för Angular JS-applikation och den kan lägga till eller ta bort egendom vid behov. All datamanipulation och tilldelning av data sker genom omfattningsobjekt när man ska göra CRUD-operation.

  • controllers

Dessa används för att definiera räckvidden för vyerna och räckvidd kan betraktas som variabler och funktioner som visar kan använda viss bindning.

Exempel:




First Name:

Last Name:


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

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

  • Databindning

Det synkroniserar data mellan modellen och vyn. Det betyder att förändringen i modellen kommer att uppdatera vyn. Direktivet om ng-modellen används för tvåvägs databindning.

Exempel:
När användaren skriver in textrutan visas det ändrade värdet med stora och små bokstäver på en etikett som är tvåvägsdatabindning.

  • tjänster

Det används när staten har delats över applikationen och behöver en lösning för datalagring. Det kan vara en singleton och kan användas av andra komponenter som direktiv, styrenheter och andra tjänster. Tjänsterna som används är $ http, $ plats, $ logg, $ rutt, $ filter, $ dokument, $ timeout, $ exceptionHandler.

  • routing

Det hjälper till att dela appen i flera vyer och binda flera vyer till styrenheter. Den delar SPA i flera vyer för att logiskt dela appen och göra den mer hanterbar.

Exempel: standardrutt

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

  • filter

Dessa används för att utvidga beteendet med bindande uttryck och direktiv. Det gör det möjligt att formatera data och att formatera värden eller tillämpa vissa villkor. Filter anropas i HTML med röret inuti uttryck.

Exempel:

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

Filtrera ingång:

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

  • uttryck

Uttryck (()) är det deklarativa sättet att ange plats för datainbindning i HTML och använda ett uttryck för databindning. Det kan läggas till i HTML-mallar och stöder inte kontrollflödesanalyser men det stöder filter för att formatera data innan de visas.

Exempel:

Mata in något i inmatningsrutan:

Namn:

Du skrev: ((firstName))

  • moduler

    Modulen är behållaren för en applikation och applikationsstyrenheter tillhör modulen. Det är en samling funktioner och delar upp applikationen i den lilla och återanvändbara funktionskomponenten. En modul kan identifieras med ett unikt namn och kan vara beroende av andra moduler.

Exempel:



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


  • Testning

För att testa Angular JS-applikationskoden används testramar ofta som Jasmine och karma. Dessa testramar stöder främst håna och mycket konfigurerbar med en JSON-fil med hjälp av olika plug-in Angular JS-applikationer.

Slutsats - Angular JS-applikation

Angular JS tillhandahåller ramverket som har unika direktiv och kraftfulla funktioner. Direktiv hjälper oss att bygga den nya HTML-syntaxen som huvudsakligen är specifik för en applikation. Det används som återanvändbara komponenter. Komponenten låter dig dölja komplex struktur och annat beteende. Fokus ligger bara på vad applikationen gör och hur applikationen ser separat ut. Vinkelformad JS-applikation blir populär i dessa dagar bland de eftersom det är lätt att lära sig och utveckla applikationen. Det finns många möjligheter på marknaden för frontend-utvecklaren. Om du har det bra med JavaScript är inte Angular JS svårt för dig att lära dig och att uppdatera dina färdigheter med den här tekniken skulle vara en bra idé.

Rekommenderade artiklar

Den här artikeln har varit en guide till Angular JS Application. Här har vi diskuterat Concepts of Angular JS Application med några exempel för att få en bättre förståelse. Du kan också titta på följande artikel för att lära dig mer.

  1. Skillnader mellan vinkel 5 och vinkel 4
  2. Vad är maskininlärning?
  3. Skillnader mellan JSON och BSON
  4. Vad är Laravel Framework?
  5. Vad är Testing Framework för Java?

Kategori:

Mjukvaruutveckling