[Javascript] وحدات تحكم متعددة مع AngularJS في تطبيق صفحة واحدة


Answers

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

هذا لا يعني أنه سيكون لديك ماديا واحدا. 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>

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

ا

Question

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

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

لنفترض أن لديّ بالفعل وحدة تحكم في شكل صورة ركلة مؤخرًا تعمل في الصفحة الرئيسية ، ولكن بعد ذلك أتعلم كيفية استخدام (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 بدونها؟ هذا هو ما أربكني. (ولا يمكنك إضافة جهازي تحكم بهذه الطريقة ، أعتقد ...)




<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 الوصول إلى كليهما.




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

  <!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>