تتم العديد من المشاريع على خادم الويب. الواجهة الأمامية والداخل الخلفي كتابة رمز JSP. يحتاج كلا الطرفين إلى العمل بشكل وثيق لتمييز المسؤوليات. توفر بعض المشاريع طرقًا مريحة من قبل الواجهة الخلفية ، وتدعو الواجهة الأمامية نفسها إلى حلقة Ajax. هذا عادة ما يكون الكثير من سلاسل تهجئة jQuery ، والتي هي غير بديهية للغاية. قام بعض الأشخاص بإنشاء قالب JS ، لكنه ليس أفضل بكثير.
من الممتع استخدام AngularJS ، وبناء الجملة يشبه JSP:
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <title> ng-repeat التوجيه </title> </head> <body> <table ng-controller = "cartController"> السعر </th> <th> الكمية </th> <th> المبلغ </th> <th> العملية </th> </tr> <ttr ng-repeat = "item in heads"> <td> {$ index + 1}} </td> <td> {{item.name}}} </td> العملة}} </td> <td> <input ng-model = "item.quantity"> </td> <td> {{item.quantity * item.price | العملة}}} </td> <td> <button ng-click = "remove ($ index)"> إزالة </button> </td> </td> </tr> </table> <script src = "../ lib/angularjs/1.2.26/Angular.min.js"> </script> funct {name: "Rapoo (Rapoo) V500 Mechanical Game Keyboard المحور الأصفر الميكانيكي" ، الكمية: 1 ، السعر: 199.00} ، {name: "RapoO V20 Gaming Gaming Mouse Black Flame Edition" ، الكمية: 1 ، السعر: 139.00} ، {name: "tutorial tutorial ، Quantity: 2 ، 84.20}] ؛ $ scope.remove = function (index) {$ scope.items.splice (index ، 1) ؛ }} </script> </body> </html>حياة توجيه Ng-Repeat هي على العناصر التي تحتاج إلى حلقة المحتوى. تتوافق العناصر مع الأسماء المتغيرة على وحدة التحكم. العنصر هو الاسم المستعار لكائن واحد في الصفيف. يمكن لـ $ Index إرجاع رقم الطلب للكائن المرجعي الحالي ، بدءًا من 0 و $ First و $ Middle و $ Last Retring Boolean Load لإخبارك ما إذا كان العنصر الحالي هو العنصر الأخير في منتصف المجموعة الأولى.