javascript - AngularJS:如何将长 Controller 拆分成模块？

Question

构建我的第一个 Angular 应用程序时，我不明白如何将代码拆分成更小的 block 。我只有一个长期运行的 Controller ，但如果我尝试将代码分成单独的部分( Controller 、服务等)，突然间数据不再绑定(bind)到 View (即我更新数据，但变化是'显示在 View /浏览器中)。

即。我有一个连接到 api 的简单应用程序以获取“书籍”列表，然后显示列表，并允许用户使用分页导航，或获取单本书的更多详细信息，或更新书籍记录(编辑/删除)。

我想将这些功能拆分成单独的 Controller ，例如:

• search Controller :处理表单验证，$http 到 api；
• books(列表):显示来自搜索 api 的结果；
• book(单个) Controller :图书列表中的每个项目都是一个单独的项目，带有诸如“更多详细信息”和“编辑/删除”之类的调用；
• pagination controller:通过书籍列表到下一页/上一页的功能；
• 消息 Controller :在“搜索”、“书籍”或“分页” Controller 中执行操作时显示成功/错误消息。

问题是我不知道如何设置它，因为如果我使用服务来存储/输出“书籍”模型或“消息”模型，当我通过其中一个 Controller 更新此数据时，更改不会自动更新 View (就像我更新链接到 Controller 的 $scope 变量一样)。

据我所知， View 中的 $scope 变量会自动更新，因为 ng-controller="MyCtrl" 绑定(bind)到一个区域。但这将如何与服务一起工作？您不使用 ng-service 标签，对吧...？

假设我让我的 searchController 调用 api，接收所有书籍的 json。我将其放入 booksService 进行存储。然后我的 booksController，它负责更新页面上所有书籍的 ListView ，必须加载这个 booksService 来获取新数据......但它如何知道数据已更新？我如何通过 booksController 链接来自 booksService 的数据，以在 View 中显示新结果？

此外，我将如何构建 booksService——如何让 searchController 传入新数据(以更新可用于模型的持久变量)，然后如何让 booksController 加载进来那个新数据？我是否需要从 booksService 中创建一个调用以将新数据推送到 booksController，或者 booksController 是否应该调用以从 booksService 中拉取新数据(如果是这样，它如何知道何时应该进行拉取)？

此外，searchController 和 paginationController 将通过对同一 API 的匹配查询进行 GET 调用(唯一的区别是查询中的 $page 变量)。我应该使用“服务”(还是工厂？)来解耦 $http.get 请求？

最后，在文件夹/文件结构中构建所有这些 Controller /服务的最佳方式是什么？我应该将每个 block 分开到一个单独的 *.js 文件中吗？我应该使用 require.js 来导入文件吗？在这种情况下，它是网站的单个页面(网站上可能还有其他页面，如此页面)。如果我将代码拆分为单独的文件，我是否应该将每个网页的文件分组到一个文件夹中？ (即，如果我添加“用户仪表板”页面，所有文件都将存储在与“搜索书籍”页面不同的文件夹中)。

抱歉，我知道我问了很多，但这确实可以帮助我了解正确构建 Angular 应用程序所涉及的概念。

Answer 1

以这种方式将所有 Controller 放入 controller.js 文件中。

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

.controller('SearchCtrl', function($scope) {
    //do your search stuff
})
.controller('BookCtrl',function($scope){

})
.controller('PaginationCtrl',function($scope){

})
.controller('MessagesCtrl',function($scope){

});

//in your services.js file

angular.module('starter.services', [])

/**
 * A simple  service that returns some data.
 */

.factory('Search', function() {

  var somedata="from service";

  return {
    sample: function() {
         return somedata;
       }
    }
)};

你可以像这样从任何 Controller 调用工厂服务

.controller('SearchCtrl', function($scope, Search) {
//get data from factory service
    $scope.getdata=Search.sample();

})

也在你的指令文件中

/*
its route map for the application 
all the page navigation are done here
common for the application 
*/
angular.module('app',[
'ui.router'
])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){

    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('home',{
        url:'/',
            templateUrl:'templates/home.html',
            controller:'SearchCtrl'
        })
        .state('about',{
        url:'/about',
            templateUrl:'templates/about.html',
            controller:'aboutCtrl'      
        })

}])

在你的home.html中你可以通过这种方式读取数据

<h2>{{$scope.getdata}}</h2>

查看此链接 (http://ionicframework.com/getting-started/) 并尝试模拟基于选项卡的应用程序工作的示例 tabs 应用程序。带有 angularjs 的 Ionicframework 更适合此类应用程序。