Angular Material Tutorial - 1 - Introduction

Codevolution

18 Feb 201902:41

Summary

TLDRمرحبًا، أنا فيشواس و Bienvenido إلى سلسلة دروس جديدة حول Angular Material. في هذا الفيديو المقدمة، سنناقش ما هو Angular Material، المتطلبات الأساسية لهذه السلسلة، وهيكل الدورة التدريبية. Angular Material هو مكتبة مكونات واجهة المستخدم التي توفر لنا الأدوات لبناء واجهات المستخدم الرائعة بسرعة. إنه أيضًا تصنيف لتصميم ماتريال من Google. الهدف هنا هو تعلم كيفية استخدام المكتبة وبناء واجهات مستخدم نظيفة ورائعة. قبل البدء، دعونا ننظر بشكل سريع إلى المتطلبات الأساسية: HTML، CSS، و JavaScript. بالإضافة إلى معرفة بسيطة بـ Angular. إذا كنت تشعر بتعب، لا تنس الاطلاع على تutorials على القناة الخاصة بي. الدورة ستبدأ بتعلم كيفية إضافة Angular Material إلى تطبيق Angular، ثم نناقش الطباعة، وننظر إلى العناصر المختلفة التي تشكل المكتبة، التي تشمل النقرات والمؤشرات، التنقل و التحكم، الحوارات والنماذج، والجداول. سنغطي العناصر الهامة، وسنتعلم كيفية استخدام مكونات Angular Material لبناء تطبيقات Angular.

Takeaways

📚 ت绍ろ Angular Material هو مكتبة العناصر الرسومية توفر العناصر لبناء واجهات المستخدم الرائعة بسرعة.
🌟 Angular Material هي تثبيت لمواصفات تصميم Google Material Design.
🛠️ الهدف من هذه السلسلة هي التعلم كيفية استخدام العناصر المكتبة لبناء واجهات مستخدم نظيفة وエレ강ة.
📝 المتطلبات الأساسية لتعلم Angular Material هي المعرفة بالHTML, CSS, و JavaScript.
🧠 يجب أن يكون لديك بعض المعرفة في Angular، ليست بالضرورة تخصص.
🔍 إذا كنت تشعر بالارتجاع، اتبع تutorials على القناة لتعزيز مهاراتك في Angular.
🆕 النسخة الأساسية لAngular و Angular Material التي تم ذكرها في هذا التسجيل هي النسخة السبعة.
🚀 ما ستتعلمه في هذه السلسلة سيظل صالحًا حتى مع الإصدارات المستقبلية.
📊 سنتعلم في هذه السلسلة كيفية إضافة Angular Material إلى تطبيق Angular.
🏷️ سنناقش في السلسلة عن الطباعة في Angular، و然后我们将查看图书馆的不同组件.
🔎 ستكون العناصر المكتبة مجمعة في ستة أقسام رئيسية: أزرار ومؤشرات، التنقل وتنظيم التخطيط، التحكمات، النوافذ المنبثقة والجداول البيانات.
🎯 بحلول نهاية السلسلة، ستكون لديك فهم جيد لعمل العناصر الفردية في Angular Material ويمكنك استخدام ذلك المعرفة لبناء تطبيقات Angular تناسب متطلباتك.

Q & A

Angular Material 是什么？
-Angular Material 是一个 UI 组件库，它提供了构建出色用户界面的组件，并且是 Google 材料设计规范的一个实现。
这个教程系列的主要目标是什么？
-这个教程系列的主要目标是学习如何使用 Angular Material 库中的组件来构建干净、优雅的用户界面。
学习 Angular Material 需要哪些先决条件？
-学习 Angular Material 需要具备 HTML、CSS 和 JavaScript 的基础知识，此外还需要对 Angular 有一定的了解。
如果 Angular 知识有些生疏，应该如何准备？
-如果 Angular 知识有些生疏，可以通过观看教程者的频道上的 Angular 教程来复习和准备。
目前 Angular 和 Angular Material 的主要版本是什么？
-截至录制此教程时，Angular 和 Angular Material 的主要版本是 7。
课程将如何进行？
-课程将首先学习如何将 Angular Material 添加到 Angular 应用程序中，然后讨论排版，接着会查看构成库的不同组件，这些组件分为六个主要类别。
Angular Material 组件分为哪六大类别？
-Angular Material 组件分为按钮和指示器、导航、布局、表单控件、弹出窗口和对话框以及数据表。
在本教程系列结束时，学习者将获得哪些知识？
-学习者将对 Angular Material 组件的个体工作方式有一个良好的理解，并可以使用这些知识构建适合自己需求的 Angular 应用程序。
Angular Material 的设计灵感来自哪里？
-Angular Material 的设计灵感来自于谷歌的材料设计。
构建的应用程序将遵循哪些现代 Web 设计原则？
-构建的应用程序将遵循浏览器可移植性、设备独立性和优雅降级等现代 Web 设计原则。
在继续学习本教程之前，需要了解哪些技术？
-在继续学习本教程之前，您应该对 Angular JS、HTML、CSS、JavaScript、文档对象模型 (DOM) 有基本的了解。

Outlines

00:00

📚 Introduction to Angular Material Tutorial Series

This paragraph introduces the tutorial series on Angular Material, presented by Vishwas. It sets the stage for the audience by explaining what Angular Material is—a UI component library for building user interfaces based on Google's Material Design specification. The paragraph also outlines the prerequisites for the course, which include basic knowledge of HTML, CSS, JavaScript, and Angular. Vishwas encourages viewers to refresh their Angular knowledge through tutorials on his channel if needed. The current major version of Angular and Angular Material is mentioned as seven, with a note that the course content will remain relevant despite potential minor updates in future releases. The structure of the course is briefly described, highlighting that it will cover adding Angular Material to an application, typography, and key components categorized into six major sections.

Mindmap

Keywords

💡Angular Material

Angular Material هو مكتبة مكونات واجهة المستخدم الرسومية (UI) للغة برمجة Angular. توفر المكتبة مكونات لبناء واجهات المستخدم الرسومية المتميزة بسرعة وسهولة. تعتمد هذه المكتبة على مبادئ تصميم ماتريال من Google، مما يضمن تناسب التصميم مع التطبيقات الأخرى التي تستخدم ماتريال ديزن. الاستخدام: في السكريبت، يستخدم المقدم المدرسي Angular Material作为一个重要的UI组件库，旨在教授 المستخدمين كيفية استخدام هذه المكتبة لإنشاء واجهات مستخدم جذابة وبسيطة.

💡UI components

مكونات واجهة المستخدم (UI) هي العناصر الأساسية التي تشكل واجهة المستخدم للتطبيقات. تشمل العناصر الأساسية للواجهة المستخدم الزر، القوائم، القوائم ال下拉، القوائم ال事業ية، والقوائم الاختيارات المتعددة والقوائم ال事業ية القابلة للبحث وغيرها. الاستخدام: يشير المقدم المدرسي إلى أن Angular Material يوفر مكونات واجهة المستخدم الرسومية لبناء واجهات مستخدم رائعة بسرعة، مما يشير إلى أن المكونات الأساسية للواجهة المستخدم هي المفتاح في هذه المكتبة.

💡Google's Material Design

تصميم ماتريال من Google هو نمط تصميم واجهة المستخدم الرسومية يعتمد على التصميم البسيط والواضح والفعال. يتضمن التصميم الuse of flat, 2D elements, clean lines, and bold, bright colors to create a modern and minimalistic look. الاستخدام: يشير المقدم المدرسي إلى أن Angular Material هو تreysan لتطبيق مبادئ تصميم ماتريال، مما يعني أن التطبيقات التي تقوم باستخدام هذه المكتبة ستكون تتوافق مع مفاهيم تصميم ماتريال وستظهر بشكل وهمي وواضح.

💡HTML

HTML هو لغة الويب الأساسية المستخدمة لإنشاء صفحات الويب والمحتوى الرسومي. تتكون HTML من العناصر الأساسية التي تحدد الهيكلة والمحتوى للصفحات الإلكترونية. الاستخدام: في السكريبت، يشير المقدم المدرسي إلى أن المعرفة الأساسية بلغة HTML ضرورية لفهم واستخدام Angular Material، حيث أن HTML هي البنية الأساسية لأي واجهة مستخدم.

💡CSS

CSS هو لغة الويب التي تستخدم لتصميم واجهات المستخدم والتحكم في التصميم والتخطيط. تتيح CSS للمستخدمين التحكم في الألوان وال糊ص والحجم والتخطيط والعناصر الأخرى التي تؤثر على مظهر الصفحات الإلكترونية. الاستخدام: يشير المقدم المدرسي إلى أن المعرفة الأساسية بلغة CSS ضرورية لفهم واستخدام Angular Material، حيث أن CSS هي الوسيلة الأساسية التي تتيح للمستخدمين تخصيص التصميم والتخطيط للواجهات المستخدم التي تقوم بإنشاءها.

💡JavaScript

JavaScript هي لغة البرمجة التي تستخدم لجعل الصفحات الإلكترونية تفاعلية. تتيح JavaScript للمستخدمين إنشاء تطبيقات وواجهات مستخدم مبتكرة ومبتكرة. الاستخدام: في السكريبت، يشير المقدم المدرسي إلى أن المعرفة الأساسية بلغة JavaScript ضرورية لفهم واستخدام Angular Material، حيث أن JavaScript هي اللغة الأساسية التي تتيح للمستخدمين استخدام وتطوير ال_components_ المتاحة في هذه المكتبة.

💡Angular

Angular هو إطار عمل لغة الويب الأساسية لإنشاء تطبيقات الويب. يتضمن Angular مجموعة من الأدوات والlibraries التي تساعدك على إنشاء تطبيقات الويب القوية والقابلة للتوسع. الاستخدام: يشير المقدم المدرسي إلى أن المعرفة الأساسية بAngular ضرورية لفهم واستخدام Angular Material، حيث أن Angular هو ال إطار الأساسية لهذه المكتبة.

💡Course Structure

هيكلة الدرس هي التنظيم الأساسية للمحتوى الدراسية. تتضمن الهيكلة الدرس التخطيط المنطقي للدروس وال_modules_ وال单元ات الدراسية والمهام الدراسية. الاستخدام: يشير المقدم المدرسي إلى الهيكلة الدراسية للسلسلة، حيث سيتم البدء بإضافة Angular Material إلى تطبيق Angular، ثم التركيز على الطباعة، والانتقال إلى ال_components_ الأساسية للمكتبة.

💡Typography

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

💡Components

الكونات هي العناصر الأساسية التي تشكل واجهة المستخدم. تشمل الكونات الزر، القوائم، القوائم ال下拉، القوائم ال事業ية، والقوائم الاختيارات المتعددة والقوائم ال事業ية القابلة للبحث وغيرها. الاستخدام: يشير المقدم المدرسي إلى التركيز على الكونات الأساسية للمكتبة في السلسلة، حيث سيتم التركيز على الكونات الأساسية التي تقع ضمن الفئات السادسة: الزر والمؤشرات، التنقل، التخطيط، التحكم في الForms، القوائم ال事業ية، والجداول البيانات.

💡Data Tables

جدول البيانات هي العناصر التي تستخدم لعرض وتنظيم البيانات ال数值. تشمل الجداول التخطيط والتنظيم والتحكم في ال数据显示 والبيانات ال数值. الاستخدام: في السكريبت، يشير المقدم المدرسي إلى التركيز على الجداول البيانات في جزء من السلسلة، حيث سيتم التركيز على استخدام الجداول في تصميم واجهة المستخدم الرسومية.

Highlights

Angular Material是一个UI组件库，用于快速构建优秀的用户界面。

Angular Material实现了Google的Material Design规范。

课程的目标是学习如何使用库组件构建干净、优雅的UI。

先决条件包括HTML、CSS和JavaScript的基础知识。

对Angular的基本了解是必要的，但不需要是专家。

如果基础知识生疏，可以通过教程进行复习。

课程将介绍如何在Angular应用程序中添加Angular Material。

课程将讨论Angular中的排版。

将介绍构成库的不同组件类别。

组件分为六大类别：按钮和指示器、导航、布局、表单控件、弹出窗口和模型、数据表格。

课程不会详细介绍每一个组件，但会覆盖重要的部分。

通过本课程，你将对Angular Material组件的工作方式有一个良好的理解。

学习后，你可以使用这些知识构建适合自己需求的Angular应用程序。