AngularJS ng-view مع مثال

مواقع معروفة مثل Gmail استخدم مفهوم تطبيقات الصفحة الواحدة. عندما يطلب المستخدم صفحة مختلفة، لا ينتقل التطبيق إلى صفحة أخرى؛ بل يعرض واجهة الصفحة الجديدة داخل الصفحة الحالية، مما يجعل المستخدم يشعر وكأنه لم يغادر الصفحة الأصلية. ويتحقق الأمر نفسه في AngularJS باستخدام العروض مع المسارات.

⚠️ إشعار الدعم: وصل AngularJS نهاية الحياة في 31 ديسمبر 2021 ولا يتلقى أي تحديثات أو إصلاحات أمنية إضافية. يبقى التوجيه أدناه دقيقًا لصيانة تطبيقات AngularJS 1.x الحالية؛ في التطبيقات الحديثة زاوي المكافئ هو <router-outlet>.

ما هو العرض؟

العرض هو المحتوى الذي يُعرض للمستخدم. أيًا كان ما يرغب المستخدم في رؤيته، يتم عرض العرض المطابق من التطبيق.

يؤدي دمج طرق العرض والمسارات إلى تقسيم التطبيق إلى طرق عرض منطقية وربط كل منها بـ مراقب مما يجعل التطبيق أكثر سهولة في الاستخدام.

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

بدلاً من صفحتين منفصلتين على الويب، واحدة لعرض الطلبات والأخرى للطلبات الجديدة، AngularJS يستخدم عرضين على نفس الصفحة، يتم الوصول إليهما من خلال رابطين مرجعيين. #show و #new:

• التنقل إلى MyApp/#show يعرض هذا القسم من الصفحة الحالية صفحة "عرض الطلبات" دون مغادرة الصفحة. يتم تحديث هذا القسم فقط من الصفحة الحالية.
• التنقل إلى MyApp/#new ويفعل الشيء نفسه بالنسبة لعرض الطلبات الجديدة.

إن فصل التطبيق إلى طرق عرض بهذه الطريقة يجعله قابلاً للإدارة وسهل التغيير، ولكل طريقة عرض وحدة تحكم مقابلة تحتوي على منطق العمل لتلك الوظيفة.

توجيه ng-view في AngularJS

استخدم ngView توجيهات يكمل $route يتم تقديم الخدمة عن طريق تضمين القالب المُعالَج للمسار الحالي في ملف التخطيط الرئيسي، عادةً index.html.

في كل مرة يتغير فيها المسار الحالي، يتغير العرض المضمن معه وفقًا لـ $route التكوين، دون إعادة تحميل الصفحة نفسها. طرق يتم تناولها بشكل منفصل؛ هنا ينصب التركيز على إضافة وجهات نظر متعددة.

يوضح المخطط الانسيابي أدناه العملية بأكملها، والتي يشرحها المثال خطوة بخطوة.

كيفية تنفيذ عرض ng في AngularJS

يُقدّم هذا المثال خيارين للمستخدم: عرض حدث، وإضافة حدث. بالنقر أضف حدث يعرض عرض إضافة حدث، وينطبق الشيء نفسه على عرض الحدث.

الخطوة 1) قم بتضمين ملف angular-route كمرجع برمجي. هذا الملف ضروري لاستخدام مسارات وعروض متعددة، وهو متوفر على موقع AngularJS.

الخطوة 2) أضف علامات href وعلامة div.

1. أضف علامات href التي تربط إلى "إضافة حدث جديد" و "عرض الحدث".
2. أضف عنصر div يحمل ng-view توجيه لتحديد منطقة العرض. يتم إدراج العرض المطابق هناك عند النقر على أي من الرابطين.

الخطوة 3) أضف إعدادات التوجيه في علامة البرنامج النصي AngularJS.

1. عندما ينقر المستخدم حدث جديد رابط، تحميل AngularJS add_event.htmlيقوم بإدراج ترميزه في العرض، ويستخدم AddEventController بالنسبة لمنطق العمل.
2. عندما ينقر المستخدم حدث العرض الرابط، يتم تحميله show_event.html ويستخدم ShowDisplayController.
3. استخدم otherwise تحدد هذه الفقرة طريقة العرض الافتراضية التي تظهر للمستخدم، وهي هنا DisplayEvent.

الخطوة 4) أضف وحدات تحكم لمعالجة منطق العمل لكلا الوظيفتين. تقوم كل وحدة ببساطة بتعيين رسالة على كائن النطاق الخاص بها، والتي يتم عرضها عند عرض الواجهة المطابقة.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>
</head>
<body ng-app="sampleApp">

<h1>Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#!/NewEvent">Add New Event</a></li>
        <li><a href="#!/DisplayEvent">Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp', ["ngRoute"]);

    app.config(function($routeProvider) {
        $routeProvider
            .when("/NewEvent", {
                templateUrl: "add_event.html",
                controller: "AddEventController"
            })
            .when("/DisplayEvent", {
                templateUrl: "show_event.html",
                controller: "ShowDisplayController"
            })
            .otherwise({
                redirectTo: '/DisplayEvent'
            });
    });

    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });

    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is to display an Event";
    });
</script>

</body>
</html>

⚠️ ثلاثة تصحيحات للقائمة الأصلية. أولاً، الروابط تقرأ #!NewEvent بدون شرطة مائلة بينما يتم الإعلان عن المسارات على النحو التالي /NewEventلذا لم يتم العثور على أي تطابق. بدءًا من AngularJS 1.6، فإن بادئة التجزئة الافتراضية هي !مما يجعل العنوان صحيحاً #!/NewEvent — شرطة مائلة بعد علامة التعجب. ثانيًا، ShowDisplayController اضبط الرسالة على "هذا عرض حدث"، مع حذف الكلمة إلى أن النص المحيط يقتبس. ثالثًا، lib/bootstrap.js تم تحميله من مسار نسبي لا يؤدي إلى أي مكان ولا يتم استخدامه مطلقًا، لذلك تمت إزالته.

الخطوة 5) أنشئ الصفحات add_event.html و show_event.htmlيحتوي كل منها على رأس وتعبير يعرض الرسالة التي تم إدخالها بواسطة وحدة التحكم الخاصة بها.

• add_event.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

<h2>Show Event</h2>

{{message}}

إذا تم تنفيذ الكود بنجاح، فسيتم عرض المخرجات التالية في المتصفح.

الإخراج:

أخطاء شائعة في ng-view وكيفية إصلاحها

يكاد يكون كل فشل في ng-view ناتجًا عن توصيل الوحدة النمطية، أو تنسيق العنوان، أو طريقة عرض الصفحة، وليس من التوجيه نفسه.

• تبقى منطقة العرض فارغة: القادم ngRoute لم يتم إدراج الوحدة كعنصر تابع، أو angular-route.js لم يتم تحميل الملف. كلاهما مطلوب، ويجب أن يأتي البرنامج النصي بعد ذلك. angular.min.js.
• الروابط تغير العنوان ولكن لا يتم عرض أي شيء: لا يتطابق الرابط مع المسار. بدءًا من AngularJS 1.6، يجب أن يكون العنوان #!/Routeتم استخدام الكود القديم المكتوب للإصدار 1.5 #/Route.
• فشل تحميل القوالب بسبب خطأ CORS: تم فتح الصفحة مباشرةً من القرص. لذا، قم بعرضها عبر بروتوكول HTTP، لأن templateUrl يتم جلب الملف بواسطة طلب AJAX، مما يؤدي إلى حظر بروتوكول الملف.
• لا يظهر إلا المشهد الأخير: يحتوي أكثر من عنصر على ng-view. يدعم AngularJS منطقة عرض واحدة لكل صفحة.
• لا يظهر شيء عند التحميل الأول: لا otherwise تم تكوين الشرط، لذا فإن العنوان الفارغ لا يتطابق مع أي مسار.

الأسئلة الشائعة