مثال على توجيه AngularJS مع المعلمات

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

ما هي تطبيقات الصفحة الواحدة؟

تطبيقات الصفحة الواحدة أو (SPAs) هي تطبيقات ويب تقوم بتحميل صفحة HTML واحدة وتقوم بتحديث الصفحة ديناميكيًا بناءً على تفاعل المستخدم مع تطبيق الويب.

ما هو التوجيه في AngularJS؟

التوجيه في AngularJS هي طريقة تسمح لك بإنشاء تطبيقات صفحة واحدة. فهو يمكّنك من إنشاء عناوين URL مختلفة لمحتوى مختلف في تطبيقات الويب الخاصة بك. يساعد توجيه AngularJS أيضًا في إظهار محتويات متعددة اعتمادًا على المسار الذي تم اختياره. تم تحديده في عنوان URL بعد علامة #.

لنأخذ مثالاً لموقع تتم استضافته عبر عنوان URL http://example.com/index.html.

في هذه الصفحة، ستستضيف الصفحة الرئيسية لتطبيقك. لنفترض أنه إذا كان التطبيق ينظم حدثًا وأراد أحدهم معرفة الأحداث المختلفة المعروضة، أو أراد رؤية تفاصيلهاtails حدث معين أو حذف حدث. في تطبيق الصفحة الواحدة، عند تمكين التوجيه، ستكون كل هذه الوظائف متاحة عبر الصفحة التاليةwing وصلات

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

سيتم استخدام الرمز # مع المسارات المختلفة (ShowEvent وDisplayEvent وDeleteEvent).

  • لذلك إذا أراد المستخدم رؤية جميع الأحداث، فسيتم توجيهه إلى الرابط (http://example.com/index.html#ShowEvent)، آخر
  • إذا أرادوا رؤية حدث معين فقط، فسيتم إعادة توجيههم إلى الرابط ( http://example.com/index.html#DisplayEvent) أو
  • إذا أرادوا حذف حدث ما، فسيتم توجيههم إلى الرابط http://example.com/index.html#DeleteEvent.

لاحظ أن عنوان URL الرئيسي يظل كما هو.

إضافة مسار AngularJS باستخدام $routeProvider

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

من أجل تنفيذ التوجيه following يجب تنفيذ الخطوات الرئيسية في طلبك بأي ترتيب محدد.

  1. إشارة إلى angular-route.js. هذا ال جافا سكريبت ملف تم تطويره بواسطة Google ويحتوي على جميع وظائف التوجيه. يجب وضع هذا في تطبيقك حتى يتمكن من الرجوع إلى جميع الوحدات الرئيسية المطلوبة للتوجيه.
  2. الخطوة المهمة التالية هي إضافة تبعية إلى وحدة ngRoute من داخل تطبيقك. هذه التبعية مطلوبة حتى يمكن استخدام وظيفة التوجيه داخل التطبيق. إذا لم تتم إضافة هذه التبعية، فلن يتمكن الشخص من استخدام التوجيه داخل تطبيق angular.JS.

وفيما يلي بناء الجملة العام لهذا البيان. هذا مجرد إعلان عادي لوحدة تتضمن الكلمة الأساسية ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);
  1. ستكون الخطوة التالية هي تكوين $routeProvider الخاص بك. هذا مطلوب لتوفير المسارات المختلفة في تطبيقك. فيما يلي الصيغة العامة لهذا البيان والتي لا تحتاج إلى شرح. ينص فقط على أنه عند اختيار المسار ذي الصلة، استخدم المسار لعرض العرض المحدد للمستخدم.
when(path, route)
  1. روابط إلى مسارك من داخل صفحة HTML الخاصة بك. في صفحة HTML الخاصة بك، ستضيف روابط مرجعية لمختلف المسارات المتاحة في تطبيقك.
<a href="#/route1">Route 1</a><br/>
  1. وأخيرا سيكون إدراج توجيه ng-view، والتي عادة ما تكون في علامة div. سيتم استخدام هذا لإدخال محتوى العرض عند اختيار المسار ذي الصلة.

مثال على توجيه AngularJS

الآن، دعونا نلقي نظرة على مثال للتوجيه باستخدام الخطوات المذكورة أعلاه.

في مثالنا لتوجيه AngularJS مع المعلمات،

سنقدم رابطين للمستخدم،

  • واحد هو عرض المواضيع ل الزاوي JS بالطبع، والآخر هو ل نود.جي إس بالطبع.
  • عندما ينقر المستخدم على أي رابط، سيتم عرض موضوعات تلك الدورة.

الخطوة 1) قم بتضمين ملف المسار الزاوي كمرجع للبرنامج النصي.

التوجيه AngularJS

يعد ملف المسار هذا ضروريًا للاستفادة من وظائف وجود طرق وطرق عرض متعددة. يمكن تنزيل هذا الملف من موقع angular.JS.

الخطوة 2) أضف علامات href التي ستمثل روابط إلى "Angular JS Topics" و"Node JS Topics".

التوجيه AngularJS

الخطوة 3) أضف علامة div باستخدام التوجيه ng-view الذي سيمثل العرض.

سيسمح هذا بإدخال العرض المقابل عندما ينقر المستخدم على "Angular JS Topics" أو "Node JS Topics".

التوجيه AngularJS

الخطوة 4) في علامة البرنامج النصي الخاصة بك لـ AngularJS، أضف "وحدة ngRoute" وخدمة "$routeProvider".

التوجيه AngularJS

شرح الكود:

  1. الخطوة الأولى هي التأكد من تضمين "وحدة ngRoute". مع تطبيق هذا، ستتعامل Angular تلقائيًا مع التوجيه في تطبيقك. تحتوي وحدة ngRoute التي طورتها Google على جميع الوظائف التي تتيح إمكانية التوجيه. من خلال إضافة هذه الوحدة، سوف يفهم التطبيق تلقائيًا جميع أوامر التوجيه.
  2. $routeprovider هي خدمة تستخدمها angular للاستماع في الخلفية إلى المسارات التي يتم استدعاؤها. لذلك عندما ينقر المستخدم على الرابط، سيكتشف موفر المسار في AngularJS ذلك ثم يقرر المسار الذي سيتبعه.
  3. إنشاء مسار واحد للارتباط Angular - تعني هذه الكتلة أنه عند النقر على الرابط Angular، قم بإدخال الملف Angular.html واستخدم أيضًا وحدة التحكم "AngularController" لمعالجة أي منطق عمل.
  4. إنشاء مسار واحد لرابط العقدة - تعني هذه الكتلة أنه عند النقر على رابط العقدة، قم بإدخال الملف Node.html واستخدم أيضًا وحدة التحكم "NodeController" لمعالجة أي منطق عمل.

الخطوة 5) التالي هو إضافة وحدات تحكم لمعالجة منطق الأعمال لكل من AngularController وNodeController.

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

التوجيه AngularJS

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

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

        function($routeProvider){
        $routeProvider.
        when('/Angular',{
            templateUrl : '/Angular.html',
            controller: 'AngularController'
        }).
        when("/Node", {
            templateUrl: '/Node.html',
            controller: 'NodeController'
        });
    }]);
    sampleApp.controller('AngularController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

الخطوة 6) قم بإنشاء صفحات تسمى Angular.html وNode.html. لكل صفحة نقوم بتنفيذ الخطوات التالية.

ستضمن هذه الخطوات عرض جميع أزواج القيمة الأساسية للمصفوفة في كل صفحة.

  1. استخدام التوجيه ng-repeat لتصفح كل زوج من قيمة المفتاح المحدد في المتغير التعليمي.
  2. عرض اسم ووصف كل زوج من قيمة المفتاح.
  • Angular.html

التوجيه AngularJS

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>
  • Node.html

التوجيه AngularJS

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

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

الإخراج:

التوجيه AngularJS

إذا قمت بالنقر فوق الرابط AngularJS Topics، فسيتم عرض الإخراج أدناه.

التوجيه AngularJS

ويبين الإخراج بوضوح أن،

  • عند النقر على الرابط "Angular JS Topics"، يقرر RouteProvider الذي أعلناه في الكود الخاص بنا أنه يجب إدخال كود Angular.html.
  • سيتم إدخال هذا الرمز في علامة "div"، التي تحتوي على توجيه ng-view. كما أن محتوى وصف الدورة التدريبية يأتي من "متغير البرنامج التعليمي" الذي كان جزءًا من كائن النطاق المحدد في AngularController.
  • عندما ينقر أحد على نود.جي إس المواضيع، ستحدث نفس النتيجة، وسيظهر العرض الخاص بموضوعات Node.js.
  • لاحظ أيضًا أن عنوان URL للصفحة يظل كما هو، ولن يتغير سوى المسار بعد العلامة #. وهذا هو مفهوم تطبيقات الصفحة الواحدة. تعتبر علامة #hash الموجودة في عنوان URL بمثابة فاصل يفصل بين المسار (وهو في حالتنا "Angular" كما هو موضح في الصورة أعلاه) وصفحة HTML الرئيسية (Sample.html)

التوجيه AngularJS

إنشاء مسار افتراضي في AngularJS

يوفر التوجيه في AngularJS أيضًا إمكانية الحصول على مسار افتراضي. هذا هو المسار الذي يتم اختياره إذا لم يكن هناك تطابق للمسار الحالي.

يتم إنشاء المسار الافتراضي عن طريق إضافة المسارwing الشرط عند تحديد خدمة $routeProvider.

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

otherwise ({
    redirectTo: 'page'
});

لنستخدم نفس المثال أعلاه ونضيف مسارًا افتراضيًا إلى خدمة $routeProvider الخاصة بنا.

إنشاء مسار افتراضي في AngularJS

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

when("/Node", {
templateUrl: 'Node.html',
controller: 'NodeController'
}).
otherwise({
    redirectTo:'/Angular'
});
}]);

شرح الكود:

  1. نحن هنا نستخدم نفس الكود المذكور أعلاه مع الاختلاف الوحيد هو أننا نستخدم عبارة خلاف ذلك وخيار "redirectTo" لتحديد طريقة العرض التي يجب تحميلها إذا لم يتم تحديد أي مسار. في حالتنا نريد أن يتم عرض العرض "/ Angular".

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

الإخراج:

إنشاء مسار افتراضي في AngularJS

من الإخراج،

  • يمكنك أن ترى بوضوح أن العرض الافتراضي الموضح هو عرض JS الزاوي.
  • وذلك لأنه عند تحميل الصفحة، فإنها تنتقل إلى خيار "خلاف ذلك" في وظيفة $routeProvider وتقوم بتحميل العرض "/Angular".

كيفية الوصول إلى المعلمات من طريق AngularJS

يوفر Angular أيضًا وظيفة توفير المعلمات أثناء التوجيه. تتم إضافة المعلمات إلى نهاية المسار في عنوان URL، على سبيل المثال، http://guru99/index.html#/Angular/1. في مثال التوجيه الزاوي هذا،

  1. ، http://guru99/index.html هو عنوان URL الرئيسي لتطبيقنا
  2. الرمز # هو الفاصل بين عنوان URL الرئيسي للتطبيق والمسار.
  3. الزاوي هو طريقنا
  4. وأخيرًا، "1" هو المعلمة التي تمت إضافتها إلى طريقنا

يظهر أدناه بناء جملة كيفية ظهور المعلمات في عنوان URL:

HTMLPage#/route/parameter

ستلاحظ هنا أنه تم تمرير المعلمة بعد المسار في عنوان URL.

لذا، في مثال مسارات AngularJS، أعلاه بالنسبة لموضوعات Angular JS، يمكننا تمرير معلمات كما هو موضح أدناه

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

هنا يمكن للمعلمات 1 و2 و3 أن تمثل في الواقع معرف الموضوع.

دعونا نلقي نظرة بالتفصيل على كيفية تنفيذ المسار الزاوي باستخدام المعلمة:

الخطوة 1) أضف المتابعةwing رمز إلى وجهة نظرك

  1. إضافة جدول لعرض كافة المواضيع الخاصة بدورة Angular JS للمستخدم
  2. أضف صف جدول لـ showing موضوع "التحكم". بالنسبة لهذا الصف، قم بتغيير علامة href إلى "Angular/1" مما يعني أنه عندما ينقر المستخدم على هذا الموضوع، سيتم تمرير المعلمة 1 في عنوان URL مع المسار.
  3. أضف صف جدول لـ showing موضوع "نماذج". بالنسبة لهذا الصف، قم بتغيير علامة href إلى "Angular/2" مما يعني أنه عندما ينقر المستخدم على هذا الموضوع، سيتم تمرير المعلمة 2 في عنوان URL مع المسار.
  4. أضف صف جدول لـ showing موضوع "التوجيهات". بالنسبة لهذا الصف، قم بتغيير علامة href إلى "Angular/3" مما يعني أنه عندما ينقر المستخدم على هذا الموضوع، سيتم تمرير المعلمة 3 في عنوان URL مع المسار.

الوصول إلى المعلمات من طريق AngularJS

الخطوة 2) أضف معرف الموضوع في وظيفة خدمة Routeprovider
في وظيفة خدمة RouteProvider، قم بإضافة:topicId للإشارة إلى أن أي معلمة تم تمريرها في عنوان URL بعد المسار يجب أن يتم تعيينها إلى themeId المتغير.

الوصول إلى المعلمات من طريق AngularJS

الخطوة 3) أضف الكود الضروري إلى وحدة التحكم

  1. تأكد أولاً من إضافة "$routeParams" كمعلمة عند تحديد وظيفة وحدة التحكم. سيكون لهذه المعلمة حق الوصول إلى كافة معلمات المسار التي تم تمريرها في عنوان URL.
  2. تحتوي المعلمة "routeParams" على مرجع إلى كائن subjectId، والذي يتم تمريره كمعلمة مسار. نقوم هنا بإرفاق المتغير '$routeParams.topicId' بكائن النطاق الخاص بنا باعتباره المتغير '$scope.tutotialid'. ويتم ذلك بحيث يمكن الرجوع إليه في وجهة نظرنا عبر متغير البرنامج التعليمي.

الوصول إلى المعلمات من طريق AngularJS

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

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

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

الخطوة 4) أضف التعبير لعرض المتغير
أضف التعبير لعرض متغير البرنامج التعليمي في صفحة Angular.html.

الوصول إلى المعلمات من طريق AngularJS

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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

الإخراج:

الوصول إلى المعلمات من طريق AngularJS

في شاشة الإخراج،

  • إذا قمت بالنقر فوق الموضوع ديtails رابط للموضوع الأول، يتم إلحاق الرقم 1 بعنوان URL.
  • سيتم بعد ذلك أخذ هذا الرقم كوسيطة "routeparam" بواسطة خدمة Angular.JS Routeprovider ويمكن بعد ذلك الوصول إليه بواسطة وحدة التحكم الخاصة بنا.

كيفية استخدام خدمة Angular $route

تتيح لك خدمة $route الوصول إلى خصائص المسار. تتوفر خدمة $route كمعلمة عندما يتم تعريف الوظيفة في وحدة التحكم. الصيغة العامة لكيفية إتاحة المعلمة $route من وحدة التحكم موضحة أدناه؛

myApp.controller('MyController',function($scope,$route)
  1. myApp هي وحدة angular.JS المحددة لتطبيقاتك
  2. MyController هو اسم وحدة التحكم المحددة لتطبيقك
  3. تمامًا مثلما يتم توفير المتغير $scope لتطبيقك، والذي يُستخدم لتمرير المعلومات من وحدة التحكم إلى العرض. يتم استخدام المعلمة $route للوصول إلى خصائص المسار.

دعونا نلقي نظرة على كيف يمكننا استخدام خدمة $route.

في هذا المثال،

  • سنقوم بإنشاء متغير مخصص بسيط يسمى "mytext"، والذي سيحتوي على السلسلة "This is angular".
  • سنقوم بإرفاق هذا المتغير بمسارنا. وبعد ذلك سنقوم بالوصول إلى هذه السلسلة من وحدة التحكم الخاصة بنا باستخدام خدمة $route ثم نستخدم بعد ذلك كائن النطاق لعرض ذلك في وجهة نظرنا.

لذا، دعونا نرى الخطوات التي يتعين علينا تنفيذها لتحقيق ذلك.

الخطوة 1) أضف زوجًا مخصصًا من قيمة المفتاح إلى المسار. نحن هنا نضيف مفتاحًا يسمى "mytext" ونخصص له قيمة "This is angular".

خدمة المسار $ الزاوي

الخطوة 2) أضف الكود ذي الصلة إلى وحدة التحكم

  1. أضف معلمة المسار $ إلى وظيفة وحدة التحكم. المعلمة $route هي معلمة رئيسية محددة بالشكل الزاوي، والتي تسمح للشخص بالوصول إلى خصائص المسار.
  2. يمكن الوصول إلى المتغير "mytext" الذي تم تعريفه في المسار عبر المرجع $route.current. ثم يتم تعيين هذا إلى متغير "النص" لكائن النطاق. يمكن بعد ذلك الوصول إلى متغير النص من العرض وفقًا لذلك.

خدمة المسار $ الزاوي

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

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

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

الخطوة 3) أضف مرجعًا إلى متغير النص من كائن النطاق كتعبير. ستتم إضافة هذا إلى صفحة Angular.html كما هو موضح أدناه.

سيؤدي هذا إلى إدخال النص "هذا زاوي" في العرض. التعبير {{tutorialid}} هو نفسه الذي رأيناه في الموضوع السابق وهذا سيعرض الرقم "1".

خدمة المسار $ الزاوي

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

الإخراج:

خدمة المسار $ الزاوي

من الإخراج،

  • يمكننا أن نرى أن النص "This is angular" يتم عرضه أيضًا عندما ننقر على أي من الروابط الموجودة في الجدول. يتم أيضًا عرض معرف الموضوع في نفس وقت عرض النص.

تمكين توجيه HTML5

يتم استخدام توجيه HTML5 بشكل أساسي لإنشاء عنوان URL نظيف. يعني إزالة علامة التصنيف من عنوان URL. لذلك ستظهر عناوين URL للتوجيه، عند استخدام توجيه HTML5، كما هو موضح أدناه

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

يُعرف هذا المفهوم عادةً بتقديم عنوان URL جميل للمستخدم.

هناك خطوتان رئيسيتان يجب تنفيذهما لتوجيه HTML2.

  1. تكوين $locationProvider
  2. تحديد قاعدتنا للروابط النسبية

دعونا نلقي نظرة على تفاصيل كيفية تنفيذ الخطوات المذكورة أعلاه في مثالنا أعلاه

الخطوة 1) أضف الكود ذي الصلة إلى الوحدة الزاويّة

  1. إضافة ثابت baseURL إلى التطبيق - يعد هذا مطلوبًا لتوجيه HTML5 حتى يعرف التطبيق الموقع الأساسي للتطبيق.
  2. أضف خدمات $locationProvider. تتيح لك هذه الخدمة تحديد وضع html5Mode.
  3. اضبط html5Mode لخدمة $locationProvider على القيمة true.

تمكين توجيه HTML5

الخطوة 2) قم بإزالة كافة علامات الروابط ("Angular/1"، و"Angular/2"، و"Angular/3") لإنشاء عنوان URL سهل القراءة.

تمكين توجيه HTML5

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

الإخراج:

تمكين توجيه HTML5

من الإخراج،

  • يمكنك أن ترى أن العلامة # غير موجودة عند الوصول إلى التطبيق.

نبذة عامة

  • يتم استخدام التوجيه لتقديم طرق عرض مختلفة للمستخدم على نفس صفحة الويب. هذا هو المفهوم الأساسي المستخدم في تطبيقات الصفحة الواحدة والتي يتم تنفيذها لجميع تطبيقات الويب الحديثة تقريبًا
  • يمكن إعداد مسار افتراضي لتوجيه angular.JS. يتم استخدامه لتحديد العرض الافتراضي الذي سيتم عرضه للمستخدم
  • يمكن تمرير المعلمات إلى المسار عبر عنوان URL كمعلمات المسار. يتم بعد ذلك الوصول إلى هذه المعلمات باستخدام المعلمة $routeParams في وحدة التحكم
  • يمكن استخدام خدمة المسار $ لتحديد أزواج قيمة المفتاح المخصصة في المسار والتي يمكن بعد ذلك الوصول إليها من داخل العرض
  • يتم استخدام توجيه HTML5 لإزالة العلامة # من عنوان URL للتوجيه بشكل زاوي لتشكيل عنوان URL جميل