مشروع AngularJS التجريبي: كيفية إنشاء تطبيق باستخدام AngularJS

نشرت: 2020-09-10

إذا كنت تتعلم التطوير الكامل ، فلا بد أنك واجهت السؤال ، "كيف تدير مشروع AngularJS؟" لا تقلق لأننا في هذه المقالة سنقوم بمشاركة برنامج تعليمي مفصل حول إنشاء تطبيق باستخدام AngularJS.

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

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

جدول المحتويات

ما هو AngularJS؟ مقدمة مختصرة

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

AngularJS لديها مجتمع مزدهر من المستخدمين والمطورين حيث يمكنك طرح الأسئلة وإزالة ارتباكك. يوفر Angular للمستخدمين ربط البيانات ووحدات التحكم والعديد من الأدوات القوية الأخرى لتحسين الواجهة الأمامية لصفحة الويب. ستكتشف العديد من المفاهيم في مشروعنا حيث سنقوم بتنفيذها في برنامجنا التعليمي.

المتطلبات الأساسية لمشاريع AngularJS للمبتدئين

قبل أن تبدأ العمل في مشاريع AngularJS ، يجب أن تكون على دراية بالمفاهيم التالية:

لغة البرمجة

HTML تعني لغة ترميز النص التشعبي. وهي مسؤولة عن أي بنية صفحة ويب وهي اللبنة الأولى لتطوير الويب. يجب أن تكون على دراية بصيغة HTML وعناصرها وعمليات التنفيذ قبل أن تبدأ العمل في هذا المشروع.

CSS

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

جافا سكريبت

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

بصرف النظر عن هذه المتطلبات الأساسية ، يجب أن تكون على دراية بأساسيات AngularJS. يفترض هذا المشروع أن لديك معرفة عملية بـ HTML و CSS و JS و AngularJS. الآن بعد أن تخلصنا من ذلك ، فلنبدأ.

كيفية تشغيل مشروع AngularJS - البرنامج التعليمي

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

HTML

سنبدأ أولاً بإنشاء HTML لتطبيقنا. هذا هو قالب كود HTML الخاص بنا.

<body ng-app = ”F1FeederApp” ng-controller = ”driversController”>

<جدول>

<رأس>

<tr> <th colspan = ”4 ″> ترتيب بطولة السائقين </ th> </tr>

</thead>

<tbody>

<tr ng-تكرار = ”driver in driversList”>

<td> {{$ index + 1}} </td>

<td>

<img src = ”img / flags / {{driver.Driver.nationality}}. png” />

{{driver.Driver.givenName}} على & nbsp؛ {{driver.Driver.familyName}}

</td>

<td> {{driver.Constructors [0] .name}} </td>

<td> {{driver.points}} </td>

</tr>

</tbody>

</table>

</body>

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

  • {{2 + 2}}
  • {{ اسمي }}

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

تعلم: راتب مطور HTML في الهند: للطلاب الجدد وذوي الخبرة

التوجيهات في قواعدنا

من أهم المفاهيم التي تكتشفها أثناء العمل في مشاريع AngularJS هي التوجيهات. التوجيه هو علامة على عنصر DOM لإبلاغ AngularJS بأنه يجب عليه إرفاق سلوك معين بالعنصر الفردي. يمكن أن يخبر التوجيه Angular بتنفيذ مهام مختلفة مثل تحويل عنصر DOM وتوابعه ، واستبداله بعنصر DOM مختلف. تبدأ معظم التعليمات القوية بـ "ng-" حيث يرمز "ng" إلى Angular.

فيما يلي التوجيهات المختلفة التي استخدمناها في الكود أعلاه ، جنبًا إلى جنب مع تطبيقاتها:

ng- التطبيق

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

نانوغرام تحكم

يحدد هذا التوجيه أي وحدة تحكم تتمتع بقوة رؤية المستخدم. لقد أشرنا إلى driverController في هذا الصدد ، والتي ستوفر قائمة السائقين (قائمة السائقين) في تطبيقنا.

نانوغرام تكرار

هذا التوجيه هو أحد أكثر التوجيهات استخدامًا بين مطوري Angular. يحدد نطاق القالب أثناء التكرار خلال المجموعات.

لدى Angular العديد من التوجيهات ، وبما أنك ستعمل على المزيد من مشاريع AngularJS للمبتدئين ، فسوف تكتشف المزيد من التطبيقات لهم. لهذا السبب نوصي بالعمل في مشاريع مختلفة أثناء تعلم مهارة معينة.

المتحكمات

سيكون الحصول على العرض عديم الفائدة ما لم نضيف وحدة تحكم. لذلك ، سنضيف driverController هنا:

angular.module ('F1FeederApp.controllers'، []).

وحدة تحكم ('driversController' ، وظيفة (نطاق $) {

نطاق $.driversList = [

{

سائق: {

الاسم: سيباستيان ،

اسم العائلة: فيتيل

} ،

النقاط: 322 ،

الجنسية: "ألماني" ،

المنشئون: [

{الاسم: "ريد بُل"}

]

} ،

{

سائق: {

الاسم: فرناندو ،

اسم العائلة: "ألونسو"

} ،

النقاط: 207 ،

الجنسية: "إسباني" ،

المنشئون: [

{الاسم: "فيراري"}

]

}

] ؛

}) ؛

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

سنقوم بإضافة مصفوفة بيانات ثابتة في الوقت الحالي واستبدالها لاحقًا بينما نحرز تقدمًا في مشروعنا.

لنقم أولاً بإضافة وحدة التحكم إلى app.js ، والتي يجب أن تبدو كما يلي:

angular.module ("F1FeederApp" ، [

"F1FeederApp.controllers"

]) ؛

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

<! DOCTYPE html>

<html>

<head>

<title> F-1 Feeder </title>

</head>

<body ng-app = ”F1FeederApp” ng-controller = ”driversController”>

<جدول>

<رأس>

<tr> <th colspan = ”4 ″> ترتيب بطولة السائقين </ th> </tr>

</thead>

<tbody>

<tr ng-تكرار = ”driver in driversList”>

<td> {{$ index + 1}} </td>

<td>

<img src = ”img / flags / {{driver.Driver.nationality}}. png” />

{{driver.Driver.givenName}} على & nbsp؛ {{driver.Driver.familyName}}

</td>

<td> {{driver.Constructors [0] .name}} </td>

<td> {{driver.points}} </td>

</tr>

</tbody>

</table>

<script src = ”bower_components / angular / angular.js”> </script>

<script src = ”bower_components / angular-route / angular-route.js”> </script>

<script src = ”js / app.js”> </script>

<script src = ”js / services.js”> </script>

<script src = ”js / Controllers.js”> </script>

</body>

</html>

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

تحميل البيانات من الخادم

سنقوم الآن بإضافة وظيفة جلب البيانات الحية من خادم RESTful في تطبيقنا. للتواصل مع خوادم HTTP ، لدى AngularjS خدمتان ، http $ ، ومورد $. في الكود الخاص بنا ، سنستخدم http $ لأنه يقدم تجريدًا عالي المستوى. سننشئ خدمة مخصصة لتجريد استدعاءات واجهة برمجة تطبيقات الخادم. سيتم جلب البيانات ويكون غلافًا حول $ http. لذلك ، سنضيف الكود التالي إلى ملف services.js الخاص بنا:

angular.module ('F1FeederApp.services'، []).

مصنع ('ergastAPIservice' ، الوظيفة ($ http) {

var ergastAPI = {} ،

ergastAPI.getDrivers = function () {

إرجاع http $ ({

الطريقة: "JSONP" ،

url: 'http://ergast.com/api/f1/2013/driverStandings.json؟callback=JSON_CALLBACK'

}) ؛

}

عودة إرغاستابي ؛

}) ؛

أنشأنا أولاً وحدة جديدة تسمى F1FeederApp.services وأضفنا خدمة ergastAPIservice. لاحظ أننا مررنا $ http كمعامل للخدمة. سنخبر Angular أيضًا بإضافة الوحدة النمطية الخاصة بنا إلى التطبيق. للقيام بكل ذلك ، يتعين علينا استبدال الكود الموجود في app.js بما يلي:

angular.module ("F1FeederApp" ، [

"F1FeederApp.controllers" ،

"F1FeederApp.services"

]) ؛

سيتعين علينا تعديل controller.js قليلاً وإضافة ergastAPIservice في شكل تبعية ، وبعد ذلك ستنتهي هذه الخطوة:

angular.module ('F1FeederApp.controllers'، []).

وحدة تحكم ('driversController'، function ($ domain، ergastAPIservice) {

نطاق $.nameFilter = فارغ ؛

$ domain.driversList = []؛

ergastAPIservice.getDrivers (). Success (function (response) {

// حفر في المستجيب للحصول على البيانات ذات الصلة

$ domain.driversList = response.MRData.StandingsTable.StandingsLists [0] .DriverStandings؛

}) ؛

}) ؛

للتحقق مما إذا كان الرمز يعمل أم لا ، أعد تحميل التطبيق الخاص بك. ستلاحظ أننا لم نقوم بتعديل القالب ولكننا قمنا فقط بتضمين متغير nameFilter. في القسم التالي ، سنستخدم هذا المتغير:

تطبيق المرشحات

لقد أضفنا حتى الآن وحدة تحكم وظيفية لتطبيقنا. سنقوم الآن بإضافة المزيد من الوظائف إليه عن طريق إضافة شريط إدخال بحث نصي. يمكنك تضمين الكود التالي في index.html الخاص بك أسفل علامة <body>:

<نوع الإدخال = ”text” ng-model = ”nameFilter” placeholder = ”Search…” />

نحن نستخدم التوجيه "ng-model" هنا. سيتم ربط حقل النص بالمتغير "$ domain.nameFilter". يضمن التوجيه أن تظل القيمة المتغيرة لدينا محدثة وفقًا لقيمة الإدخال. دعنا نقول لـ "ng-تكرار" أنه يجب تصفية مصفوفة "driversList" بالقيمة الموجودة في "nameFilter" قبل إخراج البيانات:

<tr ng-تكرار = ”سائق في قائمة السائقين | عامل التصفية: nameFilter ”>

نحن نقوم بتنفيذ ارتباطين مختلفين للبيانات هنا. أولاً ، كلما أدخلت قيمة في حقل البحث ، ستضمن Angular تحديث متغير $ range.nameFilter وفقًا لذلك. ثانيًا ، بمجرد أن يقوم nameFilter بتحديث ng-تكرار ، يحصل التوجيه الثاني المرفق به على قيمة جديدة وتحديث.

افترض أننا نريد التصفية فقط باستخدام Driver.familyName و Driver.givenName. سيتعين علينا إضافة driverController أسفل $ scale.driversList = [] مثل هذا:

$ domain.searchFilter = الوظيفة (السائق) {

var keyword = RegExp جديد ($ scale.nameFilter، 'i') ؛

العودة! $ scale.nameFilter || keyword.test (driver.Driver.givenName) || keyword.test (driver.Driver.familyName) ؛

} ؛

لإنهاء هذه العملية ، علينا فقط تحديث السطر باستخدام التوجيه ng-تكرار:

<tr ng-تكرار = ”سائق في قائمة السائقين | عامل التصفية: searchFilter ”>

يمكنك إعادة تحميل التطبيق لمعرفة ما إذا كان الرمز يعمل أم لا. تطبيقنا الآن لديه وظيفة البحث. بعد ذلك ، سنضيف المسارات.

مضيفا المسارات

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

سنضيف الآن مسارًا لمعلومات السائق وآخر للوحة نتائج البطولة. الآن ، يبدو ملف app.js الخاص بنا كما يلي:

angular.module ("F1FeederApp" ، [

"F1FeederApp.services" ،

"F1FeederApp.controllers" ،

"ngRoute"

]).

config (['routeProvider $'، function (routeProvider $ $) {

$ routeProvider.

عندما (“/ drivers” ، {templateUrl: “جزئي / drivers.html” ، وحدة تحكم: “driversController”}).

عندما (“/ drivers /: id”، {templateUrl: “parts / driver.html”، controller: “driverController”}).

وإلا ({redirectTo: '/ drivers'}) ؛

}]) ؛

بعد إضافة هذا الرمز ، عندما ينتقل المستخدم إلى https: // domain / # drivers ، فسيتم تحميل driverController وتحديد العرض الجزئي. إذا كنت تتابع هذا البرنامج التعليمي حتى الآن ، فلا بد أنك لاحظت شيئًا واحدًا. لم نقم بإضافة المشاهدات الجزئية! لذلك ستكون خطوتنا التالية هي إضافة نفس الشيء إلى تطبيقنا:

إضافة طرق عرض جزئية

ميزة رائعة لـ AngularJS هي أنها تتيح لك ربط طرق مختلفة بمختلف العروض وأجهزة التحكم. ومع ذلك ، لكي تقوم AngularJS بتنفيذ هذا الإجراء ، يجب أن تعرف أين يمكنها عرض تلك العروض الجزئية.

لذلك نحن نستخدم التوجيه ng-view ونضيفه إلى ملف index.html الخاص بنا:

<! DOCTYPE html>

<html>

<head>

<title> F-1 Feeder </title>

</head>

<body ng-app = ”F1FeederApp”>

<ng-view> </ng-view>

<script src = ”bower_components / angular / angular.js”> </script>

<script src = ”bower_components / angular-route / angular-route.js”> </script>

<script src = ”js / app.js”> </script>

<script src = ”js / services.js”> </script>

<script src = ”js / Controllers.js”> </script>

</body>

</html>

بسبب هذا التنفيذ ، عندما ننتقل عبر مسار التطبيق ، فإن Angular سيحمّل العرض ذي الصلة ويعرضه. سيحدد موقع العرض من خلال علامة <ng-view>. الآن ، علينا فقط إنشاء ملف يسمى parts / drivers.html ووضع كود HTML لجدول البطولة هناك. أثناء تواجدنا فيه ، سنقوم أيضًا بربط مسار معلومات السائق الخاص بنا بأسماء السائق:

<نوع الإدخال = ”text” ng-model = ”nameFilter” placeholder = ”Search…” />

<جدول>

<رأس>

<tr> <th colspan = ”4 ″> ترتيب بطولة السائقين </ th> </tr>

</thead>

<tbody>

<tr ng-تكرار = ”سائق في قائمة السائقين | عامل التصفية: searchFilter ”>

<td> {{$ index + 1}} </td>

<td>

<img src = ”img / flags / {{driver.Driver.nationality}}. png” />

<a href="#/drivers/{{driver.Driver.driverId}}">

{{driver.Driver.givenName}} على & nbsp؛ {{driver.Driver.familyName}}

</a>

</td>

<td> {{driver.Constructors [0] .name}} </td>

<td> {{driver.points}} </td>

</tr>

</tbody>

</table>

نحن نصل إلى المراحل النهائية من التطوير. تحتاج صفحة معلومات السائق الخاصة بنا إلى بيانات ، وهذا ما سنضيفه إليها. للقيام بذلك ، يتعين علينا كتابة الكود التالي في services.js:

angular.module ("F1FeederApp.services"، [])

.factory ('ergastAPIservice'، الوظيفة ($ http) {

var ergastAPI = {} ،

ergastAPI.getDrivers = function () {

إرجاع http $ ({

الطريقة: "JSONP" ،

url: 'http://ergast.com/api/f1/2013/driverStandings.json؟callback=JSON_CALLBACK'

}) ؛

}

ergastAPI.getDriverDetails = الوظيفة (المعرف) {

إرجاع http $ ({

الطريقة: "JSONP" ،

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +' / driverStandings.json؟ callback = JSON_CALLBACK '

}) ؛

}

ergastAPI.getDriverRaces = الوظيفة (المعرف) {

إرجاع http $ ({

الطريقة: "JSONP" ،

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +' / results.json؟ callback = JSON_CALLBACK '

}) ؛

}

عودة إرغاستابي ؛

}) ؛

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

angular.module ('F1FeederApp.controllers'، []).

/ * تحكم السائقين * /

وحدة تحكم ('driversController'، function ($ domain، ergastAPIservice) {

نطاق $.nameFilter = فارغ ؛

$ domain.driversList = []؛

$ domain.searchFilter = الوظيفة (السائق) {

var re = RegExp الجديد ($ scale.nameFilter، 'i') ؛

العودة! $ scale.nameFilter || re.test (driver.Driver.givenName) || re.test (driver.Driver.familyName) ؛

} ؛

ergastAPIservice.getDrivers (). Success (function (response) {

// التعمق في الاستجابة للحصول على البيانات ذات الصلة

$ domain.driversList = response.MRData.StandingsTable.StandingsLists [0] .DriverStandings؛

}) ؛

}).

/ * تحكم السائق * /

وحدة تحكم ('driverController'، function ($ range، $ routeParams، ergastAPIservice) {

$ scale.id = routeParams.id $؛

نطاق $ .races = []؛

نطاق $.driver = فارغ ؛

ergastAPIservice.getDriverDetails ($ scale.id) .success (function (response) {

$ domain.driver = response.MRData.StandingsTable.StandingsLists [0] .DriverStandings [0]؛

}) ؛

ergastAPIservice.getDriverRaces ($ scale.id) .success (function (response) {

$ range.races = response.MRData.RaceTable.Races؛

}) ؛

}) ؛

لاحظ أننا أضفنا خدمة routePrams $ في وحدة تحكم السائق. سيسمح لك بالوصول إلى معلمات URL وهي خطوة حاسمة.

سنقوم الآن بإنشاء ملف يسمى parts / driver.html لأننا أضفنا جميع البيانات الضرورية وعلينا فقط معالجة بقية العرض الجزئي. لقد استخدمنا التوجيه ng-show في الكود أدناه. سيضمن التوجيه أن تطبيقنا لا يعرض إلا عنصر HTML الضروري عندما يكون التعبير صحيحًا. هذا يعني أنه حتى إذا كان الشرط فارغًا ، فلن يعرض التطبيق عنصر HTML. ها هو الكود:

<section id = ”main”>

<a href="./#/drivers"> <- رجوع إلى قائمة برامج التشغيل </a>

<nav id = ”Secondary” class = ”main-nav”>

<div class = ”driver-picture”>

<div class = ”avatar”>

<img ng-show = ”driver” src = ”img / drivers / {{driver.Driver.driverId}}. png” />

<img ng-show = ”driver” src = ”img / flags / {{driver.Driver.nationality}}. png” /> <br/>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</div>

</div>

<div class = ”driver-status”>

البلد: {{driver.Driver.nationality}} <br/>

الفريق: {{driver.Constructors [0] .name}} <br/>

الميلاد: {{driver.Driver.dateOfBirth}} <br/>

<a href="{{driver.Driver.url}}" target="_blank”> السيرة الذاتية </a>

</div>

</nav>

<div class = ”main-content”>

<table class = ”result-table”>

<رأس>

<tr> <th colspan = ”5 ″> نتائج Formula 1 2013 </th> </tr>

</thead>

<tbody>

<tr>

<td> جولة </ td> <td> سباق الجائزة الكبرى </ td> <td> الفريق </ td> <td> الشبكة </ td> <td> السباق </ td>

</tr>

<tr ng-تكرار = "سباق في السباقات">

<td> {{racing.round}} </td>

<td> <img src = ”img / flags / {{racing.Circuit.Location.country}}. png” />{{race.raceName}} </td>

<td> {{Race.Results [0] .Constructor.name}} </td>

<td> {{Race.Results [0] .grid}} </td>

<td> {{Race.Results [0] .position}} </td>

</tr>

</tbody>

</table>

</div>

</section>

الخطوات النهائية (CSS)

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

الخروج: راتب Full Stack Developer في الهند

تعرف على المزيد حول التطوير

لقد قمت الآن ببناء تطبيق AngularJS! نأمل أن تكون قد استمتعت بهذا البرنامج التعليمي. تذكر ذلك

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

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

  • أفضل 10 مهارات لتصبح مطورًا متكاملًا
  • لماذا تصبح مطور Full-Stack؟
  • كيف تصبح سلسلة مطوري Full-Stack

من ناحية أخرى ، يمكنك أيضًا الحصول على دورة تطوير متكاملة والتعلم من خبراء الصناعة من خلال المشاريع ومقاطع الفيديو والمهام.

إذا كنت مهتمًا بمعرفة المزيد حول التطوير الكامل ، فراجع دبلومة PG من upGrad و IIIT-B في تطوير البرامج ذات المكدس الكامل والتي تم تصميمها للمهنيين العاملين وتقدم أكثر من 500 ساعة من التدريب الصارم ، وأكثر من 9 مشاريع ، والمهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.

انطلق في وظيفة أحلامك

الترقية و IIIT-BANGALORE دبلوم PG في تطوير البرامج
سجل اليوم