Open
Angular Örnekler

Angular javascript tabanlı bir platformdur.
Google tarafından geliştirmiş MVC yapısını kullanmış javascript framwork’ü dür.
https://angularjs.org/

2010 yılında yayınlamıştır
2016 tarihinde Angular 2 tam anlamıyla AngularJS in baştan yazılmış halidir.
Neden Angular Tercih Etmeliyiz Angular 2+ ‘nın en önemli özelliklerinden birisi modüler yapısıdır.
Herşeyi tek bir uygulama içerisinde kodlamaktansa, farklı fonksiyonaliteleri gerçekleştiren modülleri kodlamak daha kolay olacaktır.
Bu yapısı ise okunabilirliği arttırdığı gibi browser a gönderildikten sonra her zaman en basit ve yalın haliyle kalacaktır.
Bu durum da Angular 2 platformunun hızlı bir şekilde çalıştırılmasını mümkün kılıyor.
Angular2+’nın modüler yapısı geliştiricilerin rahatlıkla unit test yapabilmelerine olanak sağlıyor.
Ayrıca Angular Framework’de Html template‘leri angular formunda oluşturursunuz.
Bunları kontrol etmek için component sınıfları yazarsınız, uygulama mantığını ise servislerde işletirsiniz
ve nihayetinde yazdığınız Servisleri ve Component’leri modüller içerisinde servis edersiniz.
Buradan da anlaşılacağı gibi sade bir yapısı vardır ve unit test için çok uygundur.
Bir diğer önemli özelliği ise JavaScript’in static programlama dili olarak üzerine dizayn edilmiş
bir versiyonu olan TypeScript dilini kullanıyor olmasıdır.
Angular’ın bu özelliği ise developer’a döküman okumak yerine uygulamayı geliştirmeye başlaması için daha çok zaman tanıyor.
TypeScript ise JavaScript in üzerine inşa edilmiş bir dildir ve ayrıca TypeScript dili yine TypeScript tarafından JavaScript’e derlenir.
Bu özelliği sayesinde tüm mevcut JavaScript uygulamalarını yorulmadan Angular’a göç ettirebilmemize olanak sağlıyor.
Angular’ın içerisinde barındırdığı TypeScript dili sınıf-tabanlı Nesne Yönelimli Programlama mantığına sahiptir.
  1. ng-app: çalışak block.
  2. ng-model: Modelimiz.
  3. ng-bind: Modele bağlanan alan.
  4. ng-init: Değişkenlerin tanımlandığı yer.
  5. ng-repeat:Foreach() Dataları tek tek dolaşır
  6. ng-controller:namespacetir.farklı sınıfları tanımlayabiliriz.
  7. { { } }: AngularJS ifadelerin tanımlanma şeklidir.

<div   ng-init="renkler=['Mavi','Sari','Yesil']">
<span ng-bind="renkler[0]"></span>   { { renkler[2] }}
</div>

sonuc: div de Mavi Yesil  yazar
<div ng-app="">   <%--   Bu div blockta çalış --%>

<input type="text" ng-model="giriniz">   <%--   Modelimin adı --%>
<p ng-bind="giriniz"></p>
        
sonuc: inputa ne girerseniz div de o gösterir

<div  ng-init=" Nick='Selma'; Surname='Okuz'">    <%--  degiskenlerim --%>
    { { Nick + Surname }}
<div ng-bind="Nick+Surname"></div>   
</div>

sonuc: div de SelmaOkuz yazılır
    

<div ng-init=" degiskenler={Adi:'Kasap',Soyadi:'Necmi' };">  <%--  class da oluşturabiliriz --%>
<span ng-bind="degiskenler.Adi + degiskenler.Soyadi"></span>
</div>

sonuc : div de KasapNecmi yazar.

<div   ng-init="depo={miktar:1,fiyat:8};">
<p>Adet: <input type="number" ng-model="depo.miktar" /></p>
<p>Fiyat: <input type="number" ng-model="depo.fiyat" /></p>
<p>Ödenecek:   { { depo.miktar * depo.fiyat }}</p>
</div>

sonuc: div de iki input birbirine çarpılır ve sayfa yenilenmeden gösterir
    

    <div  ng-init="garaj=[
    {brand:'Kawasaki',country:'Japan'},{brand:'Honda',country:'Japan'},
    {brand:'Suzuki',country:'Japan'},{brand:'Ducati',country:'Italy'},
    {brand:'Harley Davidson',country:'USA'},{brand:'Bmw',country:'Germany'}]">
    <ul>
        <li ng-repeat="x in garaj">
                { { x.brand+ ' ' + x.country }}
        </li>
    </ul>
</div>


<div ng-controller="countCtrl">
    <input type="button" ng-click="click()" value="Tıkla" /><br />
        { { "Toplam Tıklanma:" + count }}
</div>

sonuc:Toplam tıklanma sayısını gösterir.
    

            
<div ng-controller="showCtrl">
    <input type="checkbox" ng-model="isShow" />Göster -  { { isShow }}<br />
    <input type="checkbox" ng-model="isEnable" />Aktif -   { { isEnable }}<br />        
    <table ng-show="isShow">
        <tr>
            <td>İsim:</td>
            <td><input type="text" ng-model="person.Name" ng-disabled="!(isEnable)"></td>
        </tr>
        <tr>
            <td>
                Soyad:
            </td>
            <td><input type="text" ng-model="person.Surname" ng-disabled="!(isEnable)"></td>
        </tr>
        <tr>
            <td>
                Full Name:
            </td>
            <td>   { { person.Name + " " + person.Surname }} </td>
        </tr>
    </table>
</div>

    
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Generate Table" ng-click="GenerateTable()" />
    <hr />
    <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Pictures</th>
        </tr>
        <tbody ng-repeat="m in Customers">
            <tr>
                <td> { {m.CustomerId}}</td>
                <td> { {m.Name}}</td>
                <td> { {m.ImageUrl}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.IsVisible = false;
        $scope.GenerateTable = function () {
            $scope.Customers = [
            { CustomerId: 1, Name: "Alex", ImageUrl: "guy1.jpg" },
            { CustomerId: 2, Name: "Mike ", ImageUrl: "guy2.jpg" },
            { CustomerId: 3, Name: "Molly ", ImageUrl: "guy3.jpg" },
            { CustomerId: 4, Name: "Albert", ImageUrl: "guy4.jpg" },
            { CustomerId: 5, Name: "Suzan", ImageUrl: "guy5.jpg" }
            ];
            $scope.IsVisible = true;
        };
    });
</script>
        
  .
    <style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    table
    {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }
    table th
    {
        background-color: #F7F7F7;
        color: #333;
        font-weight: bold;
    }
    table th, table td
    {
        padding: 5px;
        border: 1px solid #ccc;
    }
</style>
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
        
02.02.2020