Implementing Multiple Controllers in AngularJS Single Page Applications

Fundamental Principles of Multi-Controller Architecture

In AngularJS single page application development, using multiple controllers is a common requirement for building complex applications. Each controller is responsible for managing the data and logic of specific view components, and this modular design helps improve code maintainability and testability.

Direct Application of ng-controller Directive

The most straightforward approach to implementing multiple controllers is using multiple ng-controller directives in HTML templates. For example, a page can simultaneously include an image carousel controller and a modal controller:

<div class="carousel-container" ng-controller="CarouselController">
    <!-- Carousel component content -->
</div>

<div class="modal-container" ng-controller="ModalController">
    <!-- Modal content -->
</div>

The corresponding controller definitions:

function CarouselController($scope) {
    $scope.images = [];
    $scope.currentIndex = 0;
    
    $scope.nextSlide = function() {
        // Carousel logic implementation
    };
}

function ModalController($scope) {
    $scope.isVisible = false;
    
    $scope.openModal = function() {
        $scope.isVisible = true;
    };
    
    $scope.closeModal = function() {
        $scope.isVisible = false;
    };
}

Controller Specification in Route Configuration

When using AngularJS routing, you can specify the main controller for each route in $routeProvider:

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'templates/main.html',
            controller: 'MainController'
        })
        .when('/contacts', {
            templateUrl: 'templates/contacts.html',
            controller: 'ContactsController'
        })
        .otherwise({
            template: '<p>Page not found</p>'
        });
});

In this scenario, the routing automatically injects the specified controller into the corresponding template, eliminating the need to explicitly use the ng-controller directive in the template.

Controller Scope and Inheritance Relationships

In nested controller scenarios, child controllers inherit the scope of parent controllers. This inheritance is implemented through prototype chains:

<div ng-controller="ParentController">
    <p>Parent controller data: {{parentData}}</p>
    
    <div ng-controller="ChildController">
        <p>Child controller data: {{childData}}</p>
        <p>Inherited parent data: {{parentData}}</p>
    </div>
</div>

Corresponding controller implementation:

function ParentController($scope) {
    $scope.parentData = 'Data from parent controller';
}

function ChildController($scope) {
    $scope.childData = 'Data specific to child controller';
    // Can access $scope.parentData
}

Best Practice Recommendations

1. Single Responsibility Principle: Each controller should focus on specific functional modules, avoiding excessive complexity.

2. Scope Management: Properly plan controller scope boundaries to avoid unnecessary dependencies and coupling.

3. Communication Mechanisms: For scenarios requiring cross-controller communication, use services or event mechanisms ($emit, $broadcast).

4. Code Organization: Organize related controllers, services, and directives in independent modules to enhance code maintainability.

Practical Application Example

Consider organizing controllers in an e-commerce single page application:

// Product list controller
function ProductListController($scope, ProductService) {
    $scope.products = [];
    
    ProductService.getProducts().then(function(response) {
        $scope.products = response.data;
    });
    
    $scope.addToCart = function(product) {
        // Add to cart logic
    };
}

// Shopping cart controller
function CartController($scope, CartService) {
    $scope.cartItems = [];
    
    $scope.updateQuantity = function(item, newQuantity) {
        CartService.updateQuantity(item.id, newQuantity);
    };
    
    $scope.removeItem = function(itemId) {
        CartService.removeItem(itemId);
    };
}

// User information controller
function UserController($scope, UserService) {
    $scope.user = {};
    
    $scope.login = function(credentials) {
        UserService.login(credentials).then(function(user) {
            $scope.user = user;
        });
    };
}

Through this architecture, each functional module has an independent controller for management, ensuring functional independence while facilitating team collaborative development.