Recent Updates Toggle Comment Threads | Tuş takımı kısayolları

  • cmengcompany 08:35 on 22/08/2016 Kalıcı Bağlantı | Cevapla
    Tags: , , , , directive, ,   

    AngularJS Directives 


    AngularJS Html’i Directiveleri çağıran yeni attributelarla genişletme imkanı sunar.Directiveler size uygulamalarınza fonsiyonellik sağlar.Ayrıca kendi directivelerinizi de oluşturabilirsiniz.

    AngularJS Directives

    AngularJS Direktiflering- ön eki ile genişletilir.

    ng-app direktifi AngularJs uygulamasını başlatır.
    ng-init direktifi uygulama verisine ilk değeri atar.
    ng-bind değer atanmış uygulama verisini Html Kontrollerinin değerlerine atar.

    AngularJS Directive Reference

    
    
    
    <div ng-app="" ng-init="firstName='John'">
    
    
    
    Name: <input type="text" ng-model="firstName">
    
    
    
    You wrote: {{ firstName }}
    
    
    </div>
    
    
    

    ng-app direktifi ayrıca AngularJS’e div elementinin AngularJS uygulamasının sahibi olduğunu söyler.

    Data Binding

    Yukarıdaki html kodda yer alan {{ firstName }} ifadesi bir AngularJS expression idir.AngularJS’de data binding ,bir expressionu bir veri ile birleştirir.

    {{ firstName }} ifadesi ng-model=”firstName” şeklinde de yazılabilir.

    
    <div ng-app="" ng-init="quantity=1;price=5">
    
    Quantity: <input type="number" ng-model="quantity">
    Costs:    <input type="number" ng-model="price">
    
    Total in dollar: {{ quantity * price }}
    
    </div>
    
    

    Html Elementleri Tekrarlama(Repeat)

    
    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
    
    <ul>
    
    <li ng-repeat="x in names">
          {{ x }}
        </li>
    
      </ul>
    
    </div>
    
    Try it Yourself »
    
    

    ng-repeat direktifi aslında Html elementleri koleksiyondaki her bir veri için klonlar.

    ng-repeat direktifi diziler için de kullanılır.

    
    <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]">
    
    
    <ul>
    
    <li ng-repeat="x in names">
        {{ x.name + ', ' + x.country }}
      </li>
    
    </ul>
    
    
    </div>
    
    

    Yeni Direktifler Oluşturmak

    AngularJS direktiflerinin yanında kendi direktiflerimizi de yazabiliriz.Bunun için .directive fonksiyonunu kullanmamız gerekir.Bir direktifi isimlendirirken camel case (yani ilk sözcüğün küçük harfle ,sonraki sözcüklerin büyük harfle başladığı yazım biçimi) bir isim kullanmalıyız.Bu direktifi çağırırken ise karakterler küçük harf olacak şekilde ve ayrıca sözcükler arasına gelecek şekilde yazılmalıdır.

    direkfitimiz cmTestDirective ise ,çağırırken cm-test-directive şeklinde çağırmalıyız.

    <body ng-app="myApp">
    
     <cm-test-directive></cm-test-directive>
    
    <script>
    var app = angular.module("myApp", []);
     app.directive("cmTestDirective", function() {
                    return {
                        template:"
    <h1 style='color:blue'>Cmeng Test Template</h1>
    
    "
                    }
                });
    </script>
    
    </body>
    

    Direktifi aşağıdaki şekillerde çağırabiliriz:

    Element Olarak

          <cm-test-directive></cm-test-directive>
                VEYA
          <cm:test:directive></cm:test:directive>
    

    Attribute Olarak

    
    <div cm-test-directive></div>
       veya
    <div cm:test:directive></div>
    

    Class Olarak

    
    <div class="cm-test-directive"></div>
    
    

    Yorum Olarak

    <!---directive:cm-test-directive--> 
    

    Restrictions

    Direkfiflerinizin çağrılam yöntemlerini sınırlayabilirsiniz:

    ‘E’ : Element name
    ‘A’ : Attribute
    ‘C’ : Class
    ‘M’ : Comment

    var app = angular.module("myApp", []);
    app.directive("cmTestDirective", function() {
        return {
            restrict : "A",
            template : "
    <h1>Made by a directive!</h1>
    
    "
        };
    });
    

    Yukarıdaki direktif sadece attributeler için sınırlandırılmıştır.

    Varsayılan değer ‘EA’ dır.Yani hem Element ismi hem de Attribute olarak çağırılan direktifler çalışır.

     
  • cmengcompany 07:58 on 22/08/2016 Kalıcı Bağlantı | Cevapla
    Tags: , , , , , module   

    AngularJS Modules 


    AngularJS modülü bir uygulamayı tarif eder.

    Modül bir uygulamanın farklı parçalarının bir bütünüdür.

    Modül uygulama kontrolleri için genel bir kavramdır.

    Kontroller her zaman bir modüle aittir.

     

    Module Oluşturma

    Bir modül angular.module fonksiyonu ile oluşturulur.

    
    
    <div ng-app="myApp">...</div>
    
    
    <script>
    
    var app = angular.module("myApp", []);
    
    </script>
    
    

    “myApp” parametresi uygulamanın çalışacağı Html Elemente aittir.

    Controller Oluşturma

    Uygulamanıza kontroller eklerken ng-controller direktifini kullanırız.

    
    
    <div ng-app="<b>myApp</b>" ng-controller=<strong>"myCtrl"</strong>>
    {{ firstName + " " + lastName }}
    </div>
    
    
    <script>
    
    var app = angular.module(<strong>"myApp"</strong>, []);
    
    app.controller(<strong>"myCtrl"</strong>, function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    });
    
    </script>
    
    

     

    AngularJS Kütüphanesi

    AngularJS kütüphanesini head elementi içerisine veya body elementinin başlangıcına koymanız önerilir.Yazacağınız angular kodlarını kütüphaneyi çağırdıktan hemen sonra yazmanınz önerilir.Çünkü angular.module sadece kütüphane load edildikten sonra derlenebilir.

    
    <!DOCTYPE html>
    <html>
    <body>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    
    
    <div ng-app="myApp" ng-controller="myCtrl">
    {{ firstName + " " + lastName }}
    </div>
    
    
    <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    });
    </script>
    
    </body>
    </html>
    
    
     
  • cmengcompany 11:05 on 17/08/2016 Kalıcı Bağlantı | Cevapla
    Tags: AngularJS, array, expression, , , number, string   

    AngularJS İfadeler(Expressions) 


    AngularJS ifadeleri çift parantez içerisine yazılır:{{ expression }}.

    AngularJS ifadeleri ayrıca ng-bind=”expression” directive ile de yazılabilir.

    AngularJS ifadeyi çözer ve ifadenin yazıldığı yere sonucu döndürür.

    Örnek:{{ 5 + 5 }} or {{ firstName + ” ” + lastName }}

    Not:Eğer,ng-app ifadesini silerseniz AngularJs ifadelerimiz olduğu gibi ekrana bastırılacaktır.

    AngularJS Numbers

    AngularJS numaraları Javascriptdeki gibidir.Örnek kullanım aşağıdaki gibidir.

    <div ng-app="" ng-init="quantity=1;cost=5">
    
    <p>Total in dollar: {{ quantity * cost }}</p>
    
    </div>
    

    Yukarıdaki örneğin ng-bind ile bir diğer kullanımı aşağıdaki gibidir:

    <div ng-app="" ng-init="quantity=1;cost=5">
    
    <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
    
    </div>
    

    AngularJS Strings

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
    
    <p>The name is {{ firstName + " " + lastName }}</p>
    
    </div>
    

    Yukarıdaki örneği ng-bind ile de yazabiliriz.

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
    
    <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
    
    </div>
    

    AngularJS Nesneler

    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    
    <p>The name is {{ person.lastName }}</p>
    
    </div>
    

    Yukarıdaki örneği ng-bind ile kullanırsak

    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    
    <p>The name is <span ng-bind="person.lastName"></span></p>
    
    </div>
    

    AngularJS Arrays

    <div ng-app="" ng-init="points=[1,15,19,2,40]">
    
    <p>The third result is {{ points[2] }}</p>
    
    </div>
    

    Yukarıdaki örneği ng-bind ile kullanırsak;

    <div ng-app="" ng-init="points=[1,15,19,2,40]">
    
    <p>The third result is <span ng-bind="points[2]"></span></p>
    
    </div>
    
     
  • cmengcompany 07:23 on 17/08/2016 Kalıcı Bağlantı | Cevapla
    Tags: , giriş, home, intro   

    AngularJS Giriş 


    Angular Js Derslerimize hoşgeldiniz. Dersleri AngularJS Kategorisi altından takip edebilirsiniz.AngularJS’i öğrenmeden önce Html,Css ve Javascript bilgilerinizi lütfen gözden geçiriniz.

    AngularJS Tarihçesi
    AngularJS 1.0 versiyonu 2012 yılında yayınlanmıştır.Misk
    AngularJS version 1.0 was released in 2012.Google çalışanı Miško Hevery 2009 yılında AngularJS üzerine çalışmalarına başlamıştır.Bu güzel fikir Google tarafından şimdi resmen destek görmektedir.

    AngularJS bir Javascript kütüphanesidir.Bir Html sayfaya script
    etiketi ile eklenir.AngularJS Html attributeleri Directive ile genişletebilir ve verileri Html’e Expression ile bind edebilir.

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    

    AngularJS Html’i Genişletir

    AngularJS Html etiketlerini directive ile genişletir.

    ng-app directive’i AngularJS uygulamasını tanımlar.

    ng-model directive’i Html kontrollerinin değerini uygulama verisine atar.

    ng-bind directive’i ise uygulama verisini Html Görünümüne uygular.

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    
    <div ng-app="">
    
    
    Name : <input type="text" ng-model="name">
    
    
    <h1>Hello {{name}}</h1>
    
    </div>
    
    
    </body>
    </html>
    

    Örnek Açıklaması:

    AngularJS sayfa yüklendiğinde otomatik olarak başlar.

    ng-app directive’i AngularJS’e div elementinin AngularJS uygulamasının sahibi olduğunu söyler.

    ng-model directive’i input değerini name adındaki uygulama değişkenine atar.

    ng-bind directive’i p elementininin içeriğine name uygulama verisinin değerini yazar.

    AngularJS Directives

    Yukarıda anlatıldığı gibi,AngularJS directiveleri ng öneki ile yazılan Html Attributelarıdır.
    ng-init directive’i AngularJS uygulama değişkenlerini ilk atamayı yapar.

    <div ng-app="" ng-init="firstName='John'">
    
    <p>The name is <span ng-bind="firstName"></span></p>
    
    </div>
    

    Diğer bir kullanımıyla;

    <div data-ng-app="" data-ng-init="firstName='John'">
    
    <p>The name is <span data-ng-bind="firstName"></span></p>
    
    </div>
    

    ng yerine data-ng kullanırsanız Html Sayfanız geçerli(valid) olur.

    AngularJS Expressions

    AngularJS ifadeleri çift parantez içerisinde yazılmaktadır.Veri ifadenin yazıldığı yerde veriyi yazar.

    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    <div ng-app="">
     	<p>My first expression: {{ 5 + 5 }}</p>
    </div>
    
    </body>
    </html>
    

    AngularJS Applications

    ng-app directive’i uygulamayı tarif eder.ng-controller controllerı tarif eder ve AngularJS uygulamalarını kontrol eder.

    <div ng-app="myApp" ng-controller="myCtrl">
    
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
    </script>
    

    AngularJS Module

    Uygulama tanımlanır.

    var app = angular.module('myApp', []);
    

    AngularJS Controller

    Uygulamaları kontrol eden controller tanımlanır.

    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
    

    Bu konuları ilerleyen derslerde ayrıntılı işleyeceğiz.

     
  • cmengcompany 09:24 on 11/05/2016 Kalıcı Bağlantı | Cevapla
    Tags: , , ,   

    Asp.Net Mvc’de Excele Aktarma 


    Controllerımın içerisine ExportToExcel adında bir method oluşturuyorum.Bu method Employee Listesini excele aktaracak.

      public void ExportToExcel()
            {
                DataTable dtEmployees = new DataTable();
                dtEmployees.Columns.AddRange(new DataColumn[4] {
                            new DataColumn("EmployeeID"),
                            new DataColumn("EmployeeName"),
                            new DataColumn("Cinsiyet"),
                            new DataColumn("Doğum Tarihi"), 
                
                });
    
                var employees = new EmployeeBLL().TumunuGetir();
    
                foreach (var employee in employees)
                {
                    dtEmployees.Rows.Add(employee.EmployeeID.ToString(), employee.Name, employee.Gender, employee.DateOfBirth.Value);
                }
              
    
                string filename = "employeeList";
                var grid = new GridView();
                grid.DataSource = dtEmployees;
                grid.DataBind();
    
                Response.ClearContent();
                Response.Charset = "utf-8";
                Response.AddHeader("content-disposition", "attachment; filename=" + filename + ".xls");
    
                Response.ContentType = "application/vnd.ms-excel";
                StringWriter sw = new StringWriter();
                HtmlTextWriter htw = new HtmlTextWriter(sw);
    
                grid.RenderControl(htw);
    
                Response.Write(sw.ToString());
                Response.End();
            }
    

    Index Viewimde aşağıdaki scriptleri yazarak Excele Aktarma İşlemini çağırmış olabileceğiz.

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#export").click(function () {
                Export();
            });
        });
        function Export()
        {
            var url = '@Url.Action("ExportToExcel")';
            window.open(url);
        }
    </script>
    
    <a href="#" id="export">Export to Excel</a>
    
     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Cevapla
e
Düzenle
o
Show/Hide comments
t
En üste git
l
Go to login
h
Show/Hide help
shift + esc
Vazgeç
Takip Et

Her yeni yazı için posta kutunuza gönderim alın.