استخدام Angular framework مع Razor Pages

زمزم بنت يوسف · 2 نوفمبر 2023

السلام عليكم لو كنت استخدم نظام razor pages،هل يمكنن استخدام مه angular framework ؟وأين أضيفه من ضمن الصفحات؟

تم التعديل في 2 نوفمبر 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Abderrezak Djatou · 2 نوفمبر 2023

بتاريخ 1 ساعة قال زمزم بنت يوسف:

نعم، يمكنك دمج تطبيق Angular Framework داخل تطبيق ASP.NET Razor Pages. يمكنك ذلك باستخدام عنصر <script> في صفحات Razor لتضمين تطبيق Angular وعرضه داخل الصفحة.

الخطوات المبسطة كما يلي:

1- إنشاء مشروع Angular باستخدام Angular CLI:
ng new my-angular-app
بمجرد إنشاء مشروع Angular، قم بنسخ ملفات التطبيق (JavaScript وملفات نمط وملفات HTML) داخل مجلد مشروع Razor Pages.
في صفحة Razor حيث ترغب في تضمين التطبيق Angular، يمكنك استخدام عنصر <script> لتضمين ملفات JavaScript الخاصة بالتطبيق Angular.

مثال على كيفية تضمين تطبيق Angular داخل صفحة Razor:

<!DOCTYPE html>
<html>
<head>
<title>Razor Page with Angular</title>
</head>
<body>
<h1>Welcome to Razor Pages with Angular</h1>

<div id="angular-app">

</div>

<script src="~/lib/angular-app/runtime.js"></script>
<script src="~/lib/angular-app/polyfills.js"></script>
<script src="~/lib/angular-app/styles.js"></script>
<script src="~/lib/angular-app/vendor.js"></script>
<script src="~/lib/angular-app/main.js"></script>
</body>

</html>

تأكد من تحديد المسارات الصحيحة لملفات JavaScript والمكتبات الخاصة بالتطبيق Angular وتضمينها في عنصر <script>.

بهذا الشكل، يمكنك تضمين تطبيق Angular داخل صفحة Razor وعرضه داخل عنصر HTML معين.

تم التعديل في 2 نوفمبر 2023 بواسطة Abderrezak Djt

Mustafa Suleiman · 2 نوفمبر 2023

بالطبع تستطيعي استخدام Angular framework مع Razor pages، حيث ستحققي استفادة من قوة كلا الإطارين وذلك لأن Angular هو إطار عمل قوي للواجهة الأمامية، بينما Razor pages هو إطار عمل قوي للواجهة الخلفية، ومن خلال الجمع بين الاثنين، يمكنك إنشاء تطبيقات ويب غنية وتفاعلية.يمكن أن يساعدك Angular في إنشاء تطبيقات ويب قابلة للتوسع بسهولة.

ولإضافة Angular framework إلى Razor pages، عليك القيام بالتالي:

تثبيت حزمة Angular إلى مشروعك. يمكنك القيام بذلك باستخدام NuGet.
إضافة Angular إلى ملف _Layout.cshtml.
إنشاء مجلد جديد يسمى "app" في جذر مشروعك.
إنشاء ملفات Angular في هذا المجلد.
تضمين ملفات Angular في صفحاتك باستخدام Razor partial views.

مثال على كيفية إضافة Angular إلى Razor pages:

@page
@inject IHttpClientFactory HttpClientFactory

<html ng-app="app">
<head>
    <base href="/">
    <link href="~/css/app.css" rel="stylesheet">
    <script src="~/js/angular.js"></script>
    <script src="~/js/app.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

والكود السابق يقوم بإضافة Angular إلى ملف _Layout.cshtml، وأيضًا يجب إنشاء مجلد جديد يسمى "app" في جذر المشروع، ويحتوي هذا المجلد على ملفات Angular الخاصة بنا، مثل app.component.ts و app.component.html.

ولعرض ملفات Angular في الصفحات، نستخدم Razor partial views.

أي لو ترغبين في عرض ملف Angular يسمى "my-component.component.html" في الصفحة، فسنقوم بإنشاء ملف Razor partial view يسمى "my-component.cshtml"، وفي هذا الملف، سنقوم ببساطة بتضمين ملف Angular:

@partial "my-component.component.html"

زمزم بنت يوسف · 2 نوفمبر 2023

بتاريخ 2 ساعة قال Mustafa Suleiman:
بالطبع تستطيعي استخدام Angular framework مع Razor pages، حيث ستحققي استفادة من قوة كلا الإطارين وذلك لأن Angular هو إطار عمل قوي للواجهة الأمامية، بينما Razor pages هو إطار عمل قوي للواجهة الخلفية، ومن خلال الجمع بين الاثنين، يمكنك إنشاء تطبيقات ويب غنية وتفاعلية.يمكن أن يساعدك Angular في إنشاء تطبيقات ويب قابلة للتوسع بسهولة.

ولإضافة Angular framework إلى Razor pages، عليك القيام بالتالي:

تثبيت حزمة Angular إلى مشروعك. يمكنك القيام بذلك باستخدام NuGet.

إضافة Angular إلى ملف _Layout.cshtml.

إنشاء مجلد جديد يسمى "app" في جذر مشروعك.

إنشاء ملفات Angular في هذا المجلد.

تضمين ملفات Angular في صفحاتك باستخدام Razor partial views.

مثال على كيفية إضافة Angular إلى Razor pages:
@page
@inject IHttpClientFactory HttpClientFactory

<html ng-app="app">
<head>
    <base href="/">
    <link href="~/css/app.css" rel="stylesheet">
    <script src="~/js/angular.js"></script>
    <script src="~/js/app.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
والكود السابق يقوم بإضافة Angular إلى ملف _Layout.cshtml، وأيضًا يجب إنشاء مجلد جديد يسمى "app" في جذر المشروع، ويحتوي هذا المجلد على ملفات Angular الخاصة بنا، مثل app.component.ts و app.component.html.

ولعرض ملفات Angular في الصفحات، نستخدم Razor partial views.

أي لو ترغبين في عرض ملف Angular يسمى "my-component.component.html" في الصفحة، فسنقوم بإنشاء ملف Razor partial view يسمى "my-component.cshtml"، وفي هذا الملف، سنقوم ببساطة بتضمين ملف Angular:
@partial "my-component.component.html"

لم أفهم جيدا... لو سمحت هل يمكن أن تشرح أكثر تفصيلا

استخدام Angular framework مع Razor Pages

السؤال

زمزم بنت يوسف

3 أجوبة على هذا السؤال

Recommended Posts

Abderrezak Djatou

Mustafa Suleiman

زمزم بنت يوسف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية