2

أرجو المساعدة.. سؤال في AngularJS عن هيكلية تطبيق

السلام عليكم جميعاً

لدي مشكلة وأتمنى أن أجد أحداً يستطيع مساعدتي في هذا المجتمع الرائع

سؤالي عن بنية أو هيكلية structure تطبيق بكامله ، كيف يمكنني معرفة ماهي أصح طريقة لبناء التطبيق ؟

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

وها أنا الآن عندما أريد إضافة أي شيء أو تعديل أي شيء على التطبيق أواجه صعوبة كبيرة بسبب العدد الكبير من الصفحات أو templates التي لدي .. (تختلف الـ templates فيما بينها فقط بأسماء الـ controllers التي تحتويها و بالصور المضافة لها.. < "..."= img src > وببعض الأشياء الأخرى البسيطة جداً..

أردت استخدام ng-repeat ولكنني أعلم أننا بإمكاننا استخدامها على العناصر والقوائم وعناصر المصفوفات وو.. ولكن هل نستطيع استخدامها مع ؟ وأين سيكون مكانها عندئذِ ؟؟

أتمنى أن أكون قد استطعت شرح الحالة التي أعاني منها :$ برأيكم كيف يمكنني حل تلك المشكلة ؟ وهل من مساعدة ؟


1
ahmed issa أضف ردا

بخصوص App Structure من ناحية ترتيب الملفات.

شرح جميل من john papa

اما هنا يوجد شرح عام عن angularjs واعتقد هم شئ لك فقرة directive

نصيحة.. controller ليس له اي شأن بتلاعب في view

.. ايضا القي نظرة على ui-router

ملاحظة .. استخدم ng-src بدلا من src لصور

0
Bushra First أضف ردا

شكراً جزيلاً على المساعدة :)

لم أنتبه أن هناك كلمة ناقصة في هذه الجملة لذا سأعيدها

أردت استخدام ng-repeat ولكنني أعلم أننا بإمكاننا استخدامها على العناصر والقوائم وعناصر المصفوفات وو.. ولكن هل نستطيع استخدامها مع ؟ وأين سيكون مكانها عندئذِ ؟؟

1
ahmed issa أضف ردا

الجملة لم تتغير !

| أو أي شيء آخر يجنبني التكرار | تكرار ماذا ممكن مثال ؟

0
Bushra First أضف ردا

عفواً عفواً ، مع أنني أضفتها بشكل صحيح ! ولكن لم أنتبه للتعليق بعد إرساله ! يبدو أن هناك شيء ما يمنعني من كتابة الكود بهذا الشكل هُنا ..

الجملة كانت :

"ولكن هل نستطيع استخدامها مع ion-view "

وهي directive ربما يمكنني القول أنها مشابهة لـ ngView ولكن ضمن ionic framework وهو framework خاص بتطبيقات الهواتف الذكية مبني على angularjs

في التطبيق الذي قمت بالعمل عليه لدي عدد كبير من صفحات html والتي هي عبارة عن templates وكل واحدة منها عبارة عن ion-view بداخلها عدة عناصر ...

1
ahmed issa أضف ردا

الحل المشكلة مع ng-repeat غير صحيح

المشكلة هنا مشكلة هيكلة التطبيق.

اول شئ ساقوم به هو كتابة factory او service لتزويد التطبيق بمعلومات عن الصور/ة

حتى لو كانت المعلومات محلية ليست من سيرفر

بعدها router او states

مثلا التطبيق تطبيق خلفيات // الكود غير كامل

$stateProvider
.state('Backgrounds', {
  url: "/backgrounds",
  templateUrl: "backgrounds.html",
  controller: 'BackgroundsCtrl'
});
.state('Background', {
  url: "/backgrounds/:id",
  templateUrl: "background.html",
  controller: 'BackgroundCtrl'
});



<script id="backgrounds.html" type="text/ng-template">
    <ion-view view-title="Backgrounds">
        <ion-content>
            <div ng-repeat="backgroud in backgrounds"> 
                <h3> backgroud.title </h3>
                <img ng-src="backgroud.url"/>
            </div>
        </ion-content>
    </ion-view>
</script>


controller('BackgroundsCtrl', [$scope, 'backgroundsFactory',function($scope,backgroundsFactory) {
    $scope.backgrounds = backgroundsFactory.getBackrounds();
}]);

طبعا controller يتواصل مع factory أو service بعدها يغير template حسب المعلومات.

هذه اسهل طريقة :)

1
Bushra First أضف ردا

جميل جداً، جزاكم الله كل خير

يبدو أنه بقي فقط كتابة الـ backgroundsFactory في الكود السابق لأستطيع استخدامه