javascript $scope - وحدات تحكم متعددة مع AngularJS في تطبيق صفحة واحدة




in services (7)

يمكننا ببساطة الإعلان عن أكثر من وحدة تحكم واحدة في نفس الوحدة. إليك مثال على ذلك:

  <!DOCTYPE html>
    <html>

    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
       </script>
      <title> New Page </title>


    </head> 
    <body ng-app="mainApp"> <!-- if we remove ng-app the add book button [show/hide] will has no effect --> 
      <h2> Books </h2>

    <!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> -->
    <input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow">
             Enter book name: <input type = "text" ng-model = "book.name"><br>
             Enter book category: <input type = "text" ng-model = "book.category"><br>
             Enter book price: <input type = "text" ng-model = "book.price"><br>
             Enter book author: <input type = "text" ng-model = "book.author"><br>


             You are entering book: {{book.bookDetails()}}
     </div>

    <script>
             var mainApp = angular.module("mainApp", []);

             mainApp.controller('bookController', function($scope) {
                $scope.book = {
                   name: "",
                   category: "",
                   price:"",
                   author: "",


                   bookDetails: function() {
                      var bookObject;
                      bookObject = $scope.book;
                      return "Book name: " + bookObject.name +  '\n' + "Book category: " + bookObject.category + "  \n" + "Book price: " + bookObject.price + "  \n" + "Book Author: " + bookObject.author;
                   }

                };
             });
    </script>

    <h2> Albums </h2>
    <input type = "button" value = "Add Album"ng-click="hideShow2=(hideShow2 ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "albumController" ng-if="hideShow2">
             Enter Album name: <input type = "text" ng-model = "album.name"><br>
             Enter Album category: <input type = "text" ng-model = "album.category"><br>
             Enter Album price: <input type = "text" ng-model = "album.price"><br>
             Enter Album singer: <input type = "text" ng-model = "album.singer"><br>


             You are entering Album: {{album.albumDetails()}}
     </div>

    <script>
             //no need to declare this again ;)
             //var mainApp = angular.module("mainApp", []);

             mainApp.controller('albumController', function($scope) {
                $scope.album = {
                   name: "",
                   category: "",
                   price:"",
                   singer: "",

                   albumDetails: function() {
                      var albumObject;
                      albumObject = $scope.album;
                      return "Album name: " + albumObject.name +  '\n' + "album category: " + albumObject.category + "\n" + "Book price: " + albumObject.price + "\n" + "Album Singer: " + albumObject.singer;
                   }
                };
             });
    </script>

    </body>
    </html>

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

هل هذا لأنه لن يكون من الحكمة استخدام وحدات تحكم متعددة لصفحة واحدة؟ أم أنه غير ممكن؟

لنفترض أن لديّ بالفعل وحدة تحكم في شكل صورة ركلة مؤخرًا تعمل في الصفحة الرئيسية ، ولكن بعد ذلك أتعلم كيفية استخدام (modals) وأحتاج إلى وحدة تحكم جديدة لذلك أيضًا (أو أي شيء آخر أحتاج إلى وحدة تحكم). ماذا سأفعل بعد ذلك؟

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

ما هي أفضل طريقة ، أو كيف تفعل ذلك؟

تصحيح

كثير منكم يجيبون ليعلنوا عن وحدتي تحكم ، ثم يستخدمون ng-controller للاتصال به. يمكنني استخدام هذا الجزء من التعليمات البرمجية أدناه ثم استدعاء MainCtrl مع ng-controller.

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/main.html",                                               
         controller:'MainCtrl',                                
        })                                                                      
        .otherwise({                      
            template: 'does not exists'   
        });      
});

لماذا أحتاج حتى إلى تعيين وحدة تحكم هنا إذا كان يمكنني فقط استخدام ng-controller بدونها؟ هذا هو ما أربكني. (ولا يمكنك إضافة جهازي تحكم بهذه الطريقة ، أعتقد ...)


يمكنك أيضًا تضمين جميع عروض القالب في ملف html الرئيسي. فمثلا:

<body ng-app="testApp">
  <h1>Test App</h1>
  <div ng-view></div>
  <script type = "text/ng-template" id = "index.html">
    <h1>Index Page</h1>
    <p>{{message}}</p>
  </script>
  <script type = "text/ng-template" id = "home.html">
    <h1>Home Page</h1>
    <p>{{message}}</p>
  </script>
</body>

بهذه الطريقة إذا كان كل قالب يتطلب وحدة تحكم مختلفة ، فلا يزال بإمكانك استخدام الموجه الزاوي. شاهد هذا العنصر للحصول على مثال عملي http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview

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


<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>
///////////////// OR ////////////


  <div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
    <div class="menu" ng-controller="menuController">
        <p>Other stuff here</p>
    </div>
</div>

menuController من الوصول لقائمة div. ويكون widgetController الوصول إلى كليهما.


أنا حاليا بصدد بناء تطبيق صفحة واحدة. إليكم ما لدي حتى الآن وأعتقد أنه سيجيب عن سؤالك. لدي قالب أساسي (base.html) يحتوي على div بتوجيه ng-view فيه. يخبر هذا التوجيه الزاوي أين تضع المحتوى الجديد. لاحظ أني جديد على angularjs نفسي لذا أنا لا أقول إن هذا هو أفضل طريقة للقيام بذلك.

app = angular.module('myApp', []);                                                                             

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/home/', {                                            
         templateUrl: "templates/home.html",                                               
         controller:'homeController',                                
        })                                                                      
        .when('/about/', {                                       
            templateUrl: "templates/about.html",     
            controller: 'aboutController',  
        }) 
        .otherwise({                      
            template: 'does not exists'   
        });      
});

app.controller('homeController', [              
    '$scope',                              
    function homeController($scope,) {        
        $scope.message = 'HOME PAGE';                  
    }                                                
]);                                                  

app.controller('aboutController', [                  
    '$scope',                               
    function aboutController($scope) {        
        $scope.about = 'WE LOVE CODE';                       
    }                                                
]); 

base.html

<html>
<body>

    <div id="sideMenu">
        <!-- MENU CONTENT -->
    </div>

    <div id="content" ng-view="">
        <!-- Angular view would show here -->
    </div>

<body>
</html>

أعتقد أنك تفتقد إلى معنى "تطبيق الصفحة الواحدة".

هذا لا يعني أنه سيكون لديك ماديا واحدا. html ، بدلا من ذلك سيكون لديك index.html رئيسي واحد والعديد من ملف NESTED .html. فلماذا التطبيق صفحة واحدة؟ نظرًا لأنك بهذه الطريقة لا تقوم بتحميل الصفحات بالطريقة القياسية (أي استدعاء المتصفح الذي يقوم بتحديث الصفحة بالكامل) ولكنك تقوم فقط بتحميل جزء المحتوى باستخدام Angular / Ajax. نظرًا لأنك لا ترى الخفقان بين تغييرات الصفحة ، فلديك انطباع أنك لم تنتقل من الصفحة. وبالتالي ، تشعر وكأنك تقيم في صفحة واحدة.

الآن ، أفترض أنك تريد الحصول على محتويات متعددة لتطبيق SINGLE PAGE الخاص بك: (على سبيل المثال ، المنزل ، جهات الاتصال ، الحافظة والمتجر). سيتم تنظيم الصفحة الواحدة / تطبيق المحتوى المتعدد (الطريقة الزاويّة) بهذه الطريقة:

  • index.html : يحتوي على رأس ، <ng-view> وتذييل
  • contacts.html : يحتوي على نموذج الاتصال (لا يوجد رأس ، لا يوجد تذييل)
  • portfolio.html : يحتوي على بيانات المحفظة (لا يوجد رأس لا يوجد تذييل)
  • store.html : يحتوي على المتجر ، لا يوجد رأس بلا تذييل.

كنت في الفهرس ، انقر فوق القائمة التي تسمى "جهات الاتصال" وماذا يحدث؟ يستبدل الزاوي العلامة <ng-view> بالشفرة contacts.html

كيف حققت هذا؟ مع ngRoute ، كما تفعل ، سيكون لديك شيء مثل:

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/index.html",                                               
         controller:'MainCtrl',                                
        })
        .when('/contacts', {                                            
         templateUrl: "templates/contacts.html",                                               
         controller:'ContactsCtrl',                                
        })                                                                 
        .otherwise({                      
            template: 'does not exists'   
        });      
});

سيؤدي هذا إلى استدعاء html الصحيحة التي تمر وحدة التحكم الصحيحة إليها (يرجى ملاحظة: لا تحدد توجيه ng-controller في contacts.html إذا كنت تستخدم الطرق )

بعد ذلك ، يمكنك بالطبع الإعلان عن أكبر عدد ممكن من أوامر ng-controller داخل صفحة contacts.html. سيكون هؤلاء الأطفال ContactCtrl في ContactCtrl (وبالتالي يرثون منه). ولكن بالنسبة لمسار واحد ، داخل routeProvider ، يمكنك أن تعلن وحدة تحكم واحدة تعمل بمثابة "وحدة تحكم الأب في العرض الجزئي".

EDIT تخيل القوالب التالية / contacts.html

<div>
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

the أعلاه routeProvider حقن وحدة تحكم في تحتوي على div. في الأساس ، يصبح html automaticaly أعلاه:

<div ng-controller="ContactsCtrl">
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

عندما أقول أنه يمكن أن يكون لديك وحدات تحكم أخرى ، يعني ذلك أنه يمكنك توصيل وحدات التحكم بعناصر DOM الداخلية ، كما يلي:

<div>
    <h3>Contacts</h3>
    <p ng-controller="anotherCtrl">Hello {{name}}! This is contacts page...     
    </p>
</div>

آمل أن يوضح هذا الأمور قليلاً.

ا


ما المشكلة؟ لاستخدام وحدات تحكم متعددة ، ما عليك سوى استخدام توجيهات ngController متعددة:

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>

ستحتاج إلى توفر وحدات التحكم في وحدة التطبيق ، كالمعتاد.

يمكن أن تكون أبسط طريقة للقيام بذلك بسيطة مثل الإعلان عن وظائف التحكم مثل هذا:

function widgetController($scope) {
   // stuff here
}

function menuController($scope) {
   // stuff here
}

كمبتدئ لجافا سكريبت MV * وبالتركيز بشكل واضح على بنية التطبيق (وليس المسائل الخادمة / العميل) ، سأوصي بالتأكيد بالمورد التالي (وهو ما أفاجأ لم أذكره بعد): أنماط تصميم جافا سكريبت ، بقلم Addy Osmani ، كمقدمة لأنماط مختلفة من تصميم جافا سكريبت . المصطلحات المستخدمة في هذه الإجابة مأخوذة من المستند المرتبط أعلاه. لن أكرر ما تم صياغته بشكل جيد في الإجابة المقبولة. بدلاً من ذلك ، ترتبط هذه الإجابة بالخلفيات النظرية التي تعمل على السلطة AngularJS (والمكتبات الأخرى).

مثلي ، ستدرك بسرعة أن Ember.js (أو Ember.js ، Durandal ، وأطر MV * الأخرى لهذه المسألة) هي إطار معقد يجمع العديد من أنماط تصميم JavaScript المختلفة.

لقد وجدت أنه من الأسهل أيضًا اختبار (1) شفرة جافا سكريبت الأصلية و (2) مكتبات أصغر لكل واحدة من هذه الأنماط بشكل منفصل قبل الغوص في إطار عالمي واحد. هذا سمح لي بفهم أفضل للقضايا الهامة التي يطرحها إطار العمل (لأنك تواجه المشكلة بنفسك).

فمثلا:

  • برمجة JavaScript Object-oriented (هذا هو رابط بحث Google). إنها ليست مكتبة ، ولكنها بالتأكيد شرط أساسي لأي برمجة تطبيقات. علمني التطبيقات الأصلية للنماذج الأولية ، منشئ ، أنماط المفرد و الديكور
  • jQuery / تسطير ل نمط واجهة (مثل لWYSIWYG عن التلاعب DOM)
  • Prototype.js لل نموذج / منشئ / نمط mixin
  • RequireJS / Curl.js ل وحدة نمط / AMD
  • KnockoutJS ل ملاحظتها، نشر / الاشتراك نمط

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







javascript angularjs controller