Question

我必须为Angular中的应用程序构建一个组件，我想知道什么是正确的方法。基本上我需要以下观点：

enter image description here

/items - 仅显示左侧的项目列表

/items/new - 第二个屏幕会保留左侧的项目列表，并显示一个容器，用于在右侧添加项目

/items/1/show - 第三个屏幕左侧有项目列表，右侧显示项目

我的第一个猜测是，最好的方法是为itemsList创建一个指令，为new item创建另一个指令，为show item创建另一个指令。然后我会创建共享相同控制器的3条路由（或不共享），并在这3条路径的视图中放置指令。

但后来我意识到每次更改URL时都会再次调用控制器以及每个指令，因此我的数据将从数据库重新加载。这样做的要点是让左侧的itemsList保持静态，所以如果必须从数据库重新加载，它将失去我想要的可用性。

提前感谢您的回复

Answer 1

您最好的选择是创建一个服务，每个视图使用该服务来保存数据库中的数据。然后，每个控制器只询问服务以呈现数据。

服务是单身，不会在每个新页面上重新创建，而是在应用程序的生命周期内保持活跃状态。

Answer 2

从服务或工厂获取数据的示例如下：

＆＃13;

(function () {
    'use strict';
    
    angular.module('rage').factory('datacontext', ['$http', '$rootScope', '$q', datacontext]);

    function datacontext($http, $rootScope, $q) {        

        var service = {
            getMyData: getMyData,         //     
        };

        return service;
      
      function getMyData(domain, port, controllerpath, sessionID) {
            domain = "localhost:"
            port = "14985";            
            var url = "http://" + domain + port + controllerpath + "?sid=" + sessionID;

            var deferred = $q.defer();
            deferred.notify("Fetching list...");
            var retval = [];
            // ex. http://localhost:14985/api/controller?sid=abf843945b62cda8
            $http({
                method: 'GET',
                encoding: 'JSON',
                url: url,
                headers: {
                    'Access-Control-Allow-Origin': 'true'
                }
            }).success(function (data, status, headers, config) {
                retval = data;
                deferred.resolve(retval);
            });
            return deferred.promise;
        }

      })();

＆＃13;

然后你可以让一个控制器与一个视图相关联，这个控制器可以调用你的服务/工厂：

＆＃13;

(function () {
    'use strict';
    angular.module('rage')
       .controller('MyCtrl', ['$rootScope', '$scope','datacontext', main]);

    function main($rootScope, $scope, datacontext) {

        var settings = this;
      
      
        // Call into your datacontext factory/service
        datacontext.getDimensionsFromServer().then(function (data) {
                if (data.status == 'FAIL') {
                    if (data.messages.length > 0) {
                        console.log("Error retrieving list! ");
                        return;
                    }
                }
                else {
                    var dataSource = data;
                }
            });
      
    };   // end of main()    
})();

＆＃13;

使用app.js文件，在app.run（）

中进行一些初始化

＆＃13;

// inject 'userService' into the app.run event, and create my static list on a $rootscope variable.
(function () {
    'use strict';
    angular.module('myModule', [
       'ui.router',
       'ui.bootstrap',       
    ])
    .run(['$rootScope', 'userService',  init]);

    function init($rootScope, userService) {
        userService.getMyList().then(function (myList) {
            $rootScope.myList = myList;                
        });
    }
})();

＆＃13;

什么是最好的Angular架构？

2 个答案: