AngularJS'de Modüler Proje Yönetimi | Turkish Tutorial

Neler Öğreneceğim?

• AngularJS'de Modüler Proje Yönetimi
• Modüler Programlama Yaklaşımı?
• Neden Proje Modüler Halde Olmalı?
• AngularJS Modüler Proje Geliştirmeyi Destekliyor mu?

Gereksinimler

• Notepad++

Zorluk Düzeyi

• Intermediate (Orta Seviye)

English

Modular Project Management at AngularJS

With the previous sections, we shared the basic information we need to know about AngularJS programmatically. In the last few chapters, we will talk about how we can make the development environment more productive while creating the application, how to test the written code, and in addition to the security (especially the mobile) application deployment.

In this section, we will discuss how to achieve a modular project management hierarchy.

Modular Programming Approach?

Modular programming is, in many respects, an approach that makes project development more efficient, faster and more quality. This approach consists of a program, system or software module (a whole of the other part, separated by itself). Modular programming, also referred to as unitary programming, creates different software designs according to the hierarchy of the modules or the communication (modular data flow) of the modules with each other, following the achievement of the efficiency and performance of the modules themselves.

Note: Each module is complete in itself. Thanks to the programming interface created by the programmer for the use of the module, another developer-programmer who has not coded this module can easily use this module even though it has no knowledge about the structure of the codes. Or you can interact with the module you write.

Türkçe

AngularJS'de Modüler Proje Yönetimi

Önceki bölümleri ile, programatik anlamda AngularJS konusunda bilmemiz gereken temel bilgileri paylaştık. Sondaki birkaç bölümde ise, uygulamayı oluştururken geliştirme ortamını nasıl daha verimli hale getirebileceğimizden, yazılan kodun nasıl test edilebileceğinden ve güvenliğinden ek olarak (özellikle mobilde) uygulama dağıtımından bahsedeceğiz.

Bu bölümde, modüler bir proje yönetim hiyerarşisini nasıl elde edebileceğimizi tartışacağız.

Modüler Programlama Yaklaşımı?

Modüler programlama birçok açıdan proje geliştirmeyi daha verimli, hızlı ve kaliteli hale getiren bir yaklaşımdır. Bu yaklaşıma göre bir program, sistem veya yazılım modüllerden (kendi içinde ayrılmış, diğer parçanın bir bütünü) oluşur. Birimsel programlama olarak da referans edilen modüler programlama, modüllerin kendi başına verimliliği ve performansının sağlanmasını takiben, modüllerin birbiri ile iletişimi (modüler veri akışı) veya bu modüllerin birbirine göre hiyerarşilerine göre farklı yazılım tasarımları oluşturmakta.

Not: Her modül kendi içinde tamdır. Modülün kullanılması için programcı tarafından oluşturulan programlama arayüzü sayesinde, bu modülü kodlamamış başka bir geliştirici-programcı, bu modülü kodlarının yapısı konusunda bilgisi olmamasına rağmen rahatlıkla kullanabilir. Ya da kendi yazdığı modül ile etkileşime geçirebilir.

Neden Proje Modüler Halde Olmalı?

Modüler şekilde geliştirilen projeler, karmaşaya mahal vermeden birden fazla kişinin üzerinde çalışmasına önayak olur. Buna ek olarak projenin bir kısmının diğer bir kısmına bağlı olmaması durumu, kodun birim testi yapılmasını çok daha kolay hale getirir.

Not: Tüm bunlara ek olarak, modüler bir geliştirme ortamı geliştiricinin sürekli olarak uygulamanın tüm planını aklında tutması gerekliliğini ortadan kaldırarak, geliştiricinin tek bir modül üzerinde konsantre olmasını ve daha hızlı geliştirme yapmasını sağlar.

AngularJS Modüler Proje Geliştirmeyi Destekliyor mu?

AngularJS; Modüller, bu modülleri kontrol eden mantıksal metodlar, controller ve mantıksal veriyi bağlayacak template (view) ögelerinden oluşur. Temeldeki yapısı geliştiricileri modüler bir geliştirme ortamı edinmeye itiyor olmasına rağmen, geliştirme sırasında uygulamanızın tam anlamıyla modüler hale gelmesi için size düşen işler de bulunuyor. Modüler iskeletine en kolay şekilde uyum sağlamak için, projenize uygun bir boilerplate veya iskelet seed angular projesi ile çalışmaya başlayabilirsiniz.

En popülerinin yine angular tarafından yayınlanmış angular/angular-seed repository'si olduğunu söyleyebiliriz;

https://github.com/angular/angular-seed

Anguıar-seed, içinde test etmek için gerekli eklentilerin de bulunduğu ve npm script çalışma ortamının da hazır bir şekilde sunulduğu başlangıç projesidir diyebiliriz. Bu başlangıç safasındaki seed projeyi kullanarak, kendi projenizi modüler ve test edilebilir bir şekilde geliştirebilirsiniz.

Görselde gördüğünüz gibi, uygulamada kullanılacak görünümleri bu görünümün Javascript dosyası, template (HTML) dosyası ve Javascript dosyası için gerekli test dosyasını aynı klasörde tutuyoruz.

view1.html

<p>This is the partial for view 1.</p>

view1.js

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', [function() {

}]);

view1_test.js

describe('myApp.view1 module', function() {

  beforeEach(module('myApp.view1'));

  describe('view1 controller', function(){

    it('should ....', inject(function($controller) {
      //spec body
      var view1Ctrl = $controller('View1Ctrl');
      expect(view1Ctrl).toBeDefined();
    }));

  });
});

/viewl klasörü içerisindeki dosyaların içeriğini incelersek, myApp.viewl isimli bir modül oluşturulduğunu görüyoruz, buna ek olarak sayfada önceki
bölümler de bahsettiğimiz route konfigürasyonu ve ek olarak bu modül için kullanacağımız kontroller oluşturulmuş·

Not: Yine aynı şekilde/view2 klasörü içinde de benzer bir modül oluşturulmuş.

Son olarak repo dizinindeki/app klasörü içerisinde de, tüm alt modülleri birbiri ile bağlayacak bir modül oluşturarak gerekli konfigürasyonları yapmamız gerekiyor. Buna göre;

app.js

angular.module('myApp', [
    'ngRoute',
    'myApp.view1',
    'myApp.view2',
    'myApp.version'
]).

config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {

    $locationProvider.hashPrefix('!');
    $routeProvider.otherwise({redirectTo: '/view1'});

}]);

app.js içeriğini incelersek, modül olarak eklenen ngRoute'a ek olarak kendi oluşturduğumuz alt modüller olan view1 ve view2 modüllerini de genel modüle inject ediyoruz.
Uygulama iskeletinin index.html dosyası içeriğini incelersek;

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>

    <ul class="menu">
        <li><a href="#!/view1">view1</a></li>
        <li><a href="#!/view2">view2</a></li>
    </ul>
    
    (html comment removed: [if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif])
    
    <div ng-view></div>
    <div>Angular seed app: v<span app-version></span></div>
    
    (html comment removed:  In production use:
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
    )
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="view1/view1.js"></script>
    <script src="view2/view2.js"></script>
    <script src="components/version/version.js"></script>
    <script src="components/version/version-directive.js"></script>
    <script src="components/version/interpolate-filter.js"></script>
    
</body>
</html>

Uygulama içerisinde aktarabilmek için, dış modülleri eklediğimiz gibi, kendi oluşturduğumuz alt modüllerin Javascript dosyalarını da HTML dosyasına eklememiz gerekiyor. Buna göre view1/view1.js ve view2/view2.js yollarındaki Javascript dosyalarını, kullandığımız ngRoute modülünün javascript dosyasıyla birlikte HTML dosyasına ekledik.

Not: Eğer kullandığımız (dependency olarak bir modüle belirttiğimiz) modülleri HTML sayfasına eklemezsek, modül görünmediğinden uygulama çalışmayacaktır.

Angular-seed'i geliştirme tabanı olarak kullanmak için şu adımları izleyebilirsiniz; Komut satırı ile veya bir git istemci programı ile repository'yi klonlayalım;

git clone https://github.com/angular/angular-seed.git

Sonrasında klonlanan dosyaya girerek npm gerekliliklerini yükleyelim;

cd angular-seed
npm install

Sonrasında uygulamayı npm start komutu ile çalıştırarak uygulamaya atanmış port üzerinden izleyebilirsiniz. (localhost: 8080)

AngularJS desleriminizin sonuna geldik.

Umarım hepiniz için faydalı olmuştur.

Bir başka derste görüşmek üzere...

---

Posted on Utopian.io - Rewarding Open Source Contributors

---