Ana içeriğe geç

Template Projesi Kullanarak Yeni Eksen UI Projesi Geliştirme#

Giriş#

Eksen Altyapısı UI için angular tabanlı kütüphaneler sunarak Eksen Java Altyapısı ile uyumlu orta ve büyük ölçekli uygulamaların hızlı ve pratik bir şekilde geliştirilmesini hedeflerken bu uygulamalar için ihtiyaç duyulabilecek çoklu dil desteği, konfigürasyon yönetimi, güvenlik, raporlama, veri girişi doğrulama, temel ekran yerleşimi ve tema gibi yetenekleri hazır olarak sunar.

Eksen UI kütüphaneleri önyüz bileşenleri için Prime NG kütüphanesini kullanmaktadır. Eksen sisteme giriş ve ana sayfa yerleşimi ile ilgili bileşenler dışında önyüz bileşeni sunmamaktadır. Projelerin bileşen ihtiyaçlarını Prime NG bileşenlerinden karşılaması beklenmektedir. İhtiyaç duyulan bir bileşenin Prime NG'de bulunmaması durumunda ihtiyacı karşılayan kütüphaneler projeye dahil edilebilir. Projeye dahil edilen kütüphanelerin yönetimi ve bağımlılık çakışmaları gibi durumlar işlemi yapan ekibin sorumluluğundadır.

Eksen UI kütüphaneleri Angular ve Prime NG'nin güncel stabil sürümlerini kullanır. Eksen UI kütüphaneleri düzenli olarak sürüm çıkarmaktadır ve bu sürümlerde tüm bağımlılıkların güncel stabil sürümlerine yükseltilmesine özen gösterilmektedir.

Bu dökümanda Eksen konfigürasyonları hazır boş şablon bir proje olan template projesi kullanarak Eksen UI kütüphanerinin kullanıldığı bir proje geliştirmenin temel aşamaları anlatılacaktır. Ayrıca projedeki kritik dosyalar özellikle standart bir angular projesinden farklı olarak Eksen'ın projeye kattığı kısımlar detayları ile açıklanacaktır.

Gereksinimler#

Eksen UI Altyapısı ile geliştirme yapabilmek için Node.js 16 ve npm 9 sürümü bilgisayarınızda yüklü olmalıdır.

Eğer kurumunuz https istekleri için kendi root sertifikasını sertifika zincirine ekliyorsa npm'in ssl sertifika kontrolünü es geçmesi için aşağıdaki komut satırı komutu ile npm'in öntanımlı ssl kontrolü ayarını değiştirmeniz gerekebilir.

npm set strict-ssl false

Önemli

Yukarıdaki komut npm'in tüm ssl isteklerinde sertfika kontrolü yapmamasını sağlayacaktır. Bu işlem kurumunuzun güvenlik politikalarına aykırı olabilir ve kurumunuzca güvenlik ihlali olarak değerlendirilebilir. Bu sebeple bu işlemi yapmadan önce kurumunuzun güvenlik depertmanına danışın. Kurumunuz kurum root sertifikasının işletim sistemi seviyesinde tanıtıp yukarıdaki ayara ihtiyaç olmadan npm registry'lere erişiminizi sağlayabilir.

npm registry Konfigürasyonu#

Eksen UI Altyapısı kütüphaneleri havelsan npm registry sunucularından sağlanmaktadır. Bu sebeple geliştirici bilgisayarlarında npm registry ayarları havelsan'ın registry sunucularını kullanacak şekilde konfigüre edilmelidir.

Havelsan npm registry sunucuları aynı zamanda npm'in öntanımlı registry sunucuları (https://registry.npmjs.org) paketlerini proxy yöntemi ile içermektedir. Bu sebeple Havelsan npm registry sunucuları projedeki tüm bağımlılıkları çekmek için kullanılabilir. Bunun için aşağıdaki komut ile npm registry ayarınızı yapabilirsiniz:

npm config set registry http://nexus.bulut.ai/repository/framework_npm_group/

Eğer projenizde farklı bir registry kullanıp sadece Eksen altyapı kütüphanelerini almak için havelsan registry sunucularını kullanmak isterseniz aşağıdaki komut ile sadece @hvlng namespace'i için havelsan registry sunucularının ayarlanmasını sağlayabilirsiniz:

npm config set @hvlng:registry=http://nexus.bulut.ai/repository/framework_npm_group/

Önemli

Eğer nodejs tabanlı proje geliştirme konusunda çok tecrübeniz yoksa ve kendi kurumunuza ait bir npm registry sunucusu yoksa namespace bazlı registry ayarı yapmak yerine tek genel bir npm registry ayarı yapmanız size daha kolay bir konfigürasyon yönetimi sağlayacaktır.

Havelsan npm registry sunucuları kullanıcı doğrulaması gerektirmektedir. Npm registry kullanıcı bilgilerini kaydetmek için aşağıdaki komutu kullanabilirsiniz.

npm adduser --registry http://nexus.bulut.ai/repository/framework_npm_group/

Yukarıdaki komutu çalıştırdığınızda sizden sırası ile kullanıcı kodu ve şifre isteyecektir. Kullanıcı kodu için framework-npm-group şifre için repository erişim bilgilerini kullanın. Bu işlemi birkez yaptıktan sonra bir daha npm kullanıcı kodu şifre bilgisi istemeyecektir.

Önemli

Eğer Havelsan npm registry sunucularını kullanıyorsanız yukarıdaki kullanıcı / şifre bilgilerini anlatıldığı gibi girmeniz gerekir. Havelsan dışında bir kurum için çalışıyorsanız kurumunuzun npm registry sunucularının kullanıcı doğrulama gerektirip gerektirmediğini ve kullanıcı kodu / şifre bilgilerini kurumunuzdan öğrenmelisiniz.

Yukarıdaki kullanıcı kodu / şifre bilgileinin güncel olduğundan emin olmanız gerekebilir.

IDE Seçimi#

Eksen önyüz geliştirirken özellikle bir IDE seçimini zorlamamaktadır. Önyüz geliştirirken piyasada çok kullanılan IDE'ler JetBrains WebStrom ve Microsoft Visual Studio Code olarak bilinmektedir. Bunlar dışında kullanılan IDE'ler de mevcuttur. Önyüz geliştirirken kendinizi rahat hissettiğiniz alışkanlıklarına uygun bir IDE'yi seçebilirsiniz.

JetBrains WebStrom tüm özellikleri ile kullanıldığında ücretli bir üründür. Öğrencilere ise ücretsiz lisans sağlamaktadır. Microsoft Visual Studio Code ise ücretsiz bir üründür ve plugin'lerinin çeşitliliği ile ön plana çıkmaktadır.

Proje içinde kodlama standartlarını oturtmak için eslint ve prettier kullanmanız tavsiye edilir. Bu konu ile ilgili bu dökümandaki eslint ve prettier konfigürasyon dosyalarının açıklandığı kısımlara bakabilirsiniz. Popüler IDE'lerin hepsi bu kütüphaneleri desteklemektedir.

Angular projelerinde derleme, çalıştırma, bağımlılıkları yükleme gibi bazı işlemler komut satırından yapılmaktadır. Komut satıra aşina değilseniz ve bu konuda IDE desteği arıyorsanız bu yönü güçlü bir IDE seçebilirsiniz. Bu dökümanda komut satırı işlemleri için IDE desteği konusunda JetBrains WebStrom için örnekler verilmiştir.

Monorepo#

Eksen önyüz geliştirimi için monorepo kullanımını tavsiye eder. Monorepo projedeki tüm modüllerin tek büyük bir proje altında geliştirip bu projenin kod deposunun tek olduğu, ci/cd süreçlerinin tek bir yerden yönetildiği fakat birden fazla paket üretilebildiği bir geliştirme yöntemidir.

Monorepo piyasada çok bilinen ve kullanılan geliştirme yöntemlerinden biridir. Özellikle projeleri aynı teknoloji ile geliştirme, bağımlılıkları tek bir yerden yönetme, modülerliği ve bakımı kolaylaştırma gibi yönlerden avantajlıdır.

Projeler isterse farklı bir yöntem tercih edebilirler Eksen bu konuda katı bir kısıtlama getirmemektedir. Fakat projeler bu konuda aldıkları kararı yürütebilecek deneyimde olması önemli bir konudur. Daha önce bu konularda ciddi bir deneyimiz yoksa monorepo yöntemini kullanmanız tavsiye edilir.

Şablon Proje#

Eksen altyapısı UI tarafında hızlı bir proje başlangıcı yapılabilmesi için bir şablon proje sunar. Bu projeye aşağıdaki git deposundan erişip bilgisayarınıza çekebilirsiniz:

http://bitbucket.bulut.ai/projects/JAVALT_NG/repos/hvl-ng-template/browse

git clone http://bitbucket.bulut.ai/scm/javalt_ng/hvl-ng-template.git

Bu proje yeni bir projeye başlarken proje yapısı, bağımlılıklar, eslint ve prettier ayarları, konfigürasyon ve örnek ekranlar içermesi sebebiyle hızlı bir başlanğıç sağlayacaktır.

Dökümanın bundan sonraki kısmında template projesinin derlenip çalıştırılması gösterilecek olup daha sonra template projesi içindeki Eksen için önemli dosyalar detaylı olarak açıklanacaktır.

Projenin Derlenmesi#

angular projeleri geliştirme aşamasında Node.js tabanlı projelerdir ve nodejs bağımlılıklarının çözülüp projenin derlenmesi ve ayağa kaldırılması projenin bilgisayarında çalıştığını görmek için ilk aşamalardır.

Projeyi çalıştırmadan önce nodejs paket yöneticisi npmi kullanarak proje bağımlılıklarını çözüp projeyi derlemek için hazır hale getirmelisiniz.

Bunun için öncelikle komut satırında projenin olduğu klasöre gidin ve aşağıdaki komutu çalıştırın.

npm install

Bilgi

Yukarıdaki komutu proje klasöründe çalıştırmalısınız. Daha önce terminal tecrübeniz yoksa proje arkadaşlarınızdan destek isteyiniz.

Komut satırına aşina değilseniz WebStorm yada Idea üzerinden de bağımlılıkları çözebilirsiniz. Bunun için projedeki package.json dosyasına sağ tıklayıp Run 'npm install' menü öğesini seçerek bağımlılıkların çözülmesini sağlayabilirsiniz.

Bağımlılıkların Webstorm yada Idea'da yüklenmesi

Yukarıdaki komut projedeki nodejs kütüphane bağımlılıklarını çözer ve projenizde node_modules isimli bir klasör oluşturup bağımlılıkları buraya kopyalar.

Bağımlılıkların Çözülmesi Sırasında Karşılaşılan Hatalar

Eğer npm install komutunda hata aldıysanız hatayı çözmeden dökümanın bundan sonraki aşamasına geçmeyin.

Sertifika ile ilgili hata alıyorsanız Gereksinimler kısmında açıklanan önerileri deneyin.

http 401 gibi yetkilendirme hatası alıyorsanız npm registry kullanıcı / şifre bilgilerini girmemiş olabilirsiniz. npm registry Konfigürasyonu yetkilendirme kısmında açıklanan adımları uyguladığınızdan emin olun.

hvlng namespace'indeki bağımlılıkları bulamama ile ilgili hata alıyorsanız npm registry Konfigürasyonu kısmında açıklanan registry ayarlarını düzgün uyguladığınızdan emin olun.

Hatayı geçemiyorsanız takımınızdaki tecrübeli bir takım arkadaşınızdan destek isteyin.

Bağımlılıkların çözülüp bilgisayarınıza yüklenmesi tamamlandıktan sonra projeyi derleme aşamasına geçebilirsiniz. Bunun için komut satırında proje klasörü içinde iken aşağıdaki build komutunu çalıştırın:

npm run build

Bilgi

Yukarıdaki komutu komut satırından değil de WebStrom yada Idea ile çalıştırmak için IDE'nizde package.json dosyasını açın. Bu dosyada "scripts" kısmında "build", "watch" gibi komut tanımlarının olduğu satırları göreceksiniz. "build" komutunun solundaki yeşil üçgen ikonu ile gösterilen Run butonuna tıklayarak IDE üzerinden build komutu çalıştırabilirsiniz.
package.json'daki build komutunun Webstorm yada Idea'dan çalıştırılması

Bu komut template projesini derler ve derlenmiş dosyaları proje altında dist isimli klasör altına kopyalar.

Derleme (build) işlemi projemizde bir hata olmadığını ve sürüm çıkmaya hazır olduğumuzu gösterir. Sürüm çıkacağımız zaman dist klasörü altına üretilmiş dosyalar kullanılacaktır.

Geliştirme yaparken derleme yapmanıza gerek yoktur. Start komutu ile projeyi ayağa kaldırıp hemen ekran geliştirmeye başlayabiliriz. Bunun için aşağıdaki start komutunu çalıştırabilirsiniz (yada IDE'nizden package.json'daki start komutunu çalıştırabilirsiniz):

npm run start

Kısa bir süre sonra uygulama ayağa kalkacaktır. Uygulamaya web tarayıcınızdan http://localhost:4200/#/ adresinden erişebilirsiniz. Sizi aşağıdaki ekran karşılayacaktır:

Template projesi içindeki örnek sayfaya gitmek için ise aşağıdaki adresi açabilirsiniz:

http://localhost:4200/#/template

Örnek template projesinde güvenlik kapalı olduğu için ve herhangi bir backend servise rest istek olmadığı için ayağa kaldırdığımız uygulamaya localhost üzerinden eriştik. Çok fazla mikroservis olduğunda uygulamaya localhost yada IP üzerinden erişmek yerine bir alan adı üzerinden erişmek daha kullanışlı olacaktır. Bunun için uygulamayı start komutu ile başlatmak yerine startTemplate komutu ile başlatabiliriz.

package.json dosyasında startTemplate komutuna baktığınızda uygulamanın template.hvlnet.net adresinden isteklere cevap verecek şekilde açıldığını görürsünüz. Bunun sizin bilgisayarınızda istenildiği gibi çalışabilmesi için hosts (unix tabanlı sistemlerde /etc/hosts, windows tabanlı sistemlerde C:\Windows\System32\Drivers\etc\hosts) dosyasına template.hvlnet.net adresi için 127.0.0.1 yazmayı unutmamalısınız. Örnek hosts dosyası içeriği aşağıda verilmiştir.

127.0.0.1 template.hvlnet.net

start komutunu durdurup startTemplate komutunu çalıştırdığınızda web tarayıcınızda aynı sayfaya http://template.hvlnet.net:4200/#/template adresinden erişebilmelisiz.

Template uygulamasını ayağa kaldırdık ve örnek sayfayı gördük. Bu dökümanın bundan sonraki kısmında örnek projedeki önemli dosyaların detayları açıklanacaktır. Özellikle standart bir angular projesine göre Eksen tarafından eklenen kısımlar ve Eksen UI projelerinde uygulanması gereken pratikler açıklanacaktır.

angular.json#

angular.json angular projelerinde angular ile ilgili genel ayarların olduğu dosyadır.

Bu dosyanın "projects" kısmında monorepo modülleri (yada projeleri) yer alır. Şablon projesindeki örnek projenin adı templatetir. Bunu değiştirmek isterseniz bilgisayarınızda projects/template klasörünün ismini değiştirdikten sonra angular.json'da yer alan tüm template proje ismi ve klasör referanslarını da düzeltmeyi unutmayın.

Stil Dili Ayarı#

Eksen ui geliştiriminde stil dili olarak scss'i kullanmaktadır ve scss'ı önermektedir. Fakat scss yerine css yada farklı bir dil kullanmak isterseniz bunu angular.json'da değiştirebilirsiniz. template projesindeki stil konfigürasyonu scss olarak ayarlanmıştır, bunu değiştirmek için aşağıdaki örnek angular-cli komutunu kullanabilirsiniz:

ng config defaults.styleExt=css

Yukarıdaki komut angular.json dosyasında proje stil dilini css olarak değiştirir. Bunu yaptıktan sonra template projesindeki tüm scss uzantılı stil dosyalarını css'e de çevirmeniz gerektiğini unutmayın.

prefix ayarı#

template projesinde geliştirilecek angular bileşenlerinin tag öneki ("prefix" ayarı) app olarak ayarlanmıştır. Bu angular-cli tarafından oluşturulan projelerde kullanılan öntanımlı önektir. İsterseniz değiştirebilirsiniz.

"prefix": "app",

assets Ayarları#

angular.json dosyasındaki build kısmında yer alan assets ayarları proje static kaynaklarının belirtildiği ayardır. Burada Eksen altyapı ui kütüphanelerinin asset'lerinin de verildiğini görürsünüz, bu ayar Eksen altyapı stil ve diğer static kaynakların projede kullanılması için önemlidir.

"assets": [
    {
        "glob": "**/*",
        "input": "./node_modules/@hvlng/framework-theme/assets",
        "output": "/assets/"
    },
    {
        "glob": "**/*",
        "input": "./node_modules/@hvlng/framework-core/assets",
        "output": "/assets/"
    },
    "projects/template/src/favicon.ico",
    "projects/template/src/assets"
],

package.json#

package.json dosyası Node.js tabanlı projelerde geliştirilen proejinin ismi ve versiyonunun verildiği, bağımlılıkların yönetildiği ve proje scriptlerinin yer aldığı dosyadır.

Angular, Prime NG, json2typescript, ngx-logger ve rxjs Eksen UI projelerinde kullanılan en temel kütüphanelerdir ve bağımlılıklarda yer alır. Ayrıca Eksen UI kütüphaneleri olan hvlng/framework-bff, hvlng/framework-core ve hvlng/framework-theme bağımlılıklarda yer alır.

Eksen UI kütüphaneleri periyodik olarak sürüm çıkmaktadır ve bu sürümlerde kullanılan üçüncü parti kütüphanelerin versiyonları güncel stabil versiyonlarına yükseltilmektedir. Yapılan değişikliklerle ilgili bilgiler sürüm notlarında yayınlanmaktadır.

package.json dosyasının script kısmında proje ve modüller üzerinde derleme, çalıştırma gibi işlemler yapmak için komutlar yer alır. Bunlar genellikle angular projelerde yer alan startdart build, start, watch komutlarıdır. Farklı olarak startTemplate komutu yer alır. startTemplate komutu start komutundan farklı olarak projeyi template.hvlnet.net host adresinden dinleyecek şekilde çalıştırır. Host isimleri ile uygulamayı başlatmak mikroservislerle çalışırken disiplin oluşturma ve CORS hatalarından kaçınmak için faydalı olabildiği için eklenmiştir.

"start": "ng serve",
"startTemplate": "ng serve template --host=0.0.0.0 --public-host=template.hvlnet.net --port=4200",
"build": "ng build",
"watch": "ng build --watch --configuration development",

tsconfig.json#

Projenin typescript derleyici ayarlarının yer aldığı dosyadır. Bu dosyada hedef javascript versiyonunun yer aldığı kısımlar özellikle önemlidir. Projenizin desteklemesi gereken web tarayıcı versiyonlarına göre burada hedef javascript versiyonlarını belirtmeyi unutmayınız.

.eslintrc.json#

.eslintrc.json eslint ayarlarının yer aldığı dosyadır. Eslint proje içinde kod standartı belirlemek ve basit hatalardan kaçınmak için etkili bir araçtır. Template projesinde yer alan .eslintrc.json dosyasındaki ayarlar çok detaylı olmayıp temel ayarları içermektedir. Bu dosyayı projeniz için genişletmeniz ve detaylandırmanız tavsiye edilir. Bu konuda internette çok sayıda kaynak bulabilirsiniz.

Önemli

.eslintrc.json dosyasını bazı IDE'ler otomatik algılarken bazı IDE'lerde konfigürasyonda belirtmek gerekebilir. Bu sebeple kullandığınız IDE'nin bu ayarları gördüğünden emin olmanızda fayda var.

Önemli

.eslintrc.json dosyasını CI/CD süreçlerinize entegre etmeniz tavsiye edilir. Pull Request (bazı platformlarda Merge Request) 'lerde eslint hatası içeren kodların otomatik reddedilmesi yada deploy edilmesinin engellenmesi gibi ayarların aktif edilmesi proje kalitenizin artmasına katkı sağlayacaktır.

project/ klasörü altındaki alt projelerde de .eslintrc.json dosyaları göreceksiniz. Eslint ayarları alt projeler için farklılaştırılabilir. Ana ayarları en üst klasördeki .eslintrc.json dosyasında yapıp alt projelerde farklı ayar kullanacaksanız alt klasörlerde sadece bu farklılıkları tanımlamanız tavsiye edilir.

.prettierrc.json#

.prettierrc.json dosyası projedeki kaynak kodların tab karakter kullanımı, satır genişliği gibi kod stili ayarlarını içerir. Projedeki herkesin aynı kod stili ile kodlama yapması özellikle kod gözden geçirmelerde şekilsel değişikliklerden dolayı dosyada çok fazla değişiklik varmış gibi görünme problemlerinin önüne geçer ve bu süreci hızlandırır.

Önemli

.prettierrc.json dosyasını bazı IDE'ler otomatik algılarken bazı IDE'lerde konfigürasyonda belirtmek gerekebilir. Bu sebeple kullandığınız IDE'nin bu ayarları gördüğünden emin olmanızda fayda var.

Ayrıca eslint te şekilsel bir çok ayar içerip detaylı ayar ve plugin'lerle prettier'den dil bazında daha kapsamlı standartlar oluşturulabilmesine izin vermektedir. Projelerinizde herikisini birlikte kullanabilirsiniz.

projects/template/index.html#

index.html dosyası projenin giriş sayfasıdır. Projeyi ayağa kaldırdığınızda web tarayıcıdan gelen isteğe bu sayfa gönderilir.

Bu sayfa içindeki title ve favicon kısımlarını projenize göre değiştirmeyi unutmayın.

index.html sayfasında theme kütüphanesinden sağlanan tema css'leri ile ilgili link tanımları vardır, bunları değiştirmemelisiniz. Kendi projenize özel css ve font tanımlarını bu sayfaya ekleyebilirsiniz.

index.html sayfasının body kısmında template-root tag'ini göreceksiniz. Bu projedeki root bileşendir ve uygulamanın temel bileşenidir (aşağıda app.component.ts kısmında açıklanmıştır). Bu bileşen içindeki splash screen ile ilgili div'i tamamen silebilirsiniz.

projects/environments/#

Bu dizin angular uygulamaları için çevre değişkenlerinin ortamlara (development, prod gibi) göre verildiği dosyaları içerir. Bu dosyada ortamlara göre farklı değer içermesi gereken değişkenleri tanımlayıp uygulama içinde kullanabilirsiniz.

Örnek environment.development.ts dosyası içeriği: 

export const environment = {
  production: false,
};

Örnek environment.prod.ts dosyası içeriği: 

export const environment = {
  production: true
};

Proje içinde örnek kullanımı aşağıda verilmiştir:

//import'taki yol kodun yazıldığı klasöre göre değiştirilmesi gerekebilir
import { environment } from '../environments/environment';

....

if (environment.production) {
    //prod'da işlem yapıyoruz
} else {
    //prod'da işlem yapmıyoruz
}

projects/assets/build/build.json#

Projenin adı, sürümü gibi genel bilgileri içeren dosyadır. Buraya proje ile ilgili istemcide göstermek istediğiniz bilgileri koyabilirsiniz. build.json içindeki bilgilere framework-bff kütüphanesi içinde yer alan HvlBuildInfoService 'i kullanarak erişebilirsiniz. Örnek kullanımı aşağıda verilmiştir.

import { HvlBuildInfoService } from '@hvlng/framework-bff/core';

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements {

    constructor(
        private buildInfoService: HvlBuildInfoService,
    ){
    }

    getVersion() :string{
        return this.buildInfoService.buildInfo.version;
    }
}

projects/template/assets/config/config.json projects/template/assets/config/config_prod.json#

config.json istemci tarafındaki uygulama ayarlarının saklandığı dosyadır. Bu ayarlara erişim ve kullanım framework-bff kütüphanesinde HvlConfigurationService servisi sağlanmaktadır. Bu konu ile ilgili BFF Core modülü dökümantasyonunu inceleyebilirsiniz.

config.json'ın sadece development zamanında kullanılan bir dosya olduğunu unutmayın. Canlı ve test ortamlarında bu ayarların configserver'dan alınacaktır. configserver (konfigürasyon sunucusu) erişim bilgileri config_prod.json dosyasında yer almalıdır.

projects/template/src/app.module.ts#

Uygulamanın angular ana modül tanımının olduğu dosyadır. Bu dosyadaki çoklu dil tanımları ile ilgili kısmı özellike inceleyiniz. Uygulama genelinde çoklu dil kullanımları buradaki dosyalardan alınacaktır, projeye yeni bir çoklu dil dosyası eklediğinizde buraya da eklemeniz gerektiğini unutmayın.

Ayrıca app.module.ts dosyasında Eksen UI kütüphaneleri tarafından sağlanan modüllerin (HvlNgSecurityModule, HvlNgLanguageModule gibi) ve bazı üçüncü parti kütüphane modüllerinin (TranslateModule gibi) uygulama modül tanımında kullanımı yer almaktadır.

projects/template/src/app-routing.module.ts#

Uygulamanın angular ana modül routing tanımının olduğu dosyadır. Bu dosyada HvlAuthenticatedGuard ve HvlAuthorizationGuard kullanımları örneklenmiştir.

projects/template/src/app.component.ts#

Uygulamanın ana bileşenidir. index.html'de kullanılan bileşendir. Uygulama istemcide ilk açılırken bu bileşen kullanılır. Dolayısı ile uygulamanın yaşam döngüsü içinde ilk açılışta yapılması gereken bir iş varsa bu bileşen kullanılabilir.

Diğer Dosyalar#

Projede bulunup yukarıda açıklanmayan diğer dosyalar standart angular projelerinde yer alan ve Eksen UI altyapısı ile ilgili önemli bir içerik içermeyen dosyalardır. Template projesinde bu dosyaları inceleyebilirsiniz. Özellikle örnek ekranlarda Eksen kütüphaneleri tarafından sağlanan servis ve bileşenlerin kullanımlarını incelemeniz faydalı olacaktır.