Angular JS分隔文件控制器

Question

在每個針對AngularJS的教程中，我看到所有控制器都在一個文件controllers.js中。

我認為，更實際的方法是將控制器放在單獨的文件中。

問題是：

如何在AngularJS中創建單獨的控制器？ 如何將控制器CRUD方法放入控制器中（具有這樣的結構）？

Controller Users
 - method get 
 - method add 
 - method edit
 - method delete 

感謝您的幫助和示例。

Answer 1

我建議采用這種方法（請參見下面的示例）

使用Javascript：

// first file, must be include in first in your HTML
var example = angular.module('example', []);

example.factory('IndexModel', function() {
  return {
    get: function() {
      return 'index controller';
    }
  };
});

example.controller('Index', function($scope, IndexModel) {
  $scope.name = IndexModel.get();
});

// other file
var example = angular.module('example'); // angular module is accessible like this

example.factory('UserModel', function() {
  return {
    get: function() {
      return 'user controller';
    }
  }
});

example.controller('User', function($scope, UserModel) {
  $scope.name = UserModel.get();
});

Codepen： http ：//codepen.io/anon/pen/bAvEl

Answer 2

 angular.module('controllers', []);

將其添加到您的angular應用初始化代碼中，然后在每個控制器文件中添加如下內容（並且obvs使用html引用腳本文件）：

(function() {
  angular.module('controllers').controller('UserController', function($scope, $http) {
    // your crud methods
    $http.get('your-user-rest-url').success(function(result) {
      return $scope.user = result;
    });
  });
}).call(this);