AngularJS 1.6.7控制器拆分及组件化重构方案咨询

Hey there! Let's walk through exactly how to split your monolithic controllers file into individual components following AngularJS 1.5+ best practices. This will make your code way cleaner, more maintainable, and align with modern Angular patterns.

First, let's organize your files to follow a component-centric structure. Ditch the single controllers.js file and create a dedicated folder for each component, holding both its logic and template. Here's a recommended setup:

src/
├── app.js
├── components/
│   ├── home/
│   │   ├── home.component.js
│   │   └── home.template.html
│   ├── user/
│   │   ├── user.component.js
│   │   └── user.template.html
│   └── ... (add folders for every other controller you have)
└── services/
    └── ... (keep your existing service files here)

AngularJS 1.5 introduced components as the preferred alternative to standalone controllers—they encapsulate template, logic, and data binding all in one place. Let's convert your old $scope-based controller to a component:

Old Controller Example (from controllers.js): #

.controller('HomeController', ['$scope', function ($scope) {
  $scope.greeting = 'Hello from Home!';
  $scope.doSomething = function() {
    // Your existing logic here
  };
}])

New Component Implementation: #

Create src/components/home/home.component.js:

// Register the component directly to your main 'app' module
angular.module('app')
  .component('homeComponent', {
    templateUrl: 'src/components/home/home.template.html', // Link to the component's template
    controller: HomeController
  });

// Controller function (no $scope needed—use 'vm' for view model)
function HomeController() {
  var vm = this; // Alias 'this' to avoid context issues

  // Initialize properties and methods just like you did with $scope
  vm.greeting = 'Hello from Home!';
  vm.doSomething = function() {
    console.log('Doing something in the Home component!');
    // Your existing logic here (replace $scope with vm)
  };
}

// If you need dependencies (like $http), add explicit injection for minification safety
// HomeController.$inject = ['$http'];

Then create the matching template src/components/home/home.template.html:

<!-- Use $ctrl to access the controller's properties/methods -->
<h1>{{ $ctrl.greeting }}</h1>
<button ng-click="$ctrl.doSomething()">Click Me!</button>

A few key notes here:

• We use vm (view model) instead of $scope to avoid scope inheritance bugs.
• Templates reference the controller via $ctrl (the default component controller alias).
• Explicit dependency injection (via $inject) is a best practice to prevent issues when minifying your code.

Your original app.js depended on a controllers module—we can remove that since each component now registers directly to the main app module.

Old app.js: #

var app = angular.module('app', ['services', 'controllers']);

New app.js: #

angular.module('app', ['services']); // Remove the 'controllers' dependency

Make sure to load all your component files in your index.html (order matters—load app.js first, then services, then components):

<script src="app.js"></script>
<script src="services/your-service-file.js"></script>
<script src="components/home/home.component.js"></script>
<script src="components/user/user.component.js"></script>
<!-- Add other component scripts here -->

Instead of using ng-controller to attach your old controllers, you'll now use the component's tag in your HTML.

Old View Code: #

<div ng-controller="HomeController">
  <!-- Home content here -->
</div>

New View Code: #

<home-component></home-component>

Note: Component names in JavaScript are camelCase (homeComponent), but in HTML we use kebab-case (home-component).

If your old controllers relied on $scope to receive data from parent controllers or routes, components use bindings to handle this cleanly. For example, if you had a UserController that received a userId:

Component with Bindings: #

// src/components/user/user.component.js
angular.module('app')
  .component('userComponent', {
    templateUrl: 'src/components/user/user.template.html',
    controller: UserController,
    bindings: {
      userId: '<' // One-way binding (recommended for most cases)
    }
  });

function UserController() {
  var vm = this;

  // $onInit is a lifecycle hook called when bindings are ready
  vm.$onInit = function() {
    console.log('User ID:', vm.userId); // Access bound value via vm
  };
}

Using the Component with Data: #

<!-- Pass data using kebab-case attribute -->
<user-component user-id="currentUser.id"></user-component>

• Modularity: Each component is self-contained, making it easier to test, reuse, and debug.
• Future-Proof: Component-based structure mirrors Angular (2+), so upgrading later will be smoother.
• Less Scope Headaches: Ditching $scope for view models eliminates common scope inheritance bugs.

内容的提问来源于stack exchange，提问作者phpguy