Wprowadzenie do aplikacji Angular JS

Angular JS to aplikacja typu open source. Został napisany w JavaScript. Angular JS został opracowany w 2010 roku przez Google. Aplikacja Angular JS zapewnia także dynamiczne odniesienie do aplikacji internetowych i stron. Angular JS pozwala rozszerzyć słownictwo HTML dla twojej aplikacji. Angular JS jest używany, ponieważ HTML pęka, gdy próbuje się go użyć do deklarowania widoków dynamicznych w aplikacjach internetowych. Angular JS jest określany jako zestaw narzędzi do budowania frameworka najbardziej odpowiedniego do rozwoju aplikacji.

Funkcje frameworku JS można modyfikować lub zamieniać, ponownie wykorzystywać w celu dopasowania do większej lub unikatowej dla przepływu pracy i do wykorzystania w przyszłości. Jest w pełni rozszerzalny i działa również z innymi bibliotekami. Kod aplikacji AngularJS jest prosty w starych obiektach javascript. To sprawia, że ​​kod do testowania, konserwacji, ponownego użycia. W kątowym JS nie ma potrzeby dziedziczenia z zastrzeżonych typów w celu zawijania modeli metodami dostępu, tak jak musimy to robić w innych. Angular JS postępował zgodnie z najnowszymi koncepcjami rozwoju.

Koncepcje aplikacji Angular JS

Pojęcia Angular JS Application wraz z ich przykładami są następujące:

  • Dyrektywy rozszerzające atrybuty HTML

Dyrektywa funkcji jest wyjątkowa i dostępna w innych ramach. Dyrektywy są napisane łatwo i mogą być ogólne, ponieważ mogą być napisane raz i wielokrotnie użyte. Dyrektywy są naprawdę przydatne i istnieje wiele powodów, aby z nich korzystać, np. Gdy masz specjalne potrzeby, takie jak niestandardowa siatka lub inna funkcjonalność, pożądana dyrektywa naprawdę jeszcze nie istnieje. Dyrektywa Angular JS Application zaczyna się od „ng-” jak ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src itp.

Przykład:

Pętla z powtórzeniem ng:

    ((x))

  • Zakres

Służy do komunikacji między kontrolerem a widokiem. Wiąże widok z modelem widoku i funkcjami zdefiniowanymi w sterowniku Aplikacja kątowa JS obsługuje zakresy zagnieżdżone lub hierarchiczne. Jest źródłem danych dla aplikacji Angular JS i może w razie potrzeby dodawać lub usuwać właściwości. Cała manipulacja danymi i przypisywanie danych odbywa się poprzez obiekt zasięgu, kiedy należy wykonać operację CRUD.

  • Kontrolery

Służą one do zdefiniowania zakresu widoków, a zakres można traktować jako zmienne i funkcje, które widok mogą wykorzystywać pewne powiązania.

Przykład:




First Name:

Last Name:


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

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

  • Wiązanie danych

Synchronizuje dane między modelem a widokiem. Oznacza to, że zmiana modelu zaktualizuje widok. Dyrektywa modelu ng służy do dwukierunkowego wiązania danych.

Przykład:
Gdy użytkownik wpisuje w polu tekstowym, zmieniona wartość jest wyświetlana wielkimi i małymi literami na etykiecie, która jest dwukierunkowym wiązaniem danych.

  • Usługi

Jest używany, gdy stan jest współdzielony przez aplikację i wymaga rozwiązania do przechowywania danych. Może być singletonem i może być używany przez inne komponenty, takie jak dyrektywy, kontrolery i inne usługi. Stosowane usługi to $ http, $ lokalizacja, $ log, $ route, $ filter, $ document, $ timeout, $ wyjatkownik.

  • Wytyczanie

Pomaga w podzieleniu aplikacji na wiele widoków i powiązaniu wielu widoków z kontrolerami. Dzieli SPA na wiele widoków, aby logicznie podzielić aplikację i ułatwić jej zarządzanie.

Przykład: domyślna trasa

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

  • Filtry

Służą one do rozszerzenia zachowania wiążącego wyrażenia i dyrektywy. Pozwala sformatować dane i sformatować wartości lub zastosować określone warunki. Filtry są wywoływane w HTML z potokiem wewnątrz wyrażeń.

Przykład:

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

Filtrowanie danych wejściowych:

    (((x.name | wielkie litery) + ”, „ + x.age + ”, „ + x.city))

  • Wyrażenia

Wyrażenia (()) to deklaratywny sposób określania lokalizacji powiązania danych w HTML i używania wyrażenia do powiązania danych. Można go dodawać w szablonach HTML i nie obsługuje instrukcji sterowania przepływem, ale obsługuje filtry do formatowania danych przed ich wyświetleniem.

Przykład:

Wpisz coś w polu wprowadzania:

Nazwa:

Napisałeś: ((firstName))

  • Moduły

    Moduł jest kontenerem aplikacji, a kontrolery aplikacji należą do modułu. Jest to zbiór funkcji i dzieli aplikację na mały komponent funkcjonalny wielokrotnego użytku. Moduł można zidentyfikować za pomocą unikalnej nazwy i może być zależny od innych modułów.

Przykład:



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


  • Testowanie

Do testowania kodu aplikacji Angular JS powszechnie stosuje się ramy testowe, takie jak Jasmine i karma. Te frameworki testowe obsługują głównie kpiny i wysoce konfigurowalne za pomocą pliku JSON za pomocą różnych wtyczek Angular JS Application.

Wniosek - aplikacja Angular JS

Angular JS zapewnia platformę, która ma unikalne dyrektywy i potężne funkcje. Dyrektywy pomagają nam budować nową składnię HTML, która jest głównie specyficzna dla aplikacji. Jest stosowany jako komponenty wielokrotnego użytku. Komponent pozwala ukryć złożoną strukturę i inne zachowania. Nacisk zostanie położony tylko na to, co robi aplikacja i jak wygląda ona osobno. Aplikacja Angular JS zyskuje obecnie na popularności, ponieważ jest łatwa do nauczenia się i rozwijania. Na rynku istnieje wiele możliwości dla frontendowego programisty. Jeśli jesteś dobry w JavaScript, to Angular JS nie będzie trudny do nauki, a aktualizacja umiejętności dzięki tej technologii byłaby świetnym pomysłem.

Polecane artykuły

Ten artykuł jest przewodnikiem po Angular JS Application. Omówiliśmy tutaj koncepcję aplikacji Angular JS na pewnym przykładzie, aby lepiej zrozumieć. Możesz także spojrzeć na następujący artykuł, aby dowiedzieć się więcej.

  1. Różnice w Angular 5 i Angular 4
  2. Co to jest uczenie maszynowe?
  3. Różnice między JSON a BSON
  4. Co to jest Laravel Framework?
  5. Co to są ramy testowe dla Java?

Kategoria:

Rozwój oprogramowania