Angular JS Nedir?

Merhaba arkadaşlar
AngularJS ile ilgili yazı dizisine başlamış bulunmaktayız 🙂 Haydi hayırlı olsun 🙂
AngularJS google tarafından desteklenen bir Javascript MVC(Modal View Controller) kütüphanesidir.
Modal : Verinin tutulduğu nesnelerdir ve ilişkili olduğu View nesnesini etkiler.
View : Template in yani görünümün tutulduğu nesnelerdir.
Controller : Modal ve View nesnelerini bağlayan nesnedir. İşlemler kontroller Controller üzerinde yapılır

AngularJS kendi kütüphanesinden başka kütüphanelere bağımlı değildir. Bunun için sadece AngularJS kütüphanelerini ekleyerek
tek sayfa uygulamaları geliştirmeye imkan sağlar. AngularJS’in en önemli özelliği çift yönlü olmalarıdır.
Yani modal’da olan değişiklik view’a , view’da olan değişiklik modal’a yansır. Directive’ler ile
yeni html tag’larının geliştirilmesine de olanak sağlar. Kodlar kısalır karmaşa ortadan kalkar.
AngularJS kütüphanesi yaklaşık 100kb boyuttadır. https://angularjs.org
AngularJS çeşitli bileşenleri içeren modüller şeklinde oluşturulmuştur. Bu modüller; Directive’ler Service’ler
Provider’ lar Type’lardır.

AngularJS Kütüphaneleri
ng  : AngularJS in temel modüllerini içeren kütüphanedir. Varsayılan olarak yüklenir.
ngRoute : AngularJS uygulamaları içersinde URL yönetimi yapmak için kullanılır. (angular-route.js)
ngAnimate : AngularJS uygulamalarında animasyon özelliklerini sayfalarımıza eklemek için kullanılır. (angular-animate.js)
ng-Cookie : Cookie yönetimi için kullanılır. (angular-cookies.js)
ng-Touch : Mobil tarayıcılar için geliştirilen sayfalarda kullanılabilir. (angular-touch.js)
ng-Mock : Testlerde mock işlemi yapmak için kullanılır.

Şimdi gelin size basit bir örnek yapalım 🙂

HTML Sayfamız

<!DOCTYPE html>
<html ng-app>
<head>
<title>MEZO BLOG</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
 </head>
 <body>
<div ng-app>
    <div ng-controller="MezoController">
        <input type="text" ng-model=mymodel />
        <br/>
        {{"Hello"}}
        <br/>{{2 + 2}}
        <br/>{{mymodel}}
        <div/>
    </div>
</body>
</html>
									

JavaScript Dosyamız

function MezoController($scope) {
    $scope.mymodel = "Mezo Blog";
}
									

Örneğe buradan ulaşabilirsiniz 🙂

Bilgiyle Kalın
M.Zeki Osmancık

Leave a Reply

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box