تطوير تطبيقات الويب باستخدام Angular


الدرس: الهيكل مع المكونات


الصفحة السابقة

جهز المشروع


أولاً ، قم بإنشاء مشروع جديد ستعمل عليه خلال الفصول التالية. من سطر الأوامر ، انتقل إلى المجلد الذي ستنشأ فيه المشروع واكتب الأمر التالي:

ng new mon-projet-angular --style=scss --skip-tests=true
تنشئ العلامة الأولى (عنصر الأمر الذي يتبع شرطة مزدوجة -) ملفات   .scss  للأنماط بدلاً من الملفات   .css  . العلم الثاني يلغي إنشاء ملفات الاختبار.
تقع اختبارات الوحدة خارج نطاق هذه الدورة (يمكننا عمل دورة كاملة!) ، ولكن هناك الكثير   من  الموارد عبر الإنترنت التي تسمح لك بفهم مفهوم اختبار الوحدة إذا كنت ترغب في معرفة المزيد.
الآن يمكنك فتح المجلد   mon-projet-angular  من المحرر الخاص بك.
قبل الغوص في المجلدات المختلفة ، ستقوم بتنفيذ أمر لتثبيت Bootstrap في مشروعك. من المجلد   mon-projet-angular ، مع سطر الأوامر ، اكتب:

npm install bootstrap@3.3.7 –save
سيقوم هذا الأمر بتنزيل Bootstrap ودمجه في package.json المشروع. لديك خطوة أخيرة لدمجها في مشروعك. افتح الملف angular.json في المجلد المصدر لمشروعك. في "architect/build/options" ، قم بتعديل الصفيف styles على النحو التالي:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.scss"
]
يمكنك الآن بدء تشغيل خادم التطوير المحلي (سيكون عليك قطعه باستخدام Ctrl-C وإعادة تشغيله إذا كان قيد التشغيل بالفعل حتى تصبح التغييرات سارية المفعول) :

ng serve
بمجرد تجميع المشروع ، افتح المستعرض الخاص بك   localhost:4200  وسترى التطبيق كما تم إنشاؤه بواسطة CLI ، مع تطبيق أنماط Bootstrap . يمكنك ترك خادم التطوير يعمل في الخلفية. في كل مرة تقوم فيها بحفظ التغييرات على المشروع ، تقوم واجهة سطر الأوامر (CLI) بتحديث الخادم: ليست هناك حاجة لإعادة تشغيله بنفسك في كل مرة تقوم بتغييره.

هيكل مكونات تطبيق Angular


المكونات هي المكونات الأساسية لتطبيق Angular التطبيق عبارة عن هيكل شجرة مكون من عدة مكونات.
تخيل صفحة الويب التالية:
Angular web site
  بادئ ذي بدء ، لدينا AppComponent  المكون الرئيسي لدينا: سيتم تداخل جميع المكونات الأخرى لتطبيقنا أو " nested " فيه.
بالنسبة لهذا الهيكل ، يمكننا أن نتخيل مكونًا لشريط القائمة ، وآخر لجزء المحتوى وآخر لقائمة القائمة على اليمين. لا توجد قاعدة ذهبية: سأوضح لك في الفصول التالية كيفية التفكير في بنيتك من أجل العثور على الفصل الافضل بين المكونات .

اكتشف بنية الكود


ينشئ CLI عددًا كبيرًا من الملفات عند إنشاء تطبيق جديد.   يتم إنشاء الملف  e2e للاختبارات الشاملة ، وهو موضوع لن أقوم بمناقشته في هذه الدورة ولكنك ستجد موارد بسهولة عبر الإنترنت . ثم node_modules   يحتوي المجلد   على كل التبعيات الخاصة بالتطبيق الخاص بك: على سبيل المثال ملفات Angular و TypeScript المصدر.
المجلد الذي يهمك بشكل رئيسي هو المجلد   src ، حيث ستجد جميع الملفات المصدر لتطبيقك.
للبدء في فهم بنية تطبيق Angular ، افتح   index.html  في المحرر الخاص بك:

	<!doctype html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>MonProjetAngular</title>
		<base href="/">
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/x-icon" href="favicon.ico">
	</head>
	<body>
		<app-root></app-root>
	</body>
	</html>
	
كما ترى ، بدلاً من رؤية كل المحتوى الذي نراه في المتصفح ، لا توجد سوى هذه العلامة الفارغة <app-root> : إنها علامة Angular . لمعرفة المزيد ، افتح المجلد app :
Angular web site
يحتوي هذا المجلد على الوحدة الرئيسية للتطبيق والملفات الثلاثة للمكون الرئيسي   AppComponent  : القالب الخاص به بتنسيق HTML ، وورقة الأنماط الخاصة به في SCSS ، وملف TypeScript الخاص به ، والذي سيحتوي على منطقه.  
افتح الملف أولاً   app.component.html  :


	<!--The content below is only a placeholder and can be replaced.-->
	<div style="text-align:center">
	  <h1>
		Welcome to { { title }}!
	  </h1>
	  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
	</div>
	<h2>Here are some links to help you start: </h2>
	<ul>
	  <li>
		<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
	  </li>
	  <li>
		<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
	  </li>
	  <li>
		<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
	  </li>
	</ul>
	
هنا ترى كود HTML المطابق لما تراه في متصفحك.
فكيف يفعل Angular لإدخال هذا الكود في علامة <app-root>؟
ابحث الآن في الملف   app.component.ts  :

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

	@Component({
	  selector: 'app-root',
	  templateUrl: './app.component.html',
	  styleUrls: ['./app.component.scss']
	})
	export class AppComponent {
	  title = 'app';
	}
	
هنا ، داخل الديكور @Component() ، تجد شيئًا يحتوي على العناصر التالية:
  • selector  : هذا هو الاسم الذي سنستخدمه كعلامة HTML لعرض هذا المكون ، كما رأيت مع   <app-root>  . يجب أن يكون هذا الاسم فريدًا ويجب ألا يكون اسمًا محجوزًا لنوع HTML   
      ،   <body>   إلخ. لذلك سنستخدم غالبًا بادئة مثل   app  ، على سبيل المثال ؛
  • templateUrl  : مسار كود HTML لإدخاله ؛
  • styleUrls  : صفيف يحتوي على مسار واحد أو أكثر إلى أوراق الأنماط المتعلقة بهذا المكون ؛
عندما يصادف Angular العلامة   <app-root>  في مستند HTML ، فإنه يعلم أنه يجب استبدال المحتوى بمحتوى القالب   app.component.html ، من خلال تطبيق الأنماط    app.component.scss  ، وكلها تدار بواسطة منطق الملف   app.component.ts  . سنرى هذه التفاعلات بمزيد من التفصيل في الفصول التالية. كاختبار أول، وأنا أقترح عليك تعديل متغير   title  في    app.component.ts ، حفظ الملف، والنظر في النتيجة في المتصفح الخاص بك.

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

	@Component({
	  selector: 'app-root',
	  templateUrl: './app.component.html',
	  styleUrls: ['./app.component.scss']
	})
	export class AppComponent {
	  title = 'my awesome app';
	}
	

قم بإنشاء مكون


ستقوم الآن بإنشاء مكون جديد باستخدام Angular CLI . من المجلد الرئيسي لمشروعك ، اكتب الأمر التالي:

	ng generate component mon-premier
	
Angular web site
كما سترى ، أنشأ CLI مجلدًا فرعيًا جديدًا   mon-premier  وأنشأت ملف قالب وورقة أنماط وملف مكون وملف مواصفات هناك: هذا ملف اختبار يمكنك حذفه ، لأنك لن تستخدمه في هذه الدورة.
يحذرنا CLI أيضًا من أنه قام بتحديث الملف   app.module.ts  : افتحه الآن لمعرفة ما هو:

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


	import { AppComponent } from './app.component';
	import { MonPremierComponent } from './mon-premier/mon-premier.component';


	@NgModule({
	  declarations: [
		AppComponent,
		MonPremierComponent
	  ],
	  imports: [
		BrowserModule
	  ],
	  providers: [],
	  bootstrap: [AppComponent]
	})
	export class AppModule { }
	
تمت إضافة CLI   MonPremierComponent  إلى صفيف   declarations  الوحدة النمطية الخاصة بك. وأضاف أيضًا بيان الاستيراد في أعلى الملف. هذه خطوات ضرورية لتتمكن من استخدام المكون الخاص بك داخل تطبيق Angular الخاص بك.
الآن انظر إلى الملف   <mon-premier class="component ts">  :

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

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

	  constructor() { }

	  ngOnInit() {
	  }

	}
	
سوف تجد أن CLI خلقت محدد:   app-mon-premier  . حتى نتمكن من استخدام هذا المحدد في الكود لإدراج هذا المكون.
ارجع إلى   app.component.html  وقم بتعديله كما يلي:

	<div style="text-align:center">
	  <h1>
		Welcome to { { title }} !
	  </h1>
	</div>
	<app-mon-premier></app-mon-premier>
	
في متصفحك ، سترى نفس العنوان كما كان من قبل ، وفي السطر الثاني ، سيظهر النص "my-first works" . هذا هو النص الافتراضي الذي تم إنشاؤه بواسطة CLI والذي ستجده في mon-premier.component.html :

	<p>
	  mon-premier works!
	</p>
	
تهانينا ، لقد قمت بإنشاء مكون Angular الأول الخاص بك!