كيف أبدأ في إنشاء مشروع Angular من الصفر
الخطوة الأولى:
أقوم بإنشاء مشروع جديد من خلال GitHub
الخطوة الثانية:
أقوم بتعبئة حقول الإنشاء
الخطوة الثالثة:
أقوم بإنشاء مشروعي من خلال الأمر أدناه (يوضع هذا الأمر في الـ Terminal)
$ ng new aap
الخطوة الرابعة:
نقوم بنقل كافة الملفات إلى الـ Root
الخطوة الخامسة:
نقوم بالتعديل على ملف Angular.json ليكون بهذا الشكل
الكود بعد حذف جزء منه يكون هكذا:
"outputPath": "dist/",
الخطوة السادسة:
استدعاء مكتبات الـ CSS المهمة عن طريق ملف index.html - يجب أن يكون على النحو التالي:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>منصة هواة الأحساء | Ahsa Amateur Platform</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- Primeflex (https://primeflex.org/installation) -->
<link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css">
<!-- (Animate Style) https://animate.style/ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- Google Fonts and Material Icons -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- البحث العام -->
<meta name="title" content="أسواق ومخابز اليحيى للمواد الغذائية">
<meta name="author" content="م. عبدالله السالم">
<meta name="url" content="https://al-yahya.sa">
<meta name="domain" content="al-yahya.sa">
<meta name="type" content="website">
<meta name="description" content="نقدم لكم أفضل المنتجات بأفضل الأسعار - أسواق ومخابز اليحيى">
<meta name="keywords"
content="أسواق اليحيى, مخابز اليحيى, بوابة اليحيى, Al Yahya Foodstuff Supermarkets, Al Yahya Foodstuff, Al Yahya,Yahya Foodstuff Supermarkets,أسواق اليحيى للمواد الغذائية,اليحيى,يحيى للمواد الغذائية, مخابز يحيى">
<meta name="image" content="https://al-yahya.sa/assets/img/logos/circle_logo.png">
<!-- بحث وسائل التواصل -->
<meta name="og:title" content="أسواق ومخابز اليحيى للمواد الغذائية">
<meta name="og:url" content="https://al-yahya.sa">
<meta name="og:type" content="website">
<meta name="og:description" content="نقدم لكم أفضل المنتجات بأفضل الأسعار - أسواق ومخابز اليحيى">
<meta name="og:image" content="https://al-yahya.sa/assets/img/logos/circle_logo.png">
<!-- بحث منصة X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="أسواق ومخابز اليحيى للمواد الغذائية">
<meta name="twitter:url" content="https://al-yahya.sa">
<meta name="twitter:domain" content="al-yahya.sa">
<meta name="twitter:description" content="نقدم لكم أفضل المنتجات بأفضل الأسعار - أسواق ومخابز اليحيى">
<meta name="twitter:image" content="https://al-yahya.sa/assets/img/logos/circle_logo.png">
</head>
<body>
<app-root></app-root>
<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
crossorigin="anonymous"></script>
</body>
</html>
الخطوة السابعة:
تثبيت ملفات اللغة
npm install @ngx-translate/core@14 --save
npm install @ngx-translate/http-loader@7 --save
لمزيد من التفاصيل اضغط هنا
الخطوة الثامنة:
تثبيت Angular Material
ng add @angular/material
ويمكنك ربط كافة أدوات Angular Material بمشروعك من خلال إشاء ملف باسم material.module.ts وربطه بملف app.module.ts
وهذا هو محتوى material.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from "@angular/material/button";
import { MatButtonToggleModule } from "@angular/material/button-toggle";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatRadioModule } from "@angular/material/radio";
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import {MatIconModule} from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge'
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { MatSlideToggleModule } from "@angular/material/slide-toggle";
import { MatProgressBarModule } from "@angular/material/progress-bar";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatDividerModule } from "@angular/material/divider";
import { MatExpansionModule } from "@angular/material/expansion";
import { MatTabsModule } from "@angular/material/tabs";
import { MatStepperModule } from "@angular/material/stepper";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { MatSelectModule } from "@angular/material/select";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from '@angular/material/core';
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatDialogModule } from "@angular/material/dialog";
import { MatTableModule } from "@angular/material/table";
import {MatSortModule} from "@angular/material/sort";
import { MatPaginatorModule } from '@angular/material/paginator';
import {MatChipsModule} from '@angular/material/chips';
import {MatRippleModule} from '@angular/material/core';
const material = [
MatRippleModule,
MatButtonModule,
MatButtonToggleModule,
MatToolbarModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatGridListModule,
MatCardModule,
MatMenuModule,
MatSnackBarModule,
MatSlideToggleModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatBadgeModule,
MatDividerModule,
MatExpansionModule,
MatTabsModule,
MatStepperModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatAutocompleteModule,
MatCheckboxModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatTooltipModule,
MatDialogModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatChipsModule
];
@NgModule({
imports: [material],
exports: [material]
})
export class MaterialModule { }
هكذا طريق استيراد ملفات الـ Material عبر ملف app.module.ts
الخطوة التاسعة:
تثبيت Primeng (هناك المزيد من التعليمات عند النقر على اسم الـ Material)
npm install primeng@15.0.1 --force
ويمكنك ربط كافة أدوات primeng بمشروعك من خلال إشاء ملف باسم primeng.module.ts وربطه بملف app.module.ts
وهذا هو محتوى primeng.module.ts
import { NgModule } from '@angular/core';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CalendarModule } from 'primeng/calendar';
import { CascadeSelectModule } from 'primeng/cascadeselect';
import { CheckboxModule } from 'primeng/checkbox';
import { ChipsModule } from 'primeng/chips';
import { ColorPickerModule } from 'primeng/colorpicker';
import { DropdownModule } from 'primeng/dropdown';
import { EditorModule } from 'primeng/editor';
import { InputTextModule } from 'primeng/inputtext';
import { RadioButtonModule } from 'primeng/radiobutton';
import { InputMaskModule } from 'primeng/inputmask';
import { InputSwitchModule } from 'primeng/inputswitch';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { InputNumberModule } from 'primeng/inputnumber';
import { KnobModule } from 'primeng/knob';
import { KeyFilterModule } from 'primeng/keyfilter';
import { ListboxModule } from 'primeng/listbox';
import { MultiSelectModule } from 'primeng/multiselect';
import { PasswordModule } from 'primeng/password';
import { RatingModule } from 'primeng/rating';
import { SelectButtonModule } from 'primeng/selectbutton';
import { SliderModule } from 'primeng/slider';
import { TreeSelectModule } from 'primeng/treeselect';
import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { ButtonModule } from 'primeng/button';
import { SplitButtonModule } from 'primeng/splitbutton';
import { SpeedDialModule } from 'primeng/speeddial';
import { TableModule } from 'primeng/table';
import { DataViewModule, DataViewLayoutOptions } from 'primeng/dataview';
import { ScrollerModule } from 'primeng/scroller';
import { OrderListModule } from 'primeng/orderlist';
import { OrganizationChartModule } from 'primeng/organizationchart';
import { PaginatorModule } from 'primeng/paginator';
import { PickListModule } from 'primeng/picklist';
import { TreeModule } from 'primeng/tree';
import { TreeTableModule } from 'primeng/treetable';
import { TimelineModule } from 'primeng/timeline';
import { VirtualScrollerModule } from 'primeng/virtualscroller';
import { AccordionModule } from 'primeng/accordion';
import { CardModule } from 'primeng/card';
import { DividerModule } from 'primeng/divider';
import { FieldsetModule } from 'primeng/fieldset';
import { PanelModule } from 'primeng/panel';
import { SplitterModule } from 'primeng/splitter';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import { TabViewModule } from 'primeng/tabview';
import { ToolbarModule } from 'primeng/toolbar';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { ConfirmPopupModule } from 'primeng/confirmpopup';
import { DialogModule } from 'primeng/dialog';
import { DynamicDialogModule } from 'primeng/dynamicdialog';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { SidebarModule } from 'primeng/sidebar';
import { TooltipModule } from 'primeng/tooltip';
import { FileUploadModule } from 'primeng/fileupload';
import { BreadcrumbModule } from 'primeng/breadcrumb';
import { ContextMenuModule } from 'primeng/contextmenu';
import { DockModule } from 'primeng/dock';
import { MenuModule } from 'primeng/menu';
import { MenubarModule } from 'primeng/menubar';
import { MegaMenuModule } from 'primeng/megamenu';
import { PanelMenuModule } from 'primeng/panelmenu';
import { SlideMenuModule } from 'primeng/slidemenu';
import { StepsModule } from 'primeng/steps';
import { TabMenuModule } from 'primeng/tabmenu';
import { TieredMenuModule } from 'primeng/tieredmenu';
import { ChartModule } from 'primeng/chart';
import { MessagesModule } from 'primeng/messages';
import { ToastModule } from 'primeng/toast';
import { CarouselModule } from 'primeng/carousel';
import { GalleriaModule } from 'primeng/galleria';
import { ImageModule } from 'primeng/image';
import { DragDropModule } from 'primeng/dragdrop';
import { AvatarModule } from 'primeng/avatar';
import { BadgeModule } from 'primeng/badge';
import { BlockUIModule } from 'primeng/blockui';
import { ChipModule } from 'primeng/chip';
import { InplaceModule } from 'primeng/inplace';
import { ScrollTopModule } from 'primeng/scrolltop';
import { SkeletonModule } from 'primeng/skeleton';
import { ProgressBarModule } from 'primeng/progressbar';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { TagModule } from 'primeng/tag';
import { TerminalModule } from 'primeng/terminal';
import { DeferModule } from 'primeng/defer';
import { FocusTrapModule } from 'primeng/focustrap';
import { StyleClassModule } from 'primeng/styleclass';
import { RippleModule } from 'primeng/ripple';
import { AutoFocusModule } from 'primeng/autofocus';
import { AnimateModule } from 'primeng/animate';
import { OverlayModule } from 'primeng/overlay';
const material = [
ButtonModule,
AutoCompleteModule,
CalendarModule,
CascadeSelectModule,
CheckboxModule,
ChipsModule,
ColorPickerModule,
DropdownModule,
// EditorModule,
InputTextModule,
RadioButtonModule,
InputMaskModule,
InputSwitchModule,
InputTextareaModule,
InputNumberModule,
KnobModule,
KeyFilterModule,
ListboxModule,
MultiSelectModule,
PasswordModule,
RatingModule,
SelectButtonModule,
SliderModule,
TreeSelectModule,
TriStateCheckboxModule,
ToggleButtonModule,
SplitButtonModule,
SpeedDialModule,
TableModule,
DataViewModule,
ScrollerModule,
OrderListModule,
OrganizationChartModule,
PaginatorModule,
PickListModule,
TreeModule,
TreeTableModule,
TimelineModule,
VirtualScrollerModule,
AccordionModule,
CardModule,
DividerModule,
FieldsetModule,
PanelModule,
SplitterModule,
ScrollPanelModule,
TabViewModule,
ToolbarModule,
ConfirmDialogModule,
ConfirmPopupModule,
DialogModule,
DynamicDialogModule,
OverlayPanelModule,
SidebarModule,
TooltipModule,
FileUploadModule,
BreadcrumbModule,
ContextMenuModule,
DockModule,
MenuModule,
MenubarModule,
MegaMenuModule,
PanelMenuModule,
SlideMenuModule,
StepsModule,
TabMenuModule,
TieredMenuModule,
// ChartModule,
MessagesModule,
ToastModule,
CarouselModule,
GalleriaModule,
ImageModule,
DragDropModule,
AvatarModule,
BadgeModule,
BlockUIModule,
ChipModule,
InplaceModule,
ScrollTopModule,
SkeletonModule,
ProgressBarModule,
ProgressSpinnerModule,
TagModule,
TerminalModule,
DeferModule,
FocusTrapModule,
StyleClassModule,
RippleModule,
AutoFocusModule,
AnimateModule,
OverlayModule,
];
@NgModule({
imports: [material],
exports: [material]
})
export class PrimengModule { }
الخطوة العاشرة:
إضافة الخطوط وملفات الـ assets
يمكنك تنزيل محتويات المجلد هذا ووضعه في مجلد الـ assets الموجود في مشروعك، ولا تنسى ربط ملف متغيرات الـ css
/*
@import "src/assets/scss/_variables";
*/
/* You can add global styles to this file, and also import other style files */
@font-face {
font-family: 'Bukra-Regular';
/* ../../webfonts/DroidKufi-Regular.ttf */
src: url('../fonts/29LTBukraRegular3.otf') format('truetype');
}
//Old Variables
// $primary-color: #3695A1;//#3d535f - #3695A1
// $accent-color: #A16537;//#7f00ff#A16537
// $warn-color: #FCF182;//#FCF182
$border-color: #CCCCCC;
//New Variables
$primary-color: #F6F6F6; //#3d535f - #3695A1
$accent-color: #F9EEE3; //4AC0EE#7f00ff #A16537 #304FFE
$warn-color: #957242; //FFC220#FCF182
$alyahya-font: 'Bukra-Regular';
$basic-color: #fff;
$basic-color-2: #000;
$basic-color-light: lighten($basic-color, 5%);
$basic-color-dark: darken($basic-color, 15%);
$primary-color-light: lighten($primary-color, 5%);
$primary-color-dark: darken($primary-color, 15%);
//
$accent-color-light: lighten($accent-color, 7%);
$accent-color-dark: darken($accent-color, 7%);
$warn-color-light: lighten($accent-color, 7%);
$warn-color-dark: darken($accent-color, 7%);
$primary-bakery-color: #654530;
//7f00ff
$overlay: rgba(0, 0, 0, 0.5);
$body-color: #fafafa;
$divider-color: #dddddd;
$font-color-light: #d5d5d5;
$font-color-dark: #606060;
$p-color: #606060;
$font-weight-thin: 100;
$font-weight-extra-light: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;
$font-weight-bold: 700;
$font-weight-extra-bold: 800;
$font-weight-ultra-bold: 900;
$hover-box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.16), 0 10px 15px 0 rgba(0, 0, 0, 0.12);
$navigation-box-shadow: 0px 0px 3px 1px $primary-color-dark;
$box-shadow: 0px 1px 5px 2px #7d7d7d;
$text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.29);
$card-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
//Social Media Color
$twitter-color: #4c6ef5;
$twitter-background: aliceblue;
$facebook-color: #3b5998;
$facebook-background: #eceff5;
$whatsapp-color: #25D366;
$whatsapp-background: #cef5dc;
$telegram-color: #4c6ef5;
$telegram-background: aliceblue;
الخطوة الحادية عشرة:
البدء في المشروع من خلال إنشاء قائمة جانبية عن طريق الأمر: للمزيد من هنا
ng generate @angular/material:navigation nav
الآن يمكنك أن تبدأ في مشروعك الأول ونصيحتنا لك أن يكون ترتيب مجلدات مشروعك بهذا النحو الجميل:
الخطوة الثانية عشرة:
يجب أن يكون محتوى ملف الـ style.css بهذا النحو:
/* You can add global styles to this file, and also import other style files */
@import "src/assets/scss/_variables";
* :not(mat-icon) {
font-family: $primary-font !important;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: $primary-font, "Helvetica Neue", sans-serif;
}
الخطوة الثالثة عشرة:
حل مشكلة الرفع على Netlify.app من خلال قراءة المشاركة التالية: هنا
الخطوة الرابعة عشر:
ضبط ملف tsconfig.json كالتالي:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"emitDecoratorMetadata": true,
"compileOnSave": false,
"compilerOptions": {
"emitDecoratorMetadata": true,
"strictPropertyInitialization": false,
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"strictNullChecks": false,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"allowJs": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"esModuleInterop": true,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableIvy": false,
"fullTemplateTypeCheck": true,
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
تعليقات
إرسال تعليق