এঙ্গুলার

ডেভসংকেত

এঙ্গুলার হচ্ছে টাইপস্ক্রিপ্ট ভিত্তিক ওপেন সোর্স ফ্রন্ট-এন্ড ওয়েব ফ্রেমওয়ার্ক । ২০১৬ সালে গুগলের AngularJS টিম আবার নতুন করে এই Angular Framework ডেভেলপ করেন ।

প্রাথমিক কমান্ডসমূহ

গ্লোবালি Angular CLI ইন্সটল করা

npm install -g @angular/cli

লোকালি Angular CLI ইন্সটল করা

npm install @angular/cli

নতুন আঙ্গুলার অ্যাপ তৈরি করা

ng new <app-name>

আঙ্গুলার অ্যাপ রান করা

ng serve

আঙ্গুলার অ্যাপলিকেশন কম্পাইল করা

ng build

আঙ্গুলার Unit tests রান করা

ng test

নতুন Component তৈরি করা

ng generate component <component-name>

প্রাথমিক কমান্ডসমূহ

নতুন Service তৈরি করা

ng generate service <service-name>

নতুন Directive তৈরি করা

ng generate directive <directive-name>

নতুন মডিউল তৈরি করা

ng generate module <module-name>

নতুন Pipe তৈরি করা

ng generate pipe <pipe-name>

ক্রমানুসারে কম্পোনেন্ট লাইফসাইকেল হুক

১। কম্পোনেন্টের সাথে বাইন্ড করা ডেটার কোন পরিবর্তন হলে, এই মেথম কল হয়

ngOnChanges()

২। কম্পোনেন্ট initialize হয়, শুধু একবারই কল হয় লাইফসাইকেলে

ngOnInit()

৩। কাসটম চেঞ্জ ডিটেকশনের জন্য কল হয়, প্রতিবার এই মেথম কলের পরেই ngOnChanges() কল হয়

ngDoCheck()

৪। কম্পোনেন্টের এক্সটার্নাল কন্টেন্টগুলো কম্পোনেন্টে এ নিয়ে আসার পর এই মেথম কল হয় । @ContentChildren, @ContentChild সেট হয় এই হুক কল হওয়ার আগেই ।

ngAfterContentInit()

৫। কম্পোনেন্ট এবং এর চাইল্ড কম্পোনেন্টে প্রতিবার চেঞ্জ ডিটেক্টশনের পরেই কল হয়

ngAfterContentChecked()

৬। DOM ইন্টারপোলেশন হয়, @ViewChild কুয়েরিলিস্ট আপডেট হয়, এর পর এই হুক কল হয় ।

ngAfterViewInit()

৭। প্রতিবার আঙ্গুলার চেঞ্জ ডেটেকশন রান করার পরেই এই হুক কল হয় ।

ngAfterViewChecked()

ক্রমানুসারে কম্পোনেন্ট লাইফসাইকেল হুক

৮। কম্পোনেন্ট বা ডিরেকটিভ ডিস্ট্রোয় হওয়ার আগে কল হয় ।

ngOnDestroy()

কম্পোনেন্ট এর মধ্যে ডেটা শেয়ার

প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো -

প্যারেন্টে - 
<child [myData]=''></child> ,

 চাইল্ডে -
 @Input() myData;

চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানো -

প্যারেন্টে - 
<child (getData)='handleData($event)'></child> ,
	 handlaData(myData) {
		//do something with 'myData' from child 
	}

 চাইল্ডে -
 @Output() getData;
	 this.getData.emit(<some_data_for_passing>)

প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে "কন্টেন্ট" পাঠানো -

প্যারেন্টে - 
<child>
	<p>This content need to show</p>
</child> ,

চাইল্ডে html -
 <div>
	...
	<ng-content></ng-content>
	...
 </div> 

এই চিটশিটে কন্ট্রিবিউট করেছেনঃ

  • mhimon

    Mahbub Hasan Imon

    username/mhimon

  • imrezwan

    rezwan2525

    username/imrezwan

ডেভসংকেত

বাংলা চিটশিটের ভান্ডার

devsonket.com

প্রিন্ট করুন