Question

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

问题是如何将Controller附加到页面，我看到了两种方法：

将控制器脚本添加到页面
在网站路由所在的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很陌生。

更新为单个Controller文件： 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

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

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

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

如果你担心生产中必须由HTML页面加载两个JS文件，那么一定要学习使用gulp或grunt，并从所用的所有小JS文件中生成一个缩小的JS文件。发展。

编辑：

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

您需要了解浏览器的工作原理：如果HTML包含两个<script>元素，则其工作方式与单个连接两个脚本的代码的方式相同。因此，将代码拆分为两个文件并不会改变代码的编写方式。

Answer 2

不，你的代码很好。我通常为所有路由选项使用两个不同的文件app.js，为不同的控制器使用controller.js文件。单个文件似乎对我来说太杂乱了。每个控制器有一个文件可以工作，但我看到对于大多数用户来说，每页只有几行代码，但是如果你在每个控制器中都有大量的代码，你可以这样做

Answer 3

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

没有严格的方法，你必须根据你的架构设计来决定它。但我可以给你一个提示：从不在你的.html文件中定义你的控制器，因为它使它变得糟糕且可读性差。

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

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

4 个答案: