控制器以及它们应该如何在 Angular 中实现？

Question

对不起，如果这看起来是一个愚蠢或简单的问题，但我有点困惑，我一直在寻找许多不同类型的 Angular 教程来理解这个概念以及如何创建应用程序。

问题是如何将控制器附加到页面，我见过两种方法：

1. 将控制器脚本添加到页面
2. 在网站路由所在的 app.js 中显示控制器。

这是我目前所拥有的，如果此代码有任何问题，请告诉我：

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

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/home.html',
        controller: 'homeController'
      }).
      when('/login', {
        templateUrl: 'partials/login.html',
        controller: ''
      }).
      when('/signup', {
        templateUrl: 'partials/signup.html',
        controller: ''
      }).
      when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: ''
      }).
      otherwise({
        redirectTo: '/404',
        templateUrl: 'partials/404.html' 
      });
  }]);

app.controller('homeController', ['$scope', function($scope) {
    $scope.message = "This is the Home Page";
}]);

我还是 Angular 的新手。

更新为单个控制器文件： app.js：

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

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/home.html',
        controller: 'controllers/homeController.js'
      }).
      when('/login', {
        templateUrl: 'partials/login.html',
        controller: ''
      }).
      when('/signup', {
        templateUrl: 'partials/signup.html',
        controller: ''
      }).
      when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: ''
      }).
      otherwise({
        redirectTo: '/404',
        templateUrl: 'partials/404.html' 
      });
  }]);

控制器文件：

app.controller('homeController', ['$scope', function($scope) {
    $scope.message = "This is the Home Page";
}]);

Answer 1

不，您的代码很好。我通常为所有路由选项使用两个不同的文件 app.js，为不同的控制器使用一个 controller.js 文件。一个文件对我来说似乎有点太混乱了。 每个控制器一个文件有效，但我发现对于大多数用户案例来说，我发现每页只有几行代码，但如果每个控制器中都有大量代码，你可以这样做

Answer 2

我为数据库中的每个模型创建一个控制器：例如：ProjectController.js、PeopleController.js 等。我将app.js 用于路由和一般控制器，如页眉、页脚、等等

没有严格的方法来做到这一点，您必须根据您的架构设计来决定它。但我可以给你一个提示：永远不要在你的 .html 文件中定义你的控制器，因为它会变得很糟糕而且可读性较差。

Answer 3

这是纯粹的组织选择。只要浏览器有可用的控制器代码，没关系。

但是，除非您正在创建一个小型演示，否则将所有控制器定义在一个 JavaScript 文件中很快就会变得难以管理：文件太大，您将不断搜索控制器，团队中的每个人都会修改同一个文件，导致冲突等。

简单的规则是：每个 AngularJS 组件一个 JS 文件。

如果您担心生产环境中的 HTML 页面必须加载两个多个 JS 文件，那么请确保学习使用 gulp 或 grunt，并从所有使用的小 JS 文件生成单个缩小的 JS 文件发展。

编辑：

路由的controller属性不应该是JS文件的路径。它应该是控制器的名称。因此，它应该与第一个工作示例中的完全相同。

您需要了解浏览器是如何工作的：如果 HTML 包含两个 <script> 元素，它的工作方式就好像它只有一个并且两个脚本的代码连接在一起一样。所以将代码分成两个文件并不会改变代码的编写方式。

Answer 4

将您的路线规范更改为以下代码：

app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
  when('/', {
    templateUrl: 'partials/home.html',
    controller: 'homeController' //change here
//controller should be the name of the controller,
//not the file containing the controller function
  }).
  when('/login', {
    templateUrl: 'partials/login.html',
    controller: ''
  }).
  when('/signup', {
    templateUrl: 'partials/signup.html',
    controller: ''
  }).
  when('/dashboard', {
    templateUrl: 'partials/dashboard.html',
    controller: ''
  }).
  otherwise({
    redirectTo: '/404',
    templateUrl: 'partials/404.html' 
  });
}]);