Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Exploring the Angular CLI
What is the Angular CLI?
Angular CLI (Command Line Interface), Angular uygulamalarını oluşturmak, yönetmek ve dağıtmak için kullanılan güçlü bir araçtır. Angular CLI, geliştiricilere proje oluşturma, bileşen ekleme, yapılandırma ve derleme gibi birçok görevi otomatikleştirir, böylece geliştirme sürecini hızlandırır.
Angular CLI’nin sağladığı bazı ana özellikler şunlardır:
Proje Oluşturma: Yeni bir Angular projesi oluşturmak için Angular CLI kullanılır. CLI, başlangıçta proje yapısını ve dosyalarını oluşturur, başlangıç dosyalarını ve bağımlılıkları ekler.
Yapılandırma Yönetimi: Angular projeleri karmaşık olabilir ve birçok yapılandırma gerektirebilir. Angular CLI, proje yapılandırmasını yönetmek için kullanılır. Örneğin, test ayarlarını yapılandırmak, tarayıcı uyumluluğunu sağlamak veya dil desteğini yapılandırmak için kullanılabilir.
Geliştirme Sunucusu: Angular CLI, yerel geliştirme sunucusunu başlatmak için kullanılır. Bu, kod değişikliklerini anında görmek için geliştirme sırasında bir sunucu oluşturmanıza olanak tanır. Geliştirme sırasında otomatik olarak yeniden derleme yapılır ve değişiklikler canlı olarak önizlenebilir.
Bileşen ve Servis Yönetimi: CLI, yeni bileşenler, direktifler, servisler vb. eklemek için kullanılır. Örneğin, ng generate component my-component komutunu kullanarak yeni bir bileşen ekleyebilirsiniz. Bu, otomatik olarak bileşen dosyalarını ve bileşenin kullanılacağı modül dosyalarını oluşturur.
Üretim Dağıtımı: CLI, Angular uygulamasını derlemek ve optimize etmek için kullanılır. ng build --prod komutu, üretim sürümünü oluşturur ve bunu dağıtmaya hazır hale getirir. Derleme işlemi, dosyaları küçültme, sıkıştırma ve optimizasyon gibi adımları içerir.
Şimdi, bir örnek üzerinden Angular CLI’nin temel kullanımını görelim:
Öncelikle Angular CLI’nin yüklü olup olmadığını kontrol edin:
ng --versionYeni bir Angular projesi oluşturmak için aşağıdaki komutu çalıştırın:
ng new my-angular-appProje klasörüne gidin:
cd my-angular-appYerel geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:
ng serveTarayıcınızda http://localhost:4200 adresine giderek Angular uygulamanızı önizleyin. Bu adresteki değişiklikler anında yansıtılır.
Bir bileşen eklemek için:
ng generate component my-componentBu komut, my-component adında yeni bir bileşen oluşturur.
Angular CLI, geliştirme sürecini büyük ölçüde kolaylaştırır ve hızlandırır. Projeyi oluşturmak, yönetmek ve dağıtmak için bir dizi kullanışlı komut sağlar. Bu, Angular geliştiricilerinin verimliliğini artırır ve standart uygulama geliştirme süreçlerini iyileştirir.
Installing the CLI
Angular CLI’yi yüklemek, Angular uygulamalarınızı oluşturmak ve yönetmek için ilk adımdır. İşletim sisteminize bağlı olarak Angular CLI’yi yüklemek için farklı yöntemler vardır. Genellikle Node.js ve npm (Node Package Manager) kullanarak Angular CLI yüklenir.
Adım 1: Node.js ve npm Yükleme
Angular CLI, Node.js ve npm üzerinde çalışır. Eğer henüz yüklü değilse, resmi Node.js web sitesinden Node.js’i indirip yükleyin. Node.js yüklendiğinde, npm otomatik olarak yüklenir.
Node.js’i yüklemek için Node.js resmi web sitesine gidin ve talimatları izleyin.
Adım 2: Angular CLI Yükleme
Node.js ve npm yüklendikten sonra Angular CLI’yi yüklemek için terminal veya komut istemcisini açın ve aşağıdaki komutu çalıştırın:
npm install -g @angular/cli
Bu komut, Angular CLI’yi global olarak ( -g flag ile) yükler. -g kullanarak, Angular CLI’yi herhangi bir projede kullanabilirsiniz.
npm install komutu, npm paketlerini yüklemek için kullanılır.
@angular/cli ise Angular CLI’nin paket adıdır. npm, bu paketi npm depolarından indirir ve yükler.
Bu işlem biraz zaman alabilir, çünkü Angular CLI ve bağımlılıkları indirilecek ve yüklenecektir.
Adım 3: Angular CLI’nin Başarılı Bir Şekilde Yüklendiğini Kontrol Etme
Angular CLI başarıyla yüklendikten sonra, doğrulamak için aşağıdaki komutu çalıştırabilirsiniz:
ng --version
Bu komut, yüklü olan Angular CLI’nin sürüm bilgisini ve bağımlılıklarını gösterir. Eğer Angular CLI yüklendiyse, terminalde benzer bir çıktı görmelisiniz:
Angular CLI: X.X.X
Node: X.X.X
OS: darwin x64
Angular: X.X.X
Angular CLI’nin başarıyla yüklendiğini doğruladıktan sonra, Angular projelerinizi oluşturmak ve yönetmek için hazırsınız demektir.
Angular CLI’nin yüklenmesiyle ilgili bu adımları izleyerek, Angular uygulamalarınızı geliştirmek için gereken altyapıyı oluşturmuş olursunuz. Bu süreç, Angular CLI’nin gücünü ve kullanım kolaylığını anlamak için temel bir adımdır.
Using the CLI
Angular CLI kullanımı, Angular uygulamalarını oluşturmak, geliştirmek ve yönetmek için çok önemlidir. CLI’nin sunduğu bir dizi komut, geliştirme sürecini kolaylaştırır ve hızlandırır. Bu komutlar, proje oluşturma, bileşen ekleme, servis oluşturma, modül oluşturma, derleme ve dağıtım gibi temel görevleri gerçekleştirmenize olanak tanır.
1. Proje Oluşturma
Angular CLI kullanarak yeni bir Angular projesi oluşturmak için ng new komutunu kullanabilirsiniz. Örneğin:
ng new my-angular-app
Bu komut, my-angular-app adında yeni bir Angular projesi oluşturur.
2. Bileşen Oluşturma
Angular CLI, yeni bir bileşen oluşturmak için ng generate component veya kısaltması olan ng g c komutunu sağlar.
ng generate component my-component
veya kısaltılmış haliyle:
ng g c my-component
Bu komut, my-component adında yeni bir bileşen oluşturur. Bileşen dosyaları ve bileşenin kullanılacağı modül dosyaları otomatik olarak oluşturulur.
3. Servis Oluşturma
Angular CLI ile yeni bir servis oluşturmak için ng generate service veya kısaltması olan ng g s komutunu kullanabilirsiniz.
ng generate service my-service
veya kısaltılmış haliyle:
ng g s my-service
Bu komut, my-service adında yeni bir Angular servisi oluşturur.
4. Modül Oluşturma
Angular CLI ile yeni bir modül oluşturmak için ng generate module veya kısaltması olan ng g m komutunu kullanabilirsiniz.
ng generate module my-module
veya kısaltılmış haliyle:
ng g m my-module
Bu komut, my-module adında yeni bir Angular modülü oluşturur.
5. Uygulamayı Derleme
Angular CLI, Angular uygulamanızı derlemek için ng build komutunu sağlar.
ng build
Bu komut, Angular uygulamanızı derler ve çıktıyı dist/ dizinine yerleştirir.
6. Geliştirme Sunucusunu Başlatma
Angular CLI ile yerel bir geliştirme sunucusu başlatmak için ng serve komutunu kullanabilirsiniz.
ng serve
Bu komut, yerel bir sunucu başlatır ve geliştirme sırasında değişiklikleri anında izlemenizi sağlar.
Angular CLI’nin bu temel kullanım örnekleri, geliştirme sürecini hızlandırmak ve Angular projelerinizi daha etkili bir şekilde yönetmek için kullanışlıdır. CLI’nin sağladığı diğer birçok komut da bulunmaktadır ve ihtiyaçlarınıza göre kullanabilirsiniz.
Using ng update
Angular CLI, ng update komutunu kullanarak Angular ve bağımlı paketlerin güncellenmesini sağlar. Bu komut, Angular CLI ile birlikte kullanıldığında, Angular projesini güncellemek için birçok kolaylık sağlar.
1. Angular CLI ve Bağımlı Paketlerin Güncel Durumunu Kontrol Etme
Öncelikle, güncelleme yapılacak Angular ve bağımlı paketlerin mevcut durumunu kontrol etmek önemlidir. Terminal veya komut istemcisinde projenizin kök dizinine gidin ve aşağıdaki komutu kullanarak Angular CLI ve bağımlı paketlerin mevcut sürümünü gözden geçirin:
ng version
Bu komut, Angular CLI ve bağımlı paketlerin mevcut sürümünü gösterecektir.
2. Güncelleme İçin Angular CLI ve Bağımlı Paketlerin Versiyonlarını Belirleme
Güncelleme işlemine başlamadan önce, Angular CLI ve bağımlı paketlerin güncellenebilecek en son sürümlerini belirlemek önemlidir. Bu bilgiyi resmi Angular web sitesinden veya GitHub’daki Angular projesinin sayfasından edinebilirsiniz.
3. ng update Komutunu Kullanarak Güncelleme Yapma
Güncelleme işlemi için Angular CLI’nin sağladığı ng update komutunu kullanın. Projenizin kök dizininde terminal veya komut istemcisini açın ve aşağıdaki komutu çalıştırın:
ng update @angular/cli @angular/core
Bu komut, Angular CLI ve Angular Core paketlerini günceller. Eğer projenizde başka bağımlılıklar varsa, bunları da güncellemek için ng update komutunu kullanabilirsiniz.
4. Önerilen Değişiklikleri İnceleme ve Uygulama
ng update komutu, Angular CLI ve bağımlı paketlerin güncellenmesi için önerilen değişiklikleri sağlayacaktır. Bu değişiklikler, proje dosyalarınızda ve yapılandırma dosyalarında olabilir. Önerilen değişiklikleri inceleyin ve uygun adımları uygulayın.
5. Test ve Doğrulama
Güncelleme işlemi tamamlandıktan sonra, Angular projenizi test edin ve doğrulayın. Uygulamanızın beklenen şekilde çalıştığından ve hiçbir sorun olmadığından emin olun. Tarayıcı konsolunu kontrol ederek olası hata mesajlarını gözden geçirin.
6. Bağımlılıkları Güncelleme
Angular projenizin dış bağımlılıklarını (örneğin, ek paketler veya modüller) güncellemeniz gerekebilir. Bu bağımlılıkların güncel sürümlerini kontrol edin ve gerektiğinde güncelleyin.
Angular CLI’nin ng update komutu, Angular ve bağımlı paketlerin güncellenmesini kolaylaştırır ve projenizin güncel kalmasını sağlar. Bu komut, güncelleme işlemini otomatikleştirir ve projenizin güncel kalmasını sağlar, böylece yeni özelliklerden ve iyileştirmelerden yararlanabilirsiniz.
Creating New Angular Projects
The ng new command
ng new komutu, Angular CLI tarafından sağlanan güçlü bir araçtır ve yeni Angular projeleri oluşturmak için kullanılır. Bu komut, yeni bir Angular projesi oluşturmak için gerekli olan temel dosyaları, yapılandırmaları ve klasörleri otomatik olarak oluşturur.
1. Angular Projesi Oluşturma
Terminal veya komut istemcisini açın ve yeni bir Angular projesi oluşturmak için aşağıdaki komutu çalıştırın:
ng new my-angular-project
Bu komut, my-angular-project adında yeni bir Angular projesi oluşturacaktır. İsterseniz proje adını değiştirebilirsiniz.
2. Proje Adımını Belirleme
ng new komutunu çalıştırdıktan sonra, terminal size yeni oluşturulan proje için bir adım seçme seçeneği sunacaktır. Bu adımı belirlemek için yön tuşlarını kullanabilir ve Enter tuşuna basarak onaylayabilirsiniz. Varsayılan adım genellikle Would you like to add Angular routing? (y/N) şeklinde olur. Bu adımda, Angular yönlendirmesi eklemek isteyip istemediğinizi seçebilirsiniz.
3. Angular Projesinin Yapılandırılması
ng new komutu, Angular projesinin temel yapılandırmasını otomatik olarak gerçekleştirir. Bu yapılandırma, angular.json dosyasında belirtilir ve Angular uygulamasının yapılandırması, başlangıç dosyalarının oluşturulması ve bağımlılıkların eklenmesi gibi işlemleri içerir.
4. Bağımlılıkların Yüklenmesi
Angular projesi oluşturulduktan sonra, Angular CLI otomatik olarak gerekli tüm bağımlılıkları yükler. Bu bağımlılıklar, Angular framework’ünü, geliştirme sırasında kullanılan araçları ve diğer yardımcı kütüphaneleri içerir.
5. Projenin Başlatılması
Angular projesi başarıyla oluşturulduktan sonra, projenin kök dizinine giderek yerel bir geliştirme sunucusunu başlatabilirsiniz. Bu sunucu, Angular uygulamanızı yerel ortamınızda önizlemenizi sağlar. Geliştirme sunucusunu başlatmak için terminalde aşağıdaki komutu çalıştırın:
cd my-angular-project
ng serve
Bu komut, Angular uygulamanızı derler ve yerel bir sunucuda çalıştırır. Tarayıcınızda http://localhost:4200 adresine giderek Angular uygulamanızı önizleyebilirsiniz.
Yeni bir Angular projesi oluşturmak için ng new komutunu kullanmak, geliştirme sürecini hızlandırır ve Angular uygulamalarının temel yapısını otomatik olarak oluşturur. Bu komut, yeni başlayanlar için Angular projelerinin oluşturulmasını kolaylaştırırken, deneyimli geliştiricilerin de hızlı bir şekilde yeni projeler başlatmasını sağlar.
Understanding the config files
Angular CLI ile yeni bir Angular projesi oluşturduğunuzda, proje kök dizininde bazı yapılandırma dosyaları otomatik olarak oluşturulur. Bu yapılandırma dosyaları, Angular uygulamanızın yapılandırmasını ve davranışını belirlemek için kullanılır.
1. angular.json
angular.json dosyası, Angular CLI tarafından oluşturulan yeni bir Angular projesinin yapılandırmasını içerir. Bu dosya, proje dosya yapısını, derleme seçeneklerini, asset ve stil dosyalarının yerlerini, proje ismini, hedef platformu ve diğer birçok yapılandırma seçeneğini tanımlar. Angular CLI, bu dosyayı proje oluşturulduğunda otomatik olarak oluşturur ve günceller.
Örnek bir angular.json dosyası:
{
"projects": {
"my-angular-project": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
...
}
},
"defaultProject": "my-angular-project",
"cli": {
"analytics": false
}
}
2. tsconfig.json
tsconfig.json dosyası, TypeScript derleme seçeneklerini içerir. Bu dosya, TypeScript kodunun nasıl derleneceğini ve projede kullanılacak olan TypeScript derleyicisinin nasıl yapılandırılacağını belirtir.
Örnek bir tsconfig.json dosyası:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
...
}
}
3. package.json
package.json dosyası, projenizin bağımlılıklarını ve scriptlerini içerir. Bu dosya, projede kullanılan paketlerin versiyonlarını, proje adını, scriptlerin nasıl çalıştırılacağını ve diğer önemli bilgileri içerir. Angular CLI, projeyi oluşturduğunda bu dosyayı otomatik olarak oluşturur ve gerekli paketleri ekler.
Örnek bir package.json dosyası:
{
"name": "my-angular-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
...
},
"dependencies": {
"@angular/core": "~13.0.0",
...
},
...
}
Bu yapılandırma dosyaları, Angular projenizin temel yapılandırmasını belirler ve projenin nasıl çalışacağını ve davranacağını belirler. Bu dosyaları değiştirerek veya güncelleyerek, Angular uygulamanızı özelleştirebilir ve ihtiyaçlarınıza göre yapılandırabilirsiniz.
Adding application assets
Angular CLI ile yeni bir Angular projesi oluşturduğunuzda, projenizin src dizini altında bulunan ve projenize ait olan çeşitli kaynak dosyaları bulunur. Bu kaynak dosyaları genellikle projenizin CSS stilleri, görüntüler, ikonlar, fontlar ve diğer statik dosyalardır. Bu tür dosyaları projenize eklemek ve yönetmek için Angular CLI’nin sağladığı birkaç farklı yöntem vardır.
1. Assets Klasörü
Angular CLI ile oluşturulan bir Angular projesinde, src/assets klasörü varolan varlıkları (assets) saklamak için kullanılır. Bu klasör, projenize ait olan resimler, fontlar, JSON dosyaları, SVG dosyaları ve diğer statik dosyaları içerebilir.
Örneğin, projenize ait bir resmi src/assets/images klasörüne ekleyebilirsiniz.
src/
|-- assets/
| |-- images/
| |-- logo.png
2. Angular.json Dosyası ile Yapılandırma
Assets dosyalarını Angular projesine eklemek için angular.json dosyasındaki assets özelliğini kullanabilirsiniz. Bu özellik, Angular CLI’nin yapılandırma dosyasında bulunur ve proje için kullanılacak olan varlıkların listesini belirtmenizi sağlar.
Örneğin, angular.json dosyasındaki assets özelliğini aşağıdaki gibi güncelleyebilirsiniz:
{
"projects": {
"my-angular-project": {
...
"architect": {
"build": {
"options": {
...
"assets": [
"src/favicon.ico",
"src/assets"
]
},
...
},
...
}
}
}
}
Yukarıdaki örnekte, assets dizini src/assets olarak belirtilmiştir. Bu, Angular CLI’nin, proje derlendiğinde src/assets dizinindeki tüm varlıkları derleme paketine ekleyeceği anlamına gelir.
3. Assets Klasöründen Kullanım
Assets klasöründeki varlıkları Angular bileşenlerinde veya HTML şablonlarında kullanabilirsiniz. Örneğin, bir resmi bir Angular bileşeninde kullanmak için şu şekilde yapabilirsiniz:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<img src="assets/images/logo.png" alt="Logo">
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Component logic
}
Bu örnekte, assets/images/logo.png yolu kullanılarak src/assets/images klasöründeki logo.png resmi bileşen şablonunda kullanılmıştır.
Angular CLI ile assets dosyalarını projenize ekleyerek, projenizin statik dosyalarını kolayca yönetebilir ve Angular uygulamanızın görünümünü ve davranışını daha da zenginleştirebilirsiniz.
Adding a CSS framework
Angular CLI ile yeni bir Angular projesi oluşturduğunuzda, projenize bir CSS framework eklemek oldukça kolaydır. Angular uygulamalarında popüler CSS framework’lerinden bazıları Bootstrap, Bulma ve Materialize’dir. Bu framework’ler, kullanıcı arayüzünü tasarlamak için hazır bileşenler, stil yönergeleri ve diğer araçlar sağlar.
1. CSS Framework’ünü Yükleyin
Öncelikle, kullanmak istediğiniz CSS framework’ünü yüklemeniz gerekir. Framework’ün resmi web sitesinden veya npm üzerinden yükleyebilirsiniz.
Örneğin, Bootstrap framework’ünü yüklemek için terminalde aşağıdaki komutu çalıştırabilirsiniz:
npm install bootstrap
2. Angular Projesine Framework’ü Tanıtın
Framework’ü Angular projesine tanıtmak için angular.json dosyasını düzenlemeniz gerekir. Bu dosya, projenin yapılandırma dosyasıdır ve Angular CLI tarafından oluşturulur.
angular.json dosyasında, styles özelliğine framework’ün CSS dosyalarını ekleyerek framework’ü projenize tanıtabilirsiniz. Örneğin, Bootstrap kullanıyorsanız, angular.json dosyasındaki styles özelliğini şu şekilde güncelleyebilirsiniz:
{
...
"projects": {
"my-angular-project": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
...
},
...
},
...
}
}
}
}
Bu örnekte, styles özelliğine node_modules/bootstrap/dist/css/bootstrap.min.css yolu eklenmiştir. Bu, Angular CLI’nin projeyi derlerken Bootstrap CSS dosyasını dahil etmesini sağlar.
3. Framework Bileşenlerini Kullanın
CSS framework’ünü projenize ekledikten sonra, framework tarafından sağlanan bileşenleri Angular bileşenlerinizde veya HTML şablonlarında kullanabilirsiniz. Örneğin, Bootstrap’ten bir düğme kullanmak için aşağıdaki gibi bir HTML kodu kullanabilirsiniz:
<button class="btn btn-primary">Click me</button>
Angular bileşenlerinde de aynı şekilde kullanabilirsiniz. Örneğin, Angular bileşeninizin şablonunda:
<button class="btn btn-primary" (click)="onClick()">Click me</button>
Bu adımları izleyerek, Angular CLI ile yeni bir proje oluştururken veya mevcut bir projeye bir CSS framework eklerken sorunsuz bir şekilde ilerleyebilirsiniz. Bu, kullanıcı arayüzünüzü hızlıca geliştirmenize olanak tanır ve CSS framework’ünün sağladığı hazır bileşenlerden ve stillerden yararlanabilirsiniz.
Adding JavaScript libraries
Angular CLI ile yeni bir Angular projesi oluşturduğunuzda, projenize JavaScript kütüphaneleri eklemek oldukça kolaydır. Bu kütüphaneler, projenizin işlevselliğini artırmak veya belirli gereksinimleri karşılamak için kullanılabilir. Örneğin, grafikler oluşturmak için Chart.js, veri tabloları oluşturmak için DataTables veya belirli bir işlevselliği sağlamak için Lodash gibi kütüphaneleri kullanabilirsiniz.
1. JavaScript Kütüphanesini Yükleyin
Öncelikle, kullanmak istediğiniz JavaScript kütüphanesini npm (Node Package Manager) veya yarn gibi bir paket yöneticisi aracılığıyla projenize eklemeniz gerekir.
Örneğin, Chart.js kütüphanesini yüklemek için terminalde aşağıdaki komutu kullanabilirsiniz:
npm install chart.js --save
2. Angular Projesine Kütüphaneyi Tanıtın
Kütüphaneyi projenize tanıtmak için Angular CLI’nin sağladığı angular.json dosyasını düzenlemeniz gerekir. Bu dosya, projenin yapılandırma dosyasıdır ve Angular CLI tarafından oluşturulur.
angular.json dosyasında, scripts özelliğine kütüphane dosyasının yolunu ekleyerek kütüphaneyi projenize tanıtabilirsiniz. Örneğin, Chart.js kullanıyorsanız, angular.json dosyasındaki scripts özelliğini şu şekilde güncelleyebilirsiniz:
{
...
"projects": {
"my-angular-project": {
...
"architect": {
"build": {
...
"options": {
...
"scripts": [
"node_modules/chart.js/dist/chart.min.js"
]
},
...
},
...
}
}
}
}
Bu örnekte, scripts özelliğine node_modules/chart.js/dist/chart.min.js yolunu eklenmiştir. Bu, Angular CLI’nin projeyi derlerken Chart.js dosyasını dahil etmesini sağlar.
3. Kütüphaneyi Kullanın
Kütüphaneyi projenize ekledikten sonra, ilgili bileşenlerinizde veya hizmetlerinizde kütüphane fonksiyonlarını kullanabilirsiniz.
Örneğin, Chart.js ile bir çizgi grafiği oluşturmak için, bir bileşen dosyasında veya hizmet dosyasında ilgili JavaScript kodunu ekleyebilirsiniz:
import { Component, OnInit } from '@angular/core';
import Chart from 'chart.js';
@Component({
selector: 'app-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.createChart();
}
createChart() {
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
}
});
}
}
Bu örnekte, Chart sınıfını ve chart.js dosyasını bileşene ekledik ve createChart() fonksiyonu ile bir çizgi grafiği oluşturduk.
Angular CLI ile JavaScript kütüphanelerini projenize ekleyerek, projenizin işlevselliğini artırabilir ve gereksinimlerinize göre özelleştirebilirsiniz. Bu adımları izleyerek, Angular projenize istediğiniz JavaScript kütüphanesini ekleyebilirsiniz.
Serving Angular Applications for Development
The ng serve command
Angular CLI’de geliştirme yaparken Angular uygulamanızı hızlı ve kolay bir şekilde yerel bir geliştirme sunucusunda çalıştırmak için ng serve komutunu kullanabilirsiniz. Bu komut, Angular CLI’nin sağladığı güçlü bir araçtır ve geliştirme sürecini hızlandırır.
1. Terminali Açın
İlk adım olarak, Angular projesinin kök dizinine gidin ve terminali açın. Bu işlem, Angular CLI komutlarını çalıştırabilmek için gereklidir.
2. ng serve Komutunu Çalıştırın
Terminalde aşağıdaki komutu çalıştırarak Angular uygulamanızı başlatabilirsiniz:
ng serve
3. Uygulamanın Başlatılmasını Bekleyin
ng serve komutu çalıştırıldıktan sonra, Angular CLI otomatik olarak uygulamanızı derleyecek ve yerel bir geliştirme sunucusunda çalıştıracaktır. Bu işlem birkaç saniye sürebilir. Derleme işlemi tamamlandığında, terminalde “Compiled successfully” veya benzer bir mesaj göreceksiniz.
4. Tarayıcıda Uygulamanızı Görüntüleyin
Angular uygulamanız yerel bir sunucuda başarıyla çalıştırıldıktan sonra, tarayıcınızı açın ve aşağıdaki URL’yi ziyaret edin:
http://localhost:4200
Bu URL, Angular uygulamanızın yerel geliştirme sunucusunda yayınlandığı adresi gösterir. Tarayıcınızda bu URL’yi açtığınızda, Angular uygulamanızı görebilir ve geliştirmeye başlayabilirsiniz.
5. Değişiklikleri İzleme ve Canlı Yenileme
ng serve komutu aynı zamanda canlı yenileme (live reload) özelliğini de içerir. Bu özellik, uygulamanızı çalıştırdıktan sonra kaydettiğiniz herhangi bir dosyada yapılan değişiklikleri otomatik olarak algılar ve tarayıcınızı otomatik olarak yeniden yükler. Bu, geliştirme sürecinizi hızlandırır ve değişikliklerinizi anında görebilmenizi sağlar.
Örnek bir ng serve komutu:
ng serve --open
Bu komut, Angular uygulamanızı derler ve yerel sunucuda çalıştırır. Ayrıca, uygulamanızın tarayıcınızda otomatik olarak açılmasını sağlar.
ng serve komutu, Angular uygulamanızı geliştirmek için temel bir araçtır. Bu komutu kullanarak, uygulamanızı kolayca başlatabilir, değişiklikleri izleyebilir ve geliştirme sürecini hızlandırabilirsiniz.
Customizing the development server
Angular CLI’nin sunduğu ng serve komutu, varsayılan olarak Angular uygulamanızı yerel bir geliştirme sunucusunda çalıştırır. Ancak, ihtiyaçlarınıza göre geliştirme sunucusunu özelleştirmeniz gerekebilir. Bu durumda, Angular CLI’nin sağladığı bazı seçenekleri kullanarak geliştirme sunucusunu özelleştirebilirsiniz.
1. Terminali Açın
İlk adım olarak, Angular projesinin kök dizinine gidin ve terminali açın.
2. Geliştirme Sunucusunu Özelleştirme
Geliştirme sunucusunu özelleştirmek için ng serve komutunu kullanırken, aşağıdaki seçeneklerden bir veya daha fazlasını belirleyebilirsiniz:
Örneğin, geliştirme sunucusunu 8080 portunda çalıştırmak ve SSL’i etkinleştirmek için aşağıdaki gibi bir komut kullanabilirsiniz:
ng serve --port 8080 --ssl
Veya, bir proxy yapılandırma dosyasını belirtmek için:
ng serve --proxy-config proxy.conf.json
Bu komutlar, Angular uygulamanızı belirtilen şekilde özelleştirilmiş bir geliştirme sunucusunda başlatacaktır.
3. Proxy Yapılandırma Dosyası Oluşturma (Opsiyonel)
Eğer --proxy-config seçeneğini kullanıyorsanız, bir proxy yapılandırma dosyası oluşturmanız gerekebilir. Bu dosya, geliştirme sunucusuna gelen isteklerin nasıl yönlendirileceğini belirler.
Örnek bir proxy.conf.json dosyası:
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
Bu örnekte, /api yoluna gelen istekler http://localhost:3000 hedefine yönlendirilecektir. secure özelliği false olarak ayarlandığı için SSL kullanılmaz.
Geliştirme sunucusunu özelleştirme, Angular CLI ile Angular uygulamanızı geliştirirken ihtiyaçlarınıza uygun bir ortam sağlar. Bu seçenekleri kullanarak, geliştirme sürecinizi daha etkili hale getirebilir ve projenizi daha iyi şekilde yönetebilirsiniz.
Generating Angular Application Code
Creating new code with schematics
Angular CLI, geliştiricilere özel kod şablonları oluşturmak ve yeniden kullanılabilir bileşenler, servisler, modüller ve diğer yapıları hızlıca oluşturmak için güçlü bir araç olan Schematics’i içerir. Schematics, Angular projelerinizdeki tekrar eden görevleri otomatikleştirmenize ve kendi özel kod şablonlarınızı oluşturmanıza olanak tanır.
1. Yeni Kod Şablonu Oluşturma
İlk olarak, yeni bir kod şablonu oluşturmak için terminal veya komut istemcisini açın ve aşağıdaki komutu çalıştırarak bir yeni Schematics koleksiyonu oluşturun:
ng generate collection my-schematics
Bu komut, my-schematics adında bir yeni Schematics koleksiyonu oluşturur.
2. Şablon Oluşturma
Şimdi, yeni bir kod şablonu oluşturmak için ng generate komutunu kullanabilirsiniz. Örneğin, yeni bir bileşen oluşturmak için:
ng generate my-schematics:component my-component
Bu komut, my-schematics koleksiyonundaki component adındaki bir Schematics’i kullanarak my-component adında bir yeni bileşen oluşturur.
3. Şablonun Uygulanması
Angular CLI, Schematics’i çalıştırdıktan sonra, oluşturulan kod şablonunu proje dosyalarınıza uygular. Yeni bileşen, servis, modül veya başka bir yapı oluşturulduktan sonra, bu dosyaları ve ilgili kodları proje dizinindeki uygun konumlara yerleştirir.
4. Şablonu Özelleştirme (Opsiyonel)
Schematics kullanarak oluşturduğunuz kod şablonlarını özelleştirebilirsiniz. Örneğin, bir bileşen oluştururken bileşenin inline HTML ve CSS dosyaları yerine dış dosyalarda oluşturulmasını istiyorsanız, bunu Schematics’in sağladığı seçeneklerle belirtebilirsiniz.
5. Şablonun Kullanılması
Oluşturduğunuz yeni kod şablonlarını Angular projesinde kullanmak için, terminalde ng generate komutunu ve koleksiyon adını ve şablon adını belirterek kullanabilirsiniz.
Örneğin, my-schematics koleksiyonundaki my-component bileşenini oluşturmak için:
ng generate my-schematics:component my-component
Bu komut, my-schematics koleksiyonundaki component adındaki Schematics’i kullanarak my-component adında bir yeni bileşen oluşturur ve proje dosyalarınıza uygular.
Schematics kullanarak yeni kod oluşturmak, tekrar eden işleri otomatikleştirmenin yanı sıra, proje dosyalarınızın tutarlılığını sağlar ve ekip içinde kod kalitesini artırır. Özelleştirilmiş kod şablonları oluşturarak, Angular projenizin geliştirme sürecini daha verimli hale getirebilirsiniz.
Generating components and modules
Angular CLI, bileşenler ve modüller oluşturmak için hızlı ve etkili bir yol sunar. Bileşenler, kullanıcı arayüzünü oluşturmak için kullanılırken, modüller ise uygulamanın farklı bölümlerini gruplamak için kullanılır.
1. Bileşen Oluşturma
Angular CLI ile yeni bir bileşen oluşturmak için ng generate component komutunu kullanabilirsiniz. Bu komut, bileşen dosyasını oluşturur ve ilgili modül dosyasına bileşeni ekler.
Örneğin, bir bileşen oluşturmak için terminalde şu komutu kullanabilirsiniz:
ng generate component my-component
Bu komut, my-component adında bir bileşen oluşturur. Oluşturulan bileşen dosyaları src/app dizini altında yer alır.
2. Modül Oluşturma
Angular CLI ile yeni bir modül oluşturmak için ng generate module komutunu kullanabilirsiniz. Bu komut, yeni bir modül dosyası oluşturur ve modül dosyasını uygulamanızdaki ilgili yerlere ekler.
Örneğin, bir modül oluşturmak için terminalde şu komutu kullanabilirsiniz:
ng generate module my-module
Bu komut, my-module adında bir modül oluşturur. Oluşturulan modül dosyaları yine src/app dizini altında yer alır.
3. Bileşenleri Modüle Eklemek
Bir bileşeni oluşturduktan sonra, bu bileşeni bir modüle eklemek gerekebilir. Angular CLI otomatik olarak bileşenleri modüllere ekler, ancak bazı durumlarda manuel olarak eklemek gerekebilir.
Bir bileşeni bir modüle eklemek için, öncelikle bileşeni oluşturun:
ng generate component my-component
Ardından, oluşturulan bileşenin modül dosyasını açın (my-component.module.ts) ve bileşeni kullanmak istediğiniz modülü imports dizisine ekleyin:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponentComponent } from './my-component.component';
@NgModule({
declarations: [MyComponentComponent],
imports: [
CommonModule
],
exports: [MyComponentComponent] // Eklenen bileşenin diğer modüller tarafından kullanılabilmesini sağlar
})
export class MyComponentModule { }
Bu adımları izledikten sonra, Angular uygulamanızda yeni bileşenler ve modüller oluşturabilir ve bunları istediğiniz gibi yapılandırabilirsiniz. Bu, Angular CLI’nin sağladığı hızlı ve etkili bir geliştirme deneyimi sağlar.
Generating directives
Angular CLI kullanarak direktifler (directives) oluşturmak oldukça basittir ve Angular uygulamanızda özelleştirilmiş davranışlar eklemenize olanak tanır. Bir direktif, HTML elementlerine özel davranışlar eklemek için kullanılır.
1. Directive Oluşturma
Angular CLI ile yeni bir direktif oluşturmak için ng generate directive komutunu kullanabilirsiniz. Bu komut, direktif dosyasını oluşturur ve ilgili modül dosyasına direktifi ekler.
Örneğin, bir direktif oluşturmak için terminalde şu komutu kullanabilirsiniz:
ng generate directive myDirective
Bu komut, myDirective adında bir direktif oluşturur. Oluşturulan direktif dosyaları src/app dizini altında yer alır.
2. Directive’i Kullanma
Oluşturulan direktifi kullanmak için, direktifin adını kullanarak bir HTML elementine ekleyin. Bu elemente eklenen direktif, belirtilen özel davranışı sağlar.
Örneğin, oluşturulan myDirective direktifini kullanmak için şu şekilde bir HTML kodu yazabilirsiniz:
<p myDirective> Bu bir özel direktif tarafından değiştirildi! </p>
3. Directive’i Özelleştirme (Opsiyonel)
Directive dosyasını açarak direktifi özelleştirebilirsiniz. Angular CLI, oluşturulan direktif dosyasına varsayılan bir davranış ekler, ancak ihtiyaca göre bu davranışı özelleştirebilirsiniz.
Örneğin, bir örneğe bakalım:
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
constructor(private el: ElementRef) {
el.nativeElement.style.color = 'blue'; // Direktife eklenen elementin rengini mavi olarak ayarlar
}
}
Bu örnek, appMyDirective adında bir direktif oluşturur ve bu direktifin eklenmiş olduğu HTML elementinin rengini mavi olarak ayarlar.
Directive oluşturarak, Angular uygulamanızdaki HTML elementlerine özel davranışlar ekleyebilirsiniz. Angular CLI kullanarak bu işlemi hızlı ve etkili bir şekilde yapabilirsiniz.
Generating pipes
Angular CLI, Angular uygulamalarında kullanılacak boruları (pipes) oluşturmak için de kullanılabilir. Borular, veri dönüşümleri ve formatlamaları gibi işlemleri gerçekleştirmek için kullanılır ve uygulamanızın verimliliğini artırır.
1. Pipe Oluşturma
Angular CLI ile yeni bir boru oluşturmak için ng generate pipe komutunu kullanabilirsiniz. Bu komut, boru dosyasını oluşturur ve ilgili modül dosyasına boruyu ekler.
Örneğin, bir boru oluşturmak için terminalde şu komutu kullanabilirsiniz:
ng generate pipe myPipe
Bu komut, myPipe adında bir boru oluşturur. Oluşturulan boru dosyaları src/app dizini altında yer alır.
2. Pipe’i Kullanma
Oluşturulan boruyu kullanmak için, borunun adını kullanarak bir değer boruya iletebilirsiniz. Boru, bu değeri dönüştürecektir ve sonucu kullanabilirsiniz.
Örneğin, oluşturulan myPipe borusunu kullanmak için şu şekilde bir HTML kodu yazabilirsiniz:
<p> {{ value | myPipe }} </p>
Bu örnek, value adında bir değişkeni myPipe boruyla dönüştürür ve sonucu HTML’de görüntüler.
3. Pipe’i Özelleştirme (Opsiyonel)
Boru dosyasını açarak boruyu özelleştirebilirsiniz. Angular CLI, oluşturulan boru dosyasına varsayılan bir dönüşüm ekler, ancak ihtiyaca göre bu dönüşümü özelleştirebilirsiniz.
Örneğin, bir örneğe bakalım:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myPipe'
})
export class MyPipePipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
// Boru dönüşümü burada gerçekleştirilir
return value.toUpperCase(); // Değerin tamamını büyük harfe dönüştürür
}
}
Bu örnek, myPipe adında bir boru oluşturur ve bu borunun dönüşüm fonksiyonunu özelleştirir. Bu dönüşüm fonksiyonu, değeri büyük harfe dönüştürür.
Boru oluşturarak, Angular uygulamanızda veri dönüşümleri ve formatlamaları gibi işlemleri gerçekleştirebilirsiniz. Angular CLI kullanarak bu işlemi hızlı ve etkili bir şekilde yapabilirsiniz.
Generating route guards
Angular CLI ile rota koruyucuları (route guards) oluşturmak, Angular uygulamanızdaki rotaların korunmasını sağlar. Rota koruyucuları, belirli koşulları karşılamayan kullanıcıları rotalara erişimden engelleyen işlevselitelerdir. Örneğin, bir kullanıcının giriş yapmamış olması durumunda belirli bir rotaya erişimi engellemek gibi.
1. Rota Koruyucusu Oluşturma
Angular CLI ile yeni bir rota koruyucusu oluşturmak için ng generate guard komutunu kullanabilirsiniz. Bu komut, koruyucu dosyasını oluşturur ve ilgili modül dosyasına koruyucuyu ekler.
Örneğin, bir rota koruyucusu oluşturmak için terminalde şu komutu kullanabilirsiniz:
ng generate guard auth
Bu komut, auth adında bir rota koruyucusu oluşturur. Oluşturulan koruyucu dosyaları src/app dizini altında yer alır.
2. Koruyucuyu Kullanma
Oluşturulan rota koruyucusunu kullanmak için, rota tanımlarında bu koruyucuyu belirtmeniz gerekir. Rota koruyucusu, rotanın belirli durumlarına karşı kullanılabilir.
Örneğin, oluşturulan auth koruyucusunu kullanmak için şu şekilde bir rota tanımı yapabilirsiniz:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canActivate: [AuthGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Bu örnek, /admin rotasına erişim için AuthGuard adındaki koruyucunun kullanılmasını sağlar. Bu sayede sadece yetkilendirilmiş kullanıcılar /admin rotasına erişebilir.
3. Koruyucuyu Özelleştirme (Opsiyonel)
Koruyucu dosyasını açarak koruyucuyu özelleştirebilirsiniz. Angular CLI, oluşturulan koruyucu dosyasına varsayılan bir davranış ekler, ancak ihtiyaca göre bu davranışı özelleştirebilirsiniz.
Örneğin, bir örneğe bakalım:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
// Yetkilendirme mantığını burada uygulayın
const isLoggedIn = true; // Örnek olarak her zaman giriş yapmış gibi kabul ediyoruz
if (!isLoggedIn) {
// Giriş yapmamışsa ana sayfaya yönlendir
this.router.navigate(['/']);
return false;
}
return true;
}
}
Bu örnekte, AuthGuard adında bir rota koruyucusu oluşturulur ve canActivate yöntemi kullanılarak yetkilendirme mantığı uygulanır. Eğer kullanıcı giriş yapmamışsa, ana sayfaya yönlendirilir.
Rota koruyucuları kullanarak, Angular uygulamanızdaki rotaları koruyabilir ve güvenliğinizi artırabilirsiniz. Angular CLI kullanarak bu işlemi hızlı ve etkili bir şekilde yapabilirsiniz.
Adding libraries using schematics
Angular CLI’nin sunduğu Schematics özelliği, harici kütüphaneleri Angular projenize eklemeyi oldukça kolaylaştırır. Bu özellik, projenize belirli bir kütüphaneyi eklemenin yanı sıra, eklenen kütüphanenin bağımlılıklarını da doğrudan işler.
1. Kütüphane Eklemek İçin Schematics Kullanma
Angular CLI, harici kütüphaneleri eklemek için ng add komutunu kullanır. Bu komut, kütüphanenin projenize eklenmesi için gerekli işlemleri otomatik olarak yapar.
Örneğin, Angular Material kütüphanesini projenize eklemek için terminalde şu komutu kullanabilirsiniz:
ng add @angular/material
Bu komut, @angular/material kütüphanesini projenize ekler.
2. Kütüphane Eklemek İçin Alternatif Yöntemler
Bazı kütüphaneler, Angular CLI tarafından desteklenmeyen özel yüklemeler gerektirebilir. Bu durumda, kütüphane sağlayıcısının belirttiği kurulum talimatlarını izlemeniz gerekir.
Örneğin, bir kütüphanenin Angular CLI desteği olmadığı durumlarda, bu kütüphaneyi NPM üzerinden yükleyebilirsiniz:
npm install library-name
Bu komut, library-name adında bir kütüphaneyi projenize ekler.
3. Kütüphaneyi Kullanma
Kütüphane başarıyla projenize ekledikten sonra, bu kütüphanenin bileşenlerini, hizmetlerini veya diğer özelliklerini projenizde kullanabilirsiniz. Kütüphane sağlayıcısının belirttiği kullanım talimatlarını izlemeniz yeterlidir.
Örneğin, Angular Material kütüphanesini ekledikten sonra, bileşenlerini projenizde kullanmak için ilgili bileşenlerin modül dosyasını projenizin modül dosyasına eklemeniz gerekebilir:
import { MatInputModule } from '@angular/material/input';
@NgModule({
declarations: [
// ...
],
imports: [
// ...
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Bu örnekte, MatInputModule bileşenini projenizin modül dosyasına ekliyoruz.
Angular CLI’nin Schematics özelliği, harici kütüphaneleri projenize eklemeyi oldukça basit hale getirir. Bu özellik sayesinde, eklenen kütüphanelerin bağımlılıkları otomatik olarak çözülür ve projenize entegre edilir. Bu da geliştirme sürecinizi hızlandırır ve projenizin yönetimini kolaylaştırır.
Generating custom library
Angular CLI’nin Schematics özelliği, özel kütüphanelerin oluşturulmasını da kolaylaştırır. Bu özellik sayesinde, Angular projesinden bağımsız olarak yeniden kullanılabilir bileşenler, servisler veya direktifler içeren özel kütüphaneler oluşturabilirsiniz.
1. Kütüphane Oluşturma
Angular CLI ile yeni bir kütüphane oluşturmak için ng generate library komutunu kullanabilirsiniz. Bu komut, kütüphane dosyalarını oluşturur ve ilgili package.json dosyasına kütüphanenin bilgilerini ekler.
Örneğin, bir kütüphane oluşturmak için terminalde şu komutu kullanabilirsiniz:
ng generate library my-library
Bu komut, my-library adında bir kütüphane oluşturur. Oluşturulan kütüphane dosyaları projects/my-library dizini altında yer alır.
2. Kütüphane Kodunu Geliştirme
Oluşturulan kütüphane dosyalarını açarak içeriğini geliştirebilirsiniz. Kütüphane içeriği, Angular bileşenleri, servisler, direktifler veya başka yapılar içerebilir.
Örneğin, bir bileşen oluşturmak için:
ng generate component my-component --project my-library
Bu komut, my-library kütüphanesine my-component adında bir bileşen ekler.
3. Kütüphaneyi Derleme ve Yayınlama
Kütüphaneyi projenizin bir parçası olarak geliştirdikten sonra, kütüphaneyi derleyip yayınlamanız gerekir. Bunun için ng build komutunu kullanabilirsiniz.
ng build my-library
Bu komut, my-library kütüphanesini derler.
Daha sonra, kütüphaneyi NPM’e yayınlamak için npm publish komutunu kullanabilirsiniz.
cd dist/my-library
npm publish
Bu komut, my-library kütüphanesini NPM’e yayınlar.
Angular CLI’nin özel kütüphane oluşturma özelliği, yeniden kullanılabilir bileşenlerin ve servislerin geliştirilmesini ve yayınlanmasını kolaylaştırır. Bu özellik sayesinde, Angular projelerinizdeki ortak yapıları ayrı bir kütüphane olarak yönetebilir ve projeler arasında paylaşabilirsiniz.
Generating services
Angular CLI kullanarak hizmetler (services) oluşturmak oldukça kolaydır. Hizmetler, veri işleme, HTTP istekleri yapma, ortak iş mantığı veya bileşenler arasında veri paylaşımı gibi görevler için kullanılır.
1. Hizmet Oluşturma
Angular CLI ile yeni bir hizmet oluşturmak için ng generate service komutunu kullanabilirsiniz. Bu komut, hizmet dosyasını oluşturur ve ilgili modül dosyasına hizmeti ekler.
Örneğin, bir hizmet oluşturmak için terminalde şu komutu kullanabilirsiniz:
ng generate service my-service
Bu komut, my-service adında bir hizmet oluşturur. Oluşturulan hizmet dosyaları src/app dizini altında yer alır.
2. Hizmeti Kullanma
Oluşturulan hizmeti kullanmak için, hizmetin adını kullanarak hizmeti enjekte etmeniz gerekir. Hizmeti enjekte etmek için constructor içinde hizmetin bir örneğini oluşturabilirsiniz.
Örneğin, oluşturulan my-service hizmetini kullanmak için bir bileşende şu şekilde hizmeti enjekte edebilirsiniz:
import { Component, OnInit } from '@angular/core';
import { MyService } from './my-service.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor(private myService: MyService) { }
ngOnInit(): void {
// Hizmeti kullanarak işlemler yapabilirsiniz
this.myService.doSomething();
}
}
3. Hizmeti Özelleştirme
Hizmet dosyasını açarak hizmeti özelleştirebilirsiniz. Angular CLI, oluşturulan hizmet dosyasına varsayılan bir davranış ekler, ancak ihtiyaca göre bu davranışı özelleştirebilirsiniz.
Örneğin, bir örneğe bakalım:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyService {
constructor() { }
doSomething(): void {
console.log('Something is done by the service.');
}
}
Bu örnekte, MyService adında bir hizmet oluşturulur ve doSomething adında bir metod eklenir. Bu metod, konsola basit bir mesaj yazdırır.
Hizmetler, Angular uygulamanızdaki ortak iş mantığı ve veri işleme görevlerini yönetmenin etkili bir yoludur. Angular CLI kullanarak bu hizmetleri oluşturmak, geliştirme sürecini kolaylaştırır ve kodunuzu daha organize hale getirir.
Building Angular Applications
A build pipeline for an Angular app
Angular uygulamalarınızı inşa etmek için Angular CLI tarafından sağlanan build pipeline, uygulamanızı derler, optimize eder ve dağıtıma hazır hale getirir. Bu build pipeline, uygulamanızı geliştirme ortamından üretim ortamına taşırken bir dizi adımı otomatik olarak gerçekleştirir.
1. TypeScript Kodunun Derlenmesi
Angular uygulamanızın TypeScript kodu, JavaScript’e derlenir. Bu adım, tsc (TypeScript Compiler) aracı tarafından gerçekleştirilir.
2. Uygulamanın Paketlenmesi ve Modüllendirilmesi
Angular uygulamanızın dosyaları, modüller halinde paketlenir ve bir JavaScript dosyasına dönüştürülür. Bu adım, Webpack veya Angular CLI tarafından gerçekleştirilir.
3. Stil Dosyalarının İşlenmesi
CSS, SCSS veya diğer stil dosyaları, birleştirilir, sıkıştırılır ve optimize edilir. Bu adım, genellikle CSS dosyalarının tek bir dosyada birleştirilmesini ve sıkıştırılmasını içerir.
4. Asset Dosyalarının Kopyalanması
Projenizdeki asset dosyaları (örneğin, resimler, fontlar) üretim ortamına kopyalanır. Asset dosyaları, genellikle statik olarak sunulur ve CDN’e yüklenir.
5. Optimizasyonlar
Uygulamanızın boyutunu azaltmak için çeşitli optimizasyonlar yapılır. Bu adımlar arasında kod sıkıştırma (minification), dosya birleştirme (bundling), kod ayrıştırma (tree shaking), önbellekleme ve lazy loading gibi teknikler bulunabilir.
6. Üretim Ortamına Uygulamanın Yayınlanması
Son olarak, derlenmiş ve optimize edilmiş uygulama üretim ortamına dağıtılmak üzere hazır hale getirilir. Bu adımda, yayıncının tercih ettiği bir yöntemle (örneğin, FTP, GitHub Pages, AWS S3) uygulamanın dağıtımı yapılır.
Angular CLI, bu işlemleri otomatik olarak gerçekleştirir ve geliştirici için karmaşık yapılandırmalara gerek kalmadan uygulamanın derlenmesini sağlar. Özellikle ng build --prod komutu, üretim ortamı için optimize edilmiş bir sürümün derlenmesini sağlar.
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
}
}
Bu JSON yapılandırma dosyası, Angular CLI tarafından kullanılan build pipeline’ın yapılandırmasını içerir. Bu yapılandırma, geliştirme ve üretim ortamları için farklı ayarları içerir ve optimize edilmiş bir üretim sürümü oluşturur.
The ng build command
Angular CLI’deki ng build komutu, Angular uygulamanızı derler ve optimize edilmiş bir üretim sürümünü oluşturur. Bu komut, Angular projenizi geliştirme aşamasından üretim ortamına geçirmenin temel adımlarından biridir.
1. Temel Kullanım
ng build komutu varsayılan olarak geliştirme ortamı için bir derleme işlemi gerçekleştirir. Bu, src klasöründeki tüm dosyaları derleyerek dist klasörü altında bir üretim sürümü oluşturur.
ng build
2. Üretim Ortamı İçin Kullanım
ng build komutunun --prod bayrağı, optimize edilmiş bir üretim sürümü oluşturmak için kullanılır. Bu sürüm, kodun sıkıştırılması, dosyaların birleştirilmesi ve diğer optimizasyonlarla birlikte gelir.
ng build --prod
3. Hedef Belirtme
ng build komutu ile hedef belirleyebilirsiniz. Örneğin, belirli bir dil kodlaması için oluşturulmuş olan çeviri dosyaları varsa, bu dosyaların derlenmesini sağlayabilirsiniz.
ng build --configuration=fr
4. Çıktı Yolu Belirleme
Varsayılan olarak, ng build komutu dist klasörü altında bir üretim sürümü oluşturur. Ancak, çıktı yolunu belirlemek için --output-path bayrağını kullanabilirsiniz.
ng build --output-path=custom-output
5. Angular Üzerindeki Konfigürasyonların Kullanımı
ng build komutu, angular.json dosyasındaki yapılandırmayı kullanır. Bu dosyada, derleme sürecinin nasıl yapılandırılacağı belirtilir.
6. Diğer Kullanışlı Bayraklar
Angular CLI’deki ng build komutu, uygulamanızı üretim ortamına hazır hale getirmenin temel bir adımıdır. Bu komut sayesinde uygulamanızı optimize edebilir, hızlandırabilir ve daha güvenli hale getirebilirsiniz.
Configuring different build options
Angular CLI ile farklı derleme seçenekleri yapılandırmak, uygulamanızı çeşitli ortamlarda çalıştırmak veya özelleştirmek için önemlidir. Bu, geliştirme, test ve üretim gibi farklı senaryolarda uygulamanızın davranışını kontrol etmenize olanak tanır. Angular CLI’nin angular.json dosyasında yapılandırma seçenekleri sunar.
1. angular.json Dosyasının Kullanımı
Angular CLI projenizin kök dizininde bulunan angular.json dosyası, derleme seçeneklerini yapılandırmak için kullanılır. Bu dosyada, farklı ortamlar için yapılandırma blokları bulunur.
"architect": {
"build": {
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"development": {
"sourceMap": true,
"optimization": false
}
}
}
}
Yukarıdaki örnek, production ve development olmak üzere iki farklı yapılandırma bloğu içerir. production yapılandırması, üretim ortamı için optimize edilmiş bir derleme sağlar, development yapılandırması ise geliştirme ortamı için daha fazla hata ayıklama ve hızlı derleme sağlar.
2. Farklı Ortamlar için Ayarlar Yapma
Farklı ortamlar için farklı yapılandırmalar yapmak için, angular.json dosyasında configurations altında yeni yapılandırma blokları oluşturabilirsiniz. Bu bloklar, özellikle üretim ve geliştirme ortamları için farklı yapılandırmalara sahip olabilir.
3. Farklı Dosya Yerlerini Belirtme
fileReplacements özelliği, farklı ortamlar için farklı dosya yerlerini belirtmenizi sağlar. Bu özellik, örneğin, geliştirme ve üretim ortamlarında farklı yapılandırma dosyalarını kullanmanızı sağlar.
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
Bu örnekte, environment.ts dosyası üretim ortamında environment.prod.ts dosyası ile değiştirilir.
4. Optimizasyon Ayarları
optimization, sourceMap, extractCss gibi ayarlar, farklı ortamlar için derleme sürecini optimize etmenizi sağlar. Bu ayarlar, üretim ortamında daha fazla optimizasyon yapmak için kullanılabilir.
Angular CLI’nin angular.json dosyası, farklı ortamlar için derleme seçeneklerini yapılandırmak için güçlü bir araçtır. Bu dosya sayesinde, Angular uygulamanızı farklı senaryolar için optimize edebilir ve yönetebilirsiniz.
Setting up build scripts
Angular CLI ile Angular uygulamalarınızın derlenmesi için build script’leri oluşturmak oldukça yaygındır. Bu script’ler, farklı ortamlar için derleme işlemlerini yapılandırmanıza, ek işlemleri otomatikleştirmenize ve uygulamanızı daha etkili bir şekilde yönetmenize olanak tanır.
1. package.json Dosyasında Script’ler Oluşturma
Angular CLI ile oluşturduğunuz projenin kök dizininde bulunan package.json dosyası, projenizin bağımlılıklarını ve script’lerini yönettiğiniz yerdir. Bu dosyada, build işlemi için script’ler oluşturabilirsiniz.
Örneğin, build komutunu ng build --prod ile çağıran bir script oluşturmak için:
"scripts": {
"build": "ng build --prod"
}
Bu script, npm run build komutuyla çalıştırılabilir.
2. Çeşitli Ortamlar İçin Script’ler Oluşturma
Farklı ortamlar için farklı build işlemleri yapılandırabilirsiniz. Örneğin, geliştirme ve üretim ortamları için ayrı ayrı script’ler oluşturabilirsiniz.
"scripts": {
"build:dev": "ng build",
"build:prod": "ng build --prod"
}
Bu script’ler, npm run build:dev ve npm run build:prod komutlarıyla çalıştırılabilir.
3. Ek İşlemler için Script’ler Oluşturma
Build işleminden önce veya sonra bazı ek işlemleri gerçekleştirmek isteyebilirsiniz. Örneğin, build işleminden önce kod stilini kontrol etmek için lint işlemi ekleyebilirsiniz.
"scripts": {
"lint": "ng lint",
"build": "ng build --prod"
}
Bu script’ler, npm run lint ve npm run build komutlarıyla çalıştırılabilir.
4. Birden Fazla Komut İçeren Script’ler Oluşturma
Bazı durumlarda, birden fazla komutu bir arada çalıştırmak isteyebilirsiniz. Bu durumda, script’lerinizi shell komutları kullanarak birleştirebilirsiniz.
"scripts": {
"build:prod": "npm run lint && ng build --prod"
}
Bu script, npm run lint komutunu çalıştırır ve ardından ng build --prod komutunu çalıştırır.
Angular CLI ile build script’leri oluşturmak, projenizi daha etkili bir şekilde yönetmenize olanak tanır. Bu script’ler, farklı ortamlar için derleme işlemlerini yapılandırmanıza, ek işlemleri otomatikleştirmenize ve projenizin geliştirme sürecini kolaylaştırmanıza yardımcı olur.
Deploying with the Angular CLI
Angular CLI’nin ng deploy komutu, Angular uygulamanızı kolayca dağıtmanızı sağlar. Bu komut, Angular uygulamanızı derler ve derlenmiş dosyaları belirli bir dağıtım hedefine (örneğin, GitHub Pages, Firebase Hosting, Netlify) yayınlamanıza olanak tanır.
1. Dağıtım Hedefini Belirleme
Öncelikle, Angular uygulamanızı nereye dağıtmak istediğinizi belirlemeniz gerekir. Angular CLI, çeşitli dağıtım hedeflerini destekler, ancak en yaygın olanları GitHub Pages, Firebase Hosting ve Netlify’dir.
2. Dağıtım Hedefine Ulaşma
Dağıtım hedefinize erişmek için gerekli izinleri almanız ve gerekli yapılandırmaları yapmanız gerekir. Örneğin, GitHub Pages kullanıyorsanız, uygulamanızı GitHub deposuna yayınlamak için bir GitHub Pages sitesi yapılandırmanız gerekir.
3. Angular CLI’nin Deploy Komutunu Kullanma
Dağıtım hedefinizi belirledikten ve yapılandırdıktan sonra, Angular uygulamanızı dağıtmak için ng deploy komutunu kullanabilirsiniz.
Örneğin, GitHub Pages kullanarak Angular uygulamanızı dağıtmak için:
ng deploy --base-href=/my-app/
Bu komut, uygulamanızı derler ve derlenmiş dosyaları belirtilen GitHub Pages hedefine yayınlar. --base-href bayrağı, Angular uygulamanızın kök dizininin belirtildiği bir alt dizini gösterir.
4. Otomatik Dağıtım için Skript Oluşturma
Angular CLI’nin ng deploy komutunu bir skript içine yerleştirerek, süreci otomatikleştirebilirsiniz. Örneğin, package.json dosyanızda bir "deploy" script’i oluşturabilirsiniz:
"scripts": {
"deploy": "ng deploy --base-href=/my-app/"
}
Böylece, npm run deploy komutunu çalıştırarak Angular uygulamanızı hızlı bir şekilde dağıtabilirsiniz.
5. Gelişmiş Konfigürasyon
Angular CLI’nin angular.json dosyasında dağıtım yapılandırmasını özelleştirebilirsiniz. Bu, özellikle farklı ortamlar için farklı yapılandırmalar yapmanız gerektiğinde yararlıdır.
Angular CLI’nin ng deploy komutu, Angular uygulamanızı kolayca dağıtmanızı sağlar ve bu süreci otomatikleştirmenizi sağlar. Bu komut, uygulamanızı derler, derlenmiş dosyaları belirtilen dağıtım hedefine yükler ve uygulamanızın canlıya alınmasını sağlar.
Running Tests
Built-in test runner
Angular CLI, dahili olarak testlerinizi çalıştırmak için bir test çalıştırıcı sağlar. Bu test çalıştırıcı, Karma adında bir test çalıştırıcısı ve Jasmine adında bir test çerçevesi kullanır. Karma, testleri farklı tarayıcılarda çalıştırmak ve sonuçları raporlamak için kullanılırken, Jasmine test yazımı ve yürütme sürecini sağlar.
1. Karma ve Jasmine Hakkında
2. Angular CLI ile Test Çalıştırma
Angular CLI, projenizin kök dizininde bulunan src klasörü altında app klasörü içinde yer alan .spec.ts uzantılı dosyaları otomatik olarak algılar ve bu dosyalardaki Jasmine testlerini çalıştırır.
3. Testleri Çalıştırma
Angular CLI ile testleri çalıştırmak için terminalde aşağıdaki komutu kullanabilirsiniz:
ng test
Bu komut, projedeki tüm testleri derler ve çalıştırır. Testler varsayılan olarak Google Chrome tarayıcısında çalıştırılır ve Karma tarafından sağlanan raporlama özellikleriyle birlikte sonuçlar terminalde görüntülenir.
4. Karma ve Jasmine Ayarları
Angular CLI’nin sağladığı karma.conf.js ve test.ts gibi dosyaları kullanarak, Karma ve Jasmine ayarlarınızı özelleştirebilirsiniz. Bu dosyalar, test çalıştırıcısının davranışını ve Jasmine test çerçevesinin yapılandırmasını kontrol eder.
5. Kod Örnekleri
Örnek bir Jasmine testi:
import { Calculator } from './calculator';
describe('Calculator', () => {
let calculator: Calculator;
beforeEach(() => {
calculator = new Calculator();
});
it('should add two numbers', () => {
const result = calculator.add(2, 3);
expect(result).toEqual(5);
});
it('should subtract two numbers', () => {
const result = calculator.subtract(5, 2);
expect(result).toEqual(3);
});
});
Yukarıdaki örnek, Calculator sınıfının add ve subtract metodlarını test eder.
Angular CLI, Jasmine test çerçevesini ve Karma test çalıştırıcısını kullanarak testlerinizi kolayca çalıştırmanızı ve sonuçları izlemenizi sağlar. Bu, Angular uygulamanızın kalitesini ve güvenilirliğini artırmak için önemli bir araçtır.
The ng test command
Angular CLI’deki ng test komutu, Angular uygulamanızdaki testleri çalıştırmak için kullanılır. Bu komut, Karma test çalıştırıcısını başlatır ve tüm Jasmine test dosyalarını derler, tarayıcılarda çalıştırır ve sonuçları terminalde veya belirtilen bir tarayıcı penceresinde gösterir.
1. Karma Test Çalıştırıcısının Başlatılması
Angular CLI, ng test komutunu çalıştırdığınızda, Karma test çalıştırıcısını başlatır. Bu, testlerin derlenmesi, tarayıcılarda çalıştırılması ve sonuçların izlenmesi için gerekli altyapıyı sağlar.
2. Jasmine Test Dosyalarının Derlenmesi
Angular CLI, src klasörü altında app klasöründe bulunan .spec.ts uzantılı Jasmine test dosyalarını otomatik olarak algılar ve derler. Bu dosyalarda yer alan testler, ng test komutu ile çalıştırılır.
3. Testlerin Çalıştırılması
Karma, derlenen test dosyalarını belirtilen tarayıcılarda çalıştırır. Varsayılan olarak, ng test komutu, testleri Google Chrome tarayıcısında çalıştırır. Ancak, farklı bir tarayıcıda testleri çalıştırmak için seçenekler de mevcuttur.
4. Sonuçların Raporlanması
Karma, testlerin çalıştırılması sırasında her bir testin sonucunu izler. Başarılı, başarısız veya hata veren testlerin sonuçları terminalde veya belirtilen bir tarayıcı penceresinde görüntülenir.
5. Watch Modu
ng test komutunu --watch bayrağıyla birlikte kullanarak, test dosyalarını izlemeye alabilirsiniz. Bu, herhangi bir değişiklik yapıldığında testlerin otomatik olarak yeniden çalıştırılmasını sağlar.
ng test --watch
6. Test Ayarlarının Yapılandırılması
angular.json dosyasında bulunan Karma yapılandırma ayarlarını özelleştirerek, testlerin nasıl çalıştırılacağını ve sonuçların nasıl raporlanacağını kontrol edebilirsiniz.
Angular CLI’nin ng test komutu, Angular uygulamanızdaki testleri kolayca çalıştırmanızı sağlar ve bu süreci otomatikleştirmenize yardımcı olur. Bu komut sayesinde, uygulamanızın kalitesini kontrol etmek ve hata ayıklamak daha da kolay hale gelir.
Test run options
Angular CLI’de test çalıştırma işlemi sırasında çeşitli seçenekler ve bayraklar kullanılabilir. Bu seçenekler, testlerin nasıl çalıştırılacağını, hangi dosyaların dahil edileceğini ve sonuçların nasıl raporlanacağını belirlemek için kullanılır.
1. –watch veya -w
Bu bayrak, test dosyalarını izlemeyi ve herhangi bir değişiklik yapıldığında testleri otomatik olarak yeniden çalıştırmayı sağlar.
ng test --watch
2. –code-coverage veya -cc
Bu bayrak, testlerin kod kapsam raporunu oluşturur. Bu rapor, test edilen kodun ne kadarının kapsandığını gösterir.
ng test --code-coverage
3. –browsers
Bu seçenek, hangi tarayıcılarda testlerin çalıştırılacağını belirlemek için kullanılır. Varsayılan olarak, testler Google Chrome’da çalıştırılır.
ng test --browsers=Chrome,Firefox
4. –progress
Bu bayrak, testlerin ilerleme durumunu göstermek için terminalde bir ilerleme çubuğu görüntüler.
ng test --progress
5. –reporters
Bu seçenek, test sonuçlarının hangi raporlayıcılar tarafından görüntüleneceğini belirler. Örneğin, dots, progress, junit, kjhtml gibi farklı raporlama seçenekleri mevcuttur.
ng test --reporters=junit,dots
6. –include veya –exclude
Bu seçenekler, hangi test dosyalarının dahil edileceğini veya hariç tutulacağını belirler. Belirli test dosyalarını veya test dosyalarını klasörler bazında seçmek için kullanılabilir.
ng test --include=**/*.spec.ts
7. –code-coverage-only veya -cc-only
Bu bayrak, testlerin yalnızca kod kapsam raporunu oluşturmasını sağlar, testleri çalıştırmaz.
ng test --code-coverage-only
Angular CLI’nin test çalıştırma işlemi için birçok seçenek ve bayrak sunar. Bu seçenekler, test sürecini özelleştirmenize ve ihtiyaçlarınıza göre uyarlamak için kullanılabilir. Bu sayede, testlerinizin daha etkili bir şekilde yönetilmesini ve sonuçlarının daha iyi anlaşılmasını sağlayabilirsiniz.
Testing workflow
Angular CLI ile test etme iş akışı, genellikle aşağıdaki adımları içerir:
1. Test Ortamını Kurma
Angular CLI kullanarak yeni bir proje oluşturduğunuzda, test etme ortamı otomatik olarak yapılandırılır ve test dosyaları oluşturulur. Bu dosyalar, src/app klasörü altında bulunan *.spec.ts uzantılı dosyalardır. Jasmine test çerçevesi ve Karma test çalıştırıcısı, varsayılan olarak Angular projelerine dahildir.
2. Test Dosyalarını Yazma
Test etme iş akışının temeli, bileşenlerinizin, servislerinizin ve diğer kodunuzun test dosyalarını oluşturmaktır. Bu dosyalar, ilgili kod dosyalarının yanında yer alır ve aynı isimde ancak .spec.ts uzantılıdır. Örneğin, my-component.component.ts dosyası için karşılık gelen test dosyası my-component.component.spec.ts olacaktır.
3. Testlerin Yazılması
Test dosyalarını oluşturduktan sonra, Jasmine test çerçevesini kullanarak testlerinizi yazabilirsiniz. Jasmine, BDD (Behavior-Driven Development) yaklaşımını takip eder ve describe, it, expect gibi anahtar kelimelerle testlerinizi tanımlamanıza olanak tanır.
Örnek bir test dosyası:
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyComponent } from './my-component.component';
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MyComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create the component', () => {
expect(component).toBeTruthy();
});
it('should render a title', () => {
const compiled = fixture.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to MyComponent');
});
});
4. Testleri Çalıştırma
Testleri çalıştırmak için Angular CLI’nin ng test komutunu kullanabilirsiniz. Bu komut, Karma test çalıştırıcısını başlatır ve test dosyalarını çalıştırır. Test sonuçları terminalde veya belirtilen bir tarayıcı penceresinde görüntülenir.
5. Test Sonuçlarını İnceleme
Testler çalıştırıldıktan sonra, sonuçları değerlendirmek önemlidir. Başarılı testlerin yanı sıra başarısız veya hata veren testlerin nedenlerini belirlemek ve gidermek için sonuçları dikkatlice incelemelisiniz.
Angular CLI ile test etme iş akışı, projenizin kalitesini ve güvenilirliğini sağlamak için önemlidir. Testler, kodunuzun beklenen davranışlarını doğrulamanıza ve uygulamanızın istikrarını sağlamanıza yardımcı olur.
Kendinizi sınırlamayın. Çoğu insan yapabileceklerini düşündükleri şeyler konusunda kendilerini sınırlarlar. Sadece zihninizin gidebildiği kadar ileriye gidebilirsiniz. Neye inanırsanız, onu yapabilirsiniz.
— Mary Kay Ash
Bir sonraki yazıda görüşmek dileğiyle!”
