Angular 7 ile Proje Oluşturmak -1-

Angular

İşlerimin yoğunluğundan ancak vakit bulabildim o yüzden kusura bakmayın. Evet daha önceki makalemde Angular Proje dosyalarını öğrenmiştik. Şimdi öğrendiklerimiz ışığında hangi klasör dosya ne işe yarıyor biliyoruz. Artık bir uygulama oluşturarak üzerinde çalışmaya başlayabiliriz.

Oluşturacağımız uygulamanın kurgusu; Bir todo list şeklinde olsun, hem daha sonra işimize yarayan bir proje olmuş olur.

Aşağıdaki komutu CLI da çalıştırarak bir uygulama başlatalım o zaman:

 ng new TodoListProject

Ardından aşağıdaki komutlarla projeyi ayağa kaldıralım:

cd TodoListProject
ng serve --open

Evet herhangi bir hata yapmadıysak projemiz browser da http://localhost:4200/ de çalışmaya başlamış olmalı ve aşağıdaki ekran görüntüsü gelmiş olmalı.

Angular Project

Şimdi projeyi ayağa kaldırdığımıza göre gerekli paketleri yükleyerek devam edebiliriz.

Proje Code

package.json dosyasını açarak gerekli ayarlamaları yapalım ve yüklenecek paketleri aşağıdaki gibi yükleyelem.

Visual Studio Code içerisinde terminal ekranını açarak aşağıdaki kod bloğunu yapıştıralım:

npm install --dev bootstrap jquery

Problem yaşarsanız tek tek kurulum yapabilirsiniz.

Proje bilgilerini ekleyelim :

Projeyi Build edelim:

ng build
ng build

Eğer herhangi bir hata almazsak Projemizi çalıştıralım:

ng serve --open --port:1453

Her şey sorunsuz bir şekilde gittiyse karşımıza yine Welcome to ekranı ile A harfimiz gelecek 🙂 bir farkla bu kez portumuz 1453 olacak çünkü biz uygulamayı başlat dediğimiz de portu da belirledik,

–port:1453 diyerek.

Şimdi uygulamanın genelinde kullanacağımız style dosyaları varsa uygulamamızın src/scss klasörüne entegre edelim.

Projeyi her makalenin sonunda o anki durumuyla github hesabıma push yapıyor olacağım.

Daha öncede değindiğimiz gibi en çok işimiz olan kısım src/ klasörüne geçebiliriz artık.

En can alıcı nokta olan src/app klasörü;

app

1. App Module

Gelin hep birlikte App Module Dosyasının içeriğini inceleyelim.

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Angular uygulamamız ilk açıldığında çalışan modül dür. Angular’da modül dosyalarının temel görevleri ; Component, Service, Directive, Pipe ve diğer modül dosyalarını bir araya getiren bir yapıdır. Yani ilk çalışma esnasında kendisine tanıtılan diğer component ve servisleri yükler ve kullanılır hale getirilir.

2. App.component.ts

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘TodoListProject’;
}

Selector: Componentimizi istediğimiz Html dosyasında çağırabileceğimiz seçicidir.

TemplateUrl: Componentimizin html dosyasının yolunu belirtir.

StyleUrls: Componentimizin stillerinin bulunduğu dosyadır.

“title = ‘HelloApp” olarak gördüğünüz ise component html içerisinde kullanabileceğimiz global değişkenimizdir. TypeScript *.ts dosyasının fonksiyonları içerisinde “this.title” yazarak ulaşabiliriz.

3. App.component.html

app.component.html

app.component.html içerisinde yazılan “{{ title }}” şu anlama gelir:

Çift süslü parantez bize html dosyası içerisinde Angular kodu yazmamıza olanak sağlar. “title” ile de ts dosyamızda tanımlamış olduğumuz global değişkenimizi Angular bizim için çağırarak ekrana HelloApp yazdırmış.

4. index.html

src/index.html

src/index.html dosyamızı inceleyelim html kodları arasında yazılmış olan bu : “<app-root></app-root>” kod parçacığı bize şunu söyler ; app.componentini çağırıyorum selector yardımıyla. Burada gördüğümüz “app-root” app.component.ts dosyanızın selectoru dür.

Makalemi okuduğunuz için teşekkür ediyorum. Başka makalede görüşmek üzere.

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir