Açısal bir bileşen ile modül arasındaki fark nedir


186

Videoları izledim ve makaleler okudum ama bu özel makale beni çok karıştırıyor, makalenin başında diyor

Açısal uygulama modüler yapı ile uyumludur. Açısal uygulamalar, her biri tek amaç için ayrılmış birçok modül içerir. Genellikle modül, Açısal uygulamalarınızı çalıştırmak için diğer modüllerle entegre edilmiş uyumlu bir kod grubudur.

Bir modül, kodundan bazı sınıfları, işlevleri ve değerleri dışa aktarır. Bileşen, Açısal bir temel bloktur ve uygulamanızı birden fazla bileşen oluşturacaktır.

Bir modül başka bir modül için bir kütüphane olabilir. Örneğin, birincil Açısal kitaplık modülü olan açısal2 / çekirdek kitaplığı başka bir bileşen tarafından içe aktarılır.

Değiştirilebilir şartlar mı? Bir bileşen bir modül mü? Ama viceversa değil mi?

Yanıtlar:


246

Bileşenler kontrol görünümleri (html). Ayrıca, uygulamanıza işlevsellik kazandırmak için diğer bileşenlerle ve hizmetlerle iletişim kurarlar.

Modüller bir veya daha fazla bileşenden oluşur. Herhangi bir html'yi kontrol etmezler. Modülleriniz, hangi bileşenlerin diğer modüllere ait bileşenler tarafından kullanılabileceğini , hangi sınıfların bağımlılık enjektörü tarafından enjekte edileceğini ve hangi bileşenin önyükleneceğini bildirir. Modüller, uygulamanıza modülerlik getirmek için bileşenlerinizi yönetmenizi sağlar.


190

Cevap vermek için çok geç, ama Angular ile yeni başlayanların kim olduğunu anlamanın kolay olacağını düşünüyorum. Sunumum sırasında verdiğim örneklerden biri aşağıdadır.

Bir bina olarak açısal Uygulamanızı düşünün. Bir binanın içinde Nbirkaç daire olabilir. Bir daire modül olarak kabul edilir. Bir Daire daha sonra Nbileşenler adında bir Açısal uygulamanın yapı taşlarına karşılık gelen sayıda odaya sahip olabilir .

Şimdi her dairede (Modül) `dairelerde ve binalarda daha büyük hareket sağlamak için odalar (Bileşenler), asansörler (Hizmetler), bilgi taşımak ve dairelerde yararlı hale getirmek için teller (Borular) olacaktır.

Ayrıca tüm bina sakinleri tarafından paylaşılan yüzme havuzu, tenis kortu gibi yerlere de sahip olacaksınız. Dolayısıyla bunlar SharedModule içinde bileşenler olarak düşünülebilir.

Temel olarak, fark aşağıdaki gibidir,

Modül ve Bileşen arasındaki önemli farkları gösteren tablo

Bir Açısal uygulamanın yapı taşlarını anlamak için slaytlarımı takip edin

İşte benim oturumum Building Blocks of Angular for beginners


71

resim açıklamasını buraya girin

En Basit Açıklama:

Modül , Bileşen, Servis, Boru adı verilen bir veya daha fazla küçük kap içeren büyük bir kap gibidir

Bir Bileşen şunları içerir:

  • HTML şablonu veya HTML kodu

  • Kodu (typescript)

  • Hizmet: Bileşenler tarafından paylaşılan yeniden kullanılabilir bir koddur, böylece kodun yeniden yazılması gerekmez

  • Boru: Verileri girdi olarak alır ve istenen çıktıya dönüştürür

.


2
Bütün bunlar için deli değil. Evet, bileşeniniz bir hizmet kullanacak, ancak hizmet modülde, sağlayıcılar dizisinde belirtilmelidir. Şemanız bunu göstermiyor.
Scott

Bir bileşene bir alt modül ve bu modüle birkaç bileşen ekleyebilir miyim?
Satrughna

39

Açısal Bileşen

Bir bileşen , bir Açısal uygulamanın temel yapı taşlarından biridir. Bir uygulama birden fazla bileşene sahip olabilir. Normal bir uygulamada, bileşen HTML görünümü sayfası sınıf dosyası, HTML sayfasının davranışını kontrol eden bir sınıf dosyası ve HTML görünümünüzü biçimlendirmek için CSS / scss dosyası içerir. Bir bileşen, modülün @Componentparçası olan dekoratör kullanılarak oluşturulabilir @angular/core.

import { Component } from '@angular/core';

ve bir bileşen oluşturmak için

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

Bir bileşen veya açısal uygulama oluşturmak için öğretici burada

Açısal Modül

Bir açısal modülü gibi açısal temel yapı taşlarından ayarlanır bileşeni , direktifler , hizmetler vb bir uygulama birden fazla modülü olabilir.

@NgModuleDekoratör kullanılarak bir modül oluşturulabilir .

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

14

Açısal 2'deki bir modül, bileşenlerden, direktiflerden, servislerden vb. Modüllerin mantıksal kod parçalarına bölünmesi uygulaması. Her modül tek bir görev gerçekleştirir.

Açısal 2'deki bileşenler, görüntülemek istediğiniz sayfa için mantığınızı yazdığınız sınıflardır. Bileşenler görünümü kontrol eder (html). Bileşenler diğer bileşenler ve hizmetlerle iletişim kurar.


10

https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LBvB_WpCSzgVF0c4R9W%2F-LBvCVC22B-3Ls3_nyuC%2Fangular-modules.jpg?alt=media&token= 624c03ca-e24f-457d-8aa7-591d159e573c

Bir resim bin kelime değerinde bir olup !

Açısal kavram çok basittir. > Modülleri - "tuğla" ile bir uygulama oluşturmak için öneriyoruz .

Bu kavram, kodu daha iyi yapılandırmayı ve yeniden kullanım ve paylaşımı kolaylaştırmayı mümkün kılar.

Açısal modülleri ES2015 / TypeScript modülleriyle karıştırmamaya dikkat edin.

Açısal modül ile ilgili olarak, aşağıdakiler için bir mekanizmadır:

1- grup bileşenleri (aynı zamanda hizmetler, direktifler, borular vb.)

2- bağımlılıklarını tanımlar

3- Görünürlüklerini tanımlar.

Açısal modül basitçe bir sınıf (genellikle boş) ve NgModule dekoratörü ile tanımlanır.


5

Bileşen the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).

Modüller, basically group the related components, services togetherböylece daha sonra bağımsız olarak çalışabilen işlevsellik parçalarına sahip olabilirsiniz. Örneğin, bir uygulama, özellikler için, uygulamanızın gösterge tablosu gibi belirli bir özelliğine yönelik bileşenleri gruplandırmak için, başka bir uygulamanın içinde kolayca alıp kullanabileceğiniz modüllere sahip olabilir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.