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 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.
Ö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 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.
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ü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>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<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;
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)