Nhiều bộ điều khiển với AngularJS trong ứng dụng trang đơn

Tôi muốn biết cách sử dụng nhiều bộ điều khiển cho một ứng dụng trang. Tôi đã cố gắng tìm ra và nhận thấy các câu hỏi rất giống với câu hỏi của tôi, nhưng có rất nhiều câu trả lời khác nhau giải quyết một vấn đề cụ thể mà cuối cùng bạn không sử dụng nhiều bộ điều khiển cho một ứng dụng trang.

Đó có phải là vì sẽ không khôn ngoan nếu sử dụng nhiều bộ điều khiển cho một trang? Hay là nó chỉ là không thể?

Giả sử tôi đã có bộ điều khiển băng chuyền hình ảnh kick-ass hoạt động trên trang chính, nhưng sau đó tôi học cách (giả sử) sử dụng các phương thức và tôi cũng cần một bộ điều khiển mới cho điều đó (hoặc bất kỳ thứ nào khác mà tôi cần một bộ điều khiển). Tôi sẽ làm gì sau đó?

Tôi đã thấy một số câu trả lời cho những câu hỏi khác mà họ hỏi về những điều gần giống như tôi và mọi người trả lời "* OMG. Tại sao bạn thậm chí sẽ làm điều đó, chỉ cần làm điều này ...".

Cách tốt nhất là gì, hoặc làm thế nào để bạn làm điều đó?

Biên tập

Nhiều bạn trả lời chỉ cần khai báo 2 controller rồi dùng ng-controller để gọi nó. Tôi sử dụng đoạn mã này bên dưới và sau đó gọi MainCtrl bằng ng-controller.

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

Tại sao tôi thậm chí cần đặt một bộ điều khiển ở đây nếu tôi chỉ có thể sử dụng ng-controller mà không cần nó? Đây là điều khiến tôi bối rối. (và bạn không thể thêm hai bộ điều khiển theo cách này, tôi nghĩ ...)

Vấn đề là gì? Để sử dụng nhiều bộ điều khiển, chỉ cần sử dụng nhiều lệnh ngController:

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

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

Bạn sẽ cần có bộ điều khiển có sẵn trong mô-đun ứng dụng của mình, như thường lệ.

Cách cơ bản nhất để làm điều đó có thể đơn giản như khai báo các chức năng của bộ điều khiển như sau:

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

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

Tôi nghĩ rằng bạn đang thiếu ý nghĩa "ứng dụng trang đơn".

Điều đó không có nghĩa là bạn sẽ có một tệp .html, thay vào đó bạn sẽ có một index.htmltệp .html chính và một số tệp .html NESTED. Vậy tại sao lại là ứng dụng trang đơn? Bởi vì cách này bạn không tải các trang theo cách chuẩn (tức là lệnh gọi của trình duyệt làm mới hoàn toàn toàn bộ trang) mà bạn chỉ tải phần nội dung bằng Angular / Ajax. Vì bạn không thấy sự chập chờn giữa các lần thay đổi trang, bạn có ấn tượng rằng bạn đã không di chuyển khỏi trang. Vì vậy, bạn cảm thấy như bạn đang ở trên một trang duy nhất.

Bây giờ, tôi giả sử rằng bạn muốn có NHIỀU nội dung cho ứng dụng SINGLE PAGE của mình: (ví dụ: nhà riêng, danh bạ, danh mục đầu tư và cửa hàng. Trang đơn / ứng dụng nhiều nội dung của bạn (theo cách góc cạnh) sẽ được tổ chức theo cách này:

• index.html: chứa đầu <ng-view>trang và chân trang
• contacts.html: chứa biểu mẫu liên hệ (không có đầu trang, không có chân trang)
• portfolio.html: chứa dữ liệu danh mục đầu tư (không có đầu trang không có chân trang)
• store.html: chứa cửa hàng, không có đầu trang không có chân trang.

Bạn đang ở trong chỉ mục, bạn nhấp vào menu có tên "danh bạ" và điều gì sẽ xảy ra? Angular thay thế <ng-view>thẻ bằng contacts.htmlmã

Làm thế nào để bạn đạt được điều đó? với ngRoute, như bạn đang làm, bạn sẽ có một cái gì đó như:

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'   
        });      
});

Điều này sẽ gọi html bên phải chuyển bộ điều khiển phù hợp đến nó (xin lưu ý: không chỉ định ng-controllerchỉ thị trong contacts.htmlnếu bạn đang sử dụng các tuyến )

Sau đó, tất nhiên, bạn có thể khai báo bao nhiêu lệnh ng-controller bên trong trang contact.html của mình. Đó sẽ là những bộ điều khiển con của ContactCtrl(do đó kế thừa từ nó). Nhưng đối với một tuyến duy nhất, bên trong routeProvider, bạn có thể khai báo một Bộ điều khiển duy nhất sẽ hoạt động như "Bộ điều khiển cha của chế độ xem từng phần".

CHỈNH SỬA Hãy tưởng tượng các mẫu sau / contact.html

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

ở trên routeProvidersẽ đưa một bộ điều khiển vào div chứa của bạn. Về cơ bản, autoaly html ở trên trở thành:

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

Khi tôi nói rằng bạn có thể có bộ điều khiển khác, có nghĩa là bạn có thể cắm bộ điều khiển vào các phần tử DOM bên trong, như sau:

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

Tôi hy vọng điều này làm sáng tỏ mọi thứ một chút.

A

Tôi hiện đang trong quá trình xây dựng một ứng dụng trang đơn. Đây là những gì tôi có cho đến nay mà tôi tin rằng sẽ trả lời câu hỏi của bạn. Tôi có một mẫu cơ sở (base.html) có một div với ng-viewchỉ thị trong đó. Lệnh này cho góc biết vị trí để đưa nội dung mới vào. Lưu ý rằng bản thân tôi là người mới làm quen với anglejs nên tôi không có ý nói đây là cách tốt nhất để làm điều đó.

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>

<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 có quyền truy cập vào div menu. Và widgetController có quyền truy cập vào cả hai.

Chúng ta có thể khai báo nhiều hơn một Controller trong cùng một module. Đây là một ví dụ:

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

Tôi chỉ đặt một khai báo đơn giản của ứng dụng

var app = angular.module("app", ["xeditable"]);

Sau đó, tôi đã xây dựng một dịch vụ và hai bộ điều khiển

Đối với mỗi bộ điều khiển, tôi có một dòng trong JS

app.controller('EditableRowCtrl', function ($scope, CRUD_OperService) {

Và trong HTML, tôi đã khai báo phạm vi ứng dụng trong một div xung quanh

<div ng-app="app">

và từng phạm vi bộ điều khiển riêng biệt trong div xung quanh của riêng chúng (trong div ứng dụng)

<div ng-controller="EditableRowCtrl">

Điều này hoạt động tốt

Bạn cũng có thể nhúng tất cả các dạng xem mẫu vào tệp html chính của mình. Ví dụ:

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

Bằng cách này nếu mỗi mẫu yêu cầu một bộ điều khiển khác nhau thì bạn vẫn có thể sử dụng bộ định tuyến góc. Xem plunk này để biết ví dụ hoạt động http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview

Bằng cách này khi ứng dụng được gửi từ máy chủ đến máy khách của bạn, nó hoàn toàn độc lập giả định rằng nó không cần thực hiện bất kỳ yêu cầu dữ liệu nào, v.v.