Nə AngularJS edir?
AngularJS güclü və struktur deyil JavaScript çərçivəsində hansı bir web applications həyata keçirilməsi üçün asandır və böyük təşkil imkan verir, idarə bir şey müştəri ağır applications. Bu açıq mənbə web proqram çərçivəsində edir, pulsuz və dünyada developers minlərlə tərəfindən istifadə.
AngularJS əsaslanır MVC (Model View Control) zəngin internet web applications yaratmaq və MVC memarlıq istifadə edərək, proqram, həm də inkişaf və test asanlaşdırmaq üçün nəzərdə tutulan və modelləri sizin zəngin internet ərizə ayırır ki, model, fikir və kontrollerlər. AngularJS bir səhifə applications yaradır, hansı browser tətbiqi ölçüsü asılı olmayaraq bir səhifə yüklemek üçün gedir deməkdir.
AngularJS tərəfindən hazırlanmışdır Miskohevery və Adam Abron,tərəfindən təmin Google; Onlara və MİT-in məcburi istifadə. Bu Apache License version altında lisenziya olunur 2.0. Bu ilkin azad edilib 2009 və cari sabit azad edir 1.3.5 (Decemeber 1, 2014).
AngularJS: In this section, Bizə AngularJS əsasları ümumiləşdirmək edək.
- kitabxana JavaScript yazılmışdır
- bir platforma və ya dil deyil
- bir plug-in və ya uzadılması deyil
- Bu HTML uzanır, CSS və JavaScript
- jQuery kimi bir DOM manipulyasiya kitabxana deyil
- jQuery və ya miras tələb etmir
- data məcburi bir yol və boilerplate kodu tələb etmir
Niyə AngularJS?
- Bu müştəri tərəfində web proqram qurmaq üçün bir çox yolları təmin edir MVC dizayn model əsaslanır.
- Az kodu və daha çox rahatlıq klient applications yaratmaq üçün kömək edir.
- Bu direktivləri funksionalığına istifadə edərək, HTML uzanır, atributları, HTML ifadələr və şablonları.
- AngularJS müştəri tərəfdən asanlıqla applications inkişafı və test asanlaşdırır bir MVC memarlıq edir.
- Bu web-based uygulamalar üçün bir səhifə ərizə və ön bitir inkişaf etdirilməsi üçün yaxşı.
- Bu çevik çərçivə və hərtərəfli xüsusiyyətləri vardır. Belə ki, böyük app layihələr və kiçik kiçik applications üçün istifadə olunur.
Features:
AngularJS (JavaScript based çərçivəsində) kimi bir neçə xüsusiyyətləri istifadə edərək daha sürətli bir şəkildə applications yaradır:
- Bu dinamik web applications yaratmaq üçün güclü şeyi təmin edən klient texnologiya.
- Bu MVC əsasında çərçivə, users müvafiq memarlıq və maintainable web applications yaratmaq üçün imkan verir.
- Bu dünyada developers minlərlə tərəfindən istifadə açıq mənbə web proqram çərçivəsində edir.
- Bu reusable komponentləri və kodu təkrar istifadə etməyə imkan verir.
- Bu istifadəçi interfeysi yaradılması edir (UI) data məcburi prosesi asan.
- Nəqli HTML yanaşma.
- Bu kiçik hissəyə ərizə bölmək kömək edir.
Memarlıq Diaqram və Komponentlər: Bizə AngularJS çərçivəsində və onun komponentlərinin memarlıq diagram bir nəzər salaq.
Figure: AngularJS Architecture
AngularJS var modulları Belə nəzarətçiləri kimi applications müxtəlif növləri üçün bir konteyner kimi çıxış edən, views, direktiv, zavod və s. Module bir proqram bootstrapped necə müəyyən. modulları istifadə, anlamaq proseslər asan olacaq; Kodu yenidən istifadə edə bilərsiniz, testlər son son və s konfiqurasiya yalnış modulları istifadə. Bu yaratmaq üçün yerdir, angular modulları qeydiyyatdan və almaq.
config komponent yalnız modulları provayderləri qəbul, hər xidmət deməkdir, zavod və s provayderi hallarda var. Bu marşrutlar bütün bu hallarda təmin edir.
The Marşrutlar URL nəzarətçiləri və fikir keçid üçün istifadə olunur.
The Baxılıb istifadəçi hadisələr inkişaf etmiş user əlavə etmək üçün istifadə olunur. It uses ng-viewəsas layout cari marşrut şablon ilə marşrut xidmət tamamlayır direktiv (index.html) fayl.
The nəzarətçi müntəzəm JavaScript obyektlərin AngularJS proqram data nəzarət. müəyyən edir AngularJS ng-nəzarətçinəzarətçi funksiyası istifadə edərək, yeni nəzarətçi obyektlərin yaradır direktiv. Və yeni uşaq nəzarətçi funksiyası kimi mövcuddur $vüsətdiaqramda göstərildiyi kimi.
The views element və ya atributu göndərir direktiv olan DOM element və uşaqlar üçün xüsusi davranış əlavə AngularJS HTML compiler deyir.
The zavod AngularJS xidmət müəyyən etmək üçün istifadə olunur və bu xidmət instantiated lazımdır zaman adlanır.
AngularJS Başlarken:
AngularJS ilə başlamaq üçün asandır. Bu xüsusi tags edir məcburi iki yol data kimi xüsusiyyətləri təmin edir, olan HTML uzanan funksionallığı asan daxili direktivləri içine atributları.
- Bu JavaScript fayl yayılır və aşağıda göstərildiyi kimi AngularJS kitabxana, o cümlədən bir web istifadə edilə bilər:
[kod]
<script src =”http:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>
</yazı>
[/kod]
Siz həmçinin öz rəsmi saytında AngularJS son versiyasını kontrol edə bilərsiniz.
- aşağıda göstərilən kimi AngularJS proqram yaratmaq bilər:
[kod]
<htmlng-app></html>
və ya
<html ng-app = "MyApp"></html>
və ya
<divng-app></div>
və ya
<div ng-app = "MyApp"></div>
[/kod]
The ng-app atributu AngularJS app kök elementidir.
- aşağıda göstərildiyi kimi Controller müəyyən edilə bilər:
[kod]
<div ng-app = "" ng-nəzarətçi = "MyController">
<input type = "text" ng-model = "mesaj">
</div>
[/kod]
The ng-nəzarətçidirektiv proqram nəzarətçi müəyyən. The ng-modeldirektiv belə input sahələri kimi HTML nəzarət dəyəri bağlar, Ərizə data s seçin.
- istifadə edərək nəzarətçi həyata keçirilməsi $vüsət aşağıda yazılı olaraq etiraz:
[kod]
functionMyController($vüsət){
$scope.message = "Adınızı daxil edin";
}
[/kod]
The $vüsət obyekt yaradır nəzarətçi ibadət proqram model aiddir message daxilində əmlak.
Core Concepts:Bu bölmədə biz əsas komponentləri haqqında ətraflı müzakirə və onların arxasında anlayışlar olacaq.
- Modules
- direktiv
- vüsət
- Nəzarətçiləri
- İfadələri
- Templates
- Routing
- Filters
Modules:
Modules kiçik reusable komponentləri daxil proqram ayırıcı üçün əla mexanizmi təmin edən bir proqram bootstrapped necə müəyyən. Modules tətbiq komponentləri müəyyən və proqram daha oxunaqlı edir necə müəyyən. Hər bir modul bir unikal adı müəyyən edilir.
direktiv:
Direktivləri xüsusi HTML tags yaratmaq üçün istifadə olunur və element adları yerləşdirilə bilər AngularJS əsas bloklar var, atributları və şərhlər. Direktivləri laylı funksionallığı ilə kompleks widgets yaratmaq HTML direktivləri kimi istifadə edilə bilər.
vüsət:
Scope nəzarətçi bir görünüşü bağlar bir obyekt deyil. MVC strukturunda, Bu proqram model aiddir. Scopes ifadələr izləmək və onlar iyerarxik strukturu təşkil kimi hadisələr təbliğ edə bilər.
Nəzarətçiləri:
Nəzarətçiləri app faktiki davranış müəyyən JavaScript obyektləri. Bu istifadə edərək model xassələri və funksiyaları yaradılması üçün məsuliyyət daşıyır $vüsət obyekt. nəzarətçi dövlət saxlamaq deyil və uzaq xidmətləri ilə qarşılıqlı deyil.
İfadələri:
Expressions "qıvrım aşırma daxilində yazılır{{ }}"Bizim proqram model cilddən olan yönlendirmeleri işarə. Expressions nəzarət axını bəyanatlar bilmir. AngularJS çıxış edəcək istifadə olunur data.
Templates:
Şablon hər hansı bir bucaq xüsusi fayl şablonları daxil deyil yalnız köhnə düz-HTML. Bu şablon mühərriki istifadə edərək nəzarətçiləri və s yaratmaq canlı şablonları bir sıra ilə gəlir. Şablonlar model və nəzarətçi məlumat göstərmək üçün istifadə olunur.
Routing:
Bu URL nəzarətçi və fikir birləşdirən üçün istifadə olunur. Routing adlı xidmət provayderləri tərəfindən qayğı alınır $marşrut operator of təchizatçısıdır marşrutlaşdırma idarə etmək $marşrut xidmət. Başqa sözlə, Bu sub şablon loading səhifənin URL asılı olaraq var.
Filters:
Filters modelləri data çevirmək və ya dəyişdirmək üçün ifadələri ilə istifadə olunur. Biz boru xarakter istifadə ifadələr və ya direktivləri əlavə edə bilərsiniz. AngularJS kimi çox istifadə filtreler bəzi var:
- Valyuta: valyuta formatında sayı çevirir.
- böyük: strings böyük üçün çevirir.
- kiçik: strings kiçik çevirir.
- filtr: array maddələr alt seçir.
- orderby: belə strings və sayca nömrələri üçün əlifba sırası ilə sifariş kimi ifadə sifariş array.
misal:
nin AngularJS kitabxana istifadə sadə bir nümunə yaratmaq edək və bir HTML faylı yaratmaq FirstExample.html aşağıda göstərildiyi kimi:
Listing1: Simple AngularJS proqram
[kod]
<!DOCTYPE html>
<html>
<baş>
<script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></yazı>
</baş>
<bədən>
<div ng-app =”” ng-nəzarətçi =”MyController”>
Ad daxil edin: <input type =”mətn” ng-model =”istifadəçi adı”><br>
<br>
Tam adı: {{istifadəçi adı}}
</div>
<yazı>
functionMyController($vüsət) {
$scope.userName = “David”;
}
</yazı>
</bədən>
</html>
[/kod]
müzakirə edildiyi kimi, biz ərzində müəyyən edilir HTML səhifə JavaScript fayl AngularJS daxil <baş> tag. növbəti hissəsi istifadə müəyyən edilir AngularJS app edir ng-app atributu daxili çalışır <div> tag.
The ng-nəzarətçi direktiv proqram nəzarətçi müəyyən. AngularJS ibadət edəcək "MyController” ilə $vüsət əmlak yaradır obyekt "adlıistifadəçi adı” çərçivəsində.
istifadə model adı müəyyən ng-modelmüəyyən edilmiş direktiv <input> tag. Bu nəzarətçi mülkiyyət "üçün giriş sahəsində bağlaristifadəçi adı”.
açın FirstExample.html brauzerinizin və aşağıdakı ekran shot göstərildiyi kimi nəticə görmək:
Figure: AngularJS Misal
Nəticə: Biz artıq AnguarJS bütün aspektləri müzakirə etdik. biz bağlamaq əvvəl, Bizə xal ümumiləşdirmək edək. AngularJS (də Bucaq kimi tanınan)açıq mənbə web proqram çərçivəsində edir. Bu zəngin internet ərizə üçün tələb olunan çox istifadə komponentləri ilə birlikdə klient MVC memarlıq təmin edir. AngularJS istifadəçi interfeys qurulması üçün deklarativ proqramlaşdırma model aşağıdakı. Bu çərçivədə əsas məqsədi inkişaf və daha asan test etmək.
Siz AngularJS çərçivəsində bir aydın var ümid. oxu Enjoy www.techalpine.com
