Ne angularjs olduğunu?
Angularjs güçlü ve yapısal bir JavaScript framework hangi tek web uygulamaları uygulamak daha kolaydır ve büyük organize veriyor, yönetilebilir bir şey istemci ağır uygulamalar. Bu açık kaynaklı bir web uygulaması çerçevesinde, özgür ve dünya çapında binlerce geliştiricinin kullandığı.
Angularjs dayanır MVC (Model View Kontrolü) zengin internet web uygulamaları oluşturmak ve MVC mimarisini kullanarak uygulamaların hem geliştirme ve test basitleştirmek için tasarlanmıştır ve modeller halinde zengin internet uygulamaları ayıran desen, görüş ve denetleyiciler. Angularjs tek sayfa uygulamaları yaratır, hangi tarayıcı uygulama boyutuna bakılmaksızın tek bir sayfayı yüklemek için gidiyor demektir.
angularjs tarafından geliştirilen Miskohevery ve Adam Abron,tarafından yapılmaktadır Google; Onları ve MİT tarafından dahili olarak kullanılır. Apache Lisansı altında lisanslı sürümü 2.0. Başlangıçta yılında piyasaya sürüldü 2009 ve mevcut kararlı sürümüdür 1.3.5 (eşleştirir 1, 2014).
angularjs: In this section, Bize angularjs temellerini özetleyelim.
- Bir kütüphane JavaScript ile yazılmış
- Bir platform ya da dil değil
- plug-in ya da uzantısı değildir
- Bu HTML uzanır, CSS ve JavaScript
- jQuery gibi bir DOM manipülasyon kütüphane değil mi
- jQuery veya devralma gerektirmez
- veri bağlama tek yönlü ve Demirbaş kodu gerektirmez
Neden angularjs?
- Bu istemci tarafında web uygulaması oluşturmak için çok sayıda yollar sağlar MVC tasarım deseni dayanmaktadır.
- Daha az kod ve daha fazla esneklik ile istemci tarafı uygulamaları oluşturmak için yardımcı olur.
- Bu direktiflerin işlevini kullanarak HTML uzanır, özellikler, HTML ifadeleri ve şablonları.
- Angularjs istemci tarafında kolayca uygulamaların geliştirilmesini ve test basitleştiren bir MVC mimarisi.
- Bu web tabanlı uygulamalar için tek sayfa uygulamaları ve ön uçları geliştirmek için iyidir.
- Bu esnek bir çerçeve ve çok yönlü özelliklere sahiptir. Bu yüzden büyük uygulama projeleri ve küçük küçük uygulamalar için kullanılır.
Features:
angularjs (JavaScript tabanlı çerçeve) gibi çeşitli özellikleri kullanarak daha hızlı bir şekilde uygulamaları oluşturur:
- Bu dinamik web uygulamaları yaratmak için güçlü şeyler sağlayan bir istemci tarafı teknolojisi.
- Bir MVC tabanlı bir çerçevedir, Kullanıcıların uygun mimarisi ve sürdürülebilir web uygulamaları oluşturmak için olanak sağlar.
- Bu dünyada geliştiriciler binlerce tarafından kullanılan açık kaynaklı bir web uygulaması çerçevesinde.
- Bu yeniden kullanılabilir bileşenler ve kodu yeniden kullanımına izin verir.
- Bu kullanıcı arayüzü oluşturulmasını kolaylaştırır (UI) veri bağlama sürecinde kolay.
- Bildirime HTML yaklaşımı.
- Bu küçük parçalar haline başvurunuzu bölmek için yardımcı olur.
Mimari Şeması ve Bileşenleri: Bize angularjs çerçevesinde ve bileşenlerinin mimarisi şemasında bir göz atalım.
Figure: angularjs Mimarlık
angularjs içerir modüller Bu tür denetleyicileri gibi uygulamalar farklı türleri için bir kap olarak hareket hangi, views, direktifler, fabrika vb. Modül bir uygulama önyükleyicisini nasıl olması gerektiği belirtilir. modüllerini kullanarak, anlamak süreçler daha kolay olacaktır; Kodu yeniden kullanabilirsiniz, testleri uçtan uca vb yapılandırmayı geçersiz kılmak için modüllerini kullanır. Bu oluşturmak için bir yerdir, açısal modülleri kayıt ve almak.
Yapılandırma bileşeni yalnızca modüllerden sağlayıcıları kabul, Her hizmet anlamına gelir, Fabrika vb sağlayıcının örnekleridir. Bu yolları bütün bu örnekleri sağlar.
The rotalar URL kontrolörleri ve görüşlere bağlamak için kullanılır.
The Görünümler Kullanıcı olayların karmaşık işleme eklemek için kullanılır. kullandığı ng-viewAna düzeni mevcut güzergahın şablonla yol hizmetini tamamlar yönerge (index.html) dosya.
The kontrolör Düzenli JavaScript nesneleri angularjs uygulamaların verilerini kontrol. tanımlarınızı angularjs ng-denetleyicikontrolör işlevini kullanarak yeni denetleyici nesneleri oluşturur yönerge. Ve yeni bir alt denetleyici işlevi olarak kullanılabilir $kapsamşekilde gösterildiği gibi.
The views elemanının veya niteliği gönderir direktifler hangi DOM elemanı ve onun çocuklarına özgü davranışları takmak için angularjs HTML derleyici söyler.
The fabrika Angularjs hizmetini tanımlamak için kullanılan ve bir hizmet örneği gerektiğinde denir.
Angularjs Başlarken:
Angularjs ile başlamak kolay. Bu özel etiketler yapar bağlama iki yönlü veri gibi özellikleri sağlar, hangi HTML uzanan işlevselliğini kolaylaştırmak yerleşik direktifleri saklanması öznitelikleri.
- Bu JavaScript dosyası dağıtılır ve aşağıda gösterildiği gibi angularjs kütüphane dahil ederek bir web sayfasında kullanılabilir:
[kod]
<script src =”http:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>
</senaryo>
[/kod]
Ayrıca kendi resmi web sitesinde angularjs son sürümünü kontrol edebilirsiniz.
- Aşağıda gösterildiği gibi angularjs uygulama oluşturabilirsiniz:
[kod]
<htmlng-app></html>
Or
<html ng-app = "Uygulamam"></html>
Or
<divng-app></div>
Or
<div ng-app = "Uygulamam"></div>
[/kod]
The ng-app nitelik angularjs uygulamasında kök unsurudur.
- Aşağıda gösterildiği gibi, Kontrol tanımlanabilir:
[kod]
<div ng-app = "" ng kontrolörü = "MyController">
<input type = "text" ng modeli = "mesaj">
</div>
[/kod]
The ng-denetleyiciyönerge uygulama denetleyicisi tanımlar. The ng modelyönerge gibi girdi alanları gibi HTML denetimleri değerini bağlar, uygulama verilerine vb seçin.
- kullanarak kontrolörü uygulamak $kapsam Aşağıda yazılı olarak itiraz:
[kod]
functionMyController($kapsam){
$scope.message = "Adınızı girin";
}
[/kod]
The $kapsam nesne oluşturur denetleyicisi çağıran uygulama modeline atıfta mesaj kapsamında mülkiyet.
çekirdek Kavramlar:Bu bölümde temel bileşenleri hakkında detaylı bir tartışma ve arkalarında kavramları olacak.
- Modüller
- Direktifler
- kapsam
- Kontrolörler
- İfadeler
- Şablonlar
- yönlendirme
- Filtreler
Modüller:
Modüller küçük yeniden kullanılabilir bileşenler içine uygulama bölünmesi için mükemmel bir mekanizma sağlar ve bir uygulama önyükleyicisini şeklini belirtmek. Modüller uygulamadaki bileşenlerini tanımlar ve uygulama daha okunaklı hale getirir nasıl belirtmek. Her bir modül benzersiz bir ad ile tanımlanır.
Direktifler:
Direktifler özel HTML etiketleri oluşturmak için kullanılır ve eleman isimleri yerleştirilebilir angularjs çekirdek yapı taşlarıdır, nitelikleri ve yorumlar. Direktifler katmanlı işlevselliği ile karmaşık widget kurmak HTML direktifleri olarak kullanılabilir.
kapsam:
Kapsam kontrolöre bir görünüm bağlayan bir nesnedir. MVC yapısında, Bu uygulama modeline değinmektedir. Kapsamları ifadeleri izlemek ve onlar hiyerarşik yapıda düzenlenmiş gibi olayları yaymak.
Kontrolörler:
Kontrolörler uygulamanızın gerçek davranışını tanımlayan JavaScript nesneleri. Bu kullanarak modeli özelliklerini ve fonksiyonlarını ayarlamak için sorumludur $kapsam nesne. The controller does not store state and does not interact with remote services.
İfadeler:
Expressions are written inside curly braces “{{ }}” denote bindings which referrers to our application model. Expressions do not support control flow statements. AngularJS will output the data where they are used.
Şablonlar:
Template is just old-plain-HTML that does not include any angular specific file templates. It comes with a set of live templates to create controllers etc by using template engine. Templates are used to show information from the model and controller.
yönlendirme:
It is used for linking URL’s to controller and views. Routing is taken care by service providers called $routeProvider to handle routing which is the provider of the $route service. In other words, bu alt şablonları yükleme sayfasının URL bağlı bulunuyor.
Filtreler:
Filtreler modellerinden verileri dönüştürmek veya değiştirmek için ifadeleri kullanılır. Biz boru karakteri kullanarak ifadeler veya direktifleri ekleyebilir. Angularjs gibi yaygın olarak kullanılan filtrelerin bazı yer alır:
- para birimi: para birimi biçiminde numarayı çevirir.
- büyük: dizeleri büyük harfe dönüştürür.
- küçük: dizeleri küçük harfe dönüştürür.
- filtre: diziden öğe alt kümesini seçer.
- tarafından sipariş: Bu tür dizeleri ve sayısal numaraları alfabetik olarak ifade tarafından sipariş dizisi.
Örnek:
en angularjs kitaplığı kullanarak basit bir örnek yaratalım ve bir HTML dosyası oluşturun FirstExample.html Aşağıda gösterildiği gibi:
Listing1: Basit angularjs uygulama
[kod]
<!DOCTYPE html>
<html>
<baş>
<script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></senaryo>
</baş>
<vücut>
<div ng-app =”” ng-kontrolör =”MyController”>
İsim giriniz: <input type =”text” ng model =”kullanıcı adı”><br>
<br>
Ad Soyad: {{kullanıcı adı}}
</div>
<senaryo>
functionMyController($kapsam) {
$scope.userName = “David”;
}
</senaryo>
</vücut>
</html>
[/kod]
Tartışıldığı gibi, anlatıldığı gibi, içimizdeki tanımlanan HTML sayfasındaki JavaScript dosyası angularjs dahil ettik <baş> tag. Bir sonraki kısım kullanılarak tanımlanır angularjs uygulamayı içeren ng-app özellik içinde çalışır <div> tag.
The ng-denetleyici yönerge uygulama denetleyicisi tanımlar. Angularjs çağıracağı "MyController” ile $kapsam özelliği oluşturur nesne "olarak adlandırılankullanıcı adı” kapsamında.
kullanarak model adını tanımlayın ng modeltanımlanan Yönergesi <giriş> tag. Bu denetleyici özelliği "giriş alanını bağlarkullanıcı adı”.
Aç FirstExample.html tarayıcıda ve aşağıdaki ekran resminde gösterildiği gibi sonucunu görmek:
Figure: angularjs Örnek
Sonuç: Biz zaten AnguarJS tüm yönleriyle ele aldık. biz sonuçlandırmak önce, Bize puan özetleyelim. angularjs (Ayrıca, açısal şekilde bilinmektedir)açık kaynaklı bir web uygulaması çerçevesinde. Bu zengin internet uygulamaları için gerekli sık kullanılan bileşenleri ile birlikte istemci tarafında MVC mimarisi sağlar. Angularjs kullanıcı arabirimleri oluşturmak için deklaratif programlama modeli izler. Bu çerçevede temel amacı geliştirme ve daha kolay test yapmaktır.
Eğer angularjs çerçevesinin net bir anlayış var Hope. okuma keyfini çıkarın www.techalpine.com
