Question

我正在使用angularJS开发模块化应用程序。

有一个菜单允许导航多个视图。（我正在使用ngRoute）

每个视图分为几个部分，每个部分应加载一个独立的模块（我们称之为“模块”atm）。这些模块将使用api检索动态数据，这些模块可以在多个视图中使用。

这是最好的方法吗？使用带有模板和控制器的自定义指令？

Answer 1

我会使用＆＃34;模块创建模块。（模块＃）＆＃34;所以你可以分开所有的js文件。因为你正在使用ngroute，所以这样的东西：

MyApp.controller('module.one', function ($scope, $http, $routeParams, moduleOneResource) {...logic... }

为每个模块创建一个工厂：

    angular.module('module.one').factory('moduleOneResource', ['$resource', function ($resource) {
      return $resource('/api_root/module/:module_id', {} {
        'save': {
          method: 'POST',
          headers: {"Content-Type": "application/json"},
        'get': {
          method: 'GET',
          headers: {"Content-Type": "application/json"}, 
         }
        }
      });
    }]);

模块的配置：

angular.module('module.one', []).config(['$routeProvider',
    function($routeProvider) {
    $routeProvider.when('/module/one/new', {templateUrl: 'partials/moduleOne/new.html', controller: 'ModuleOneCtrl'});
    $routeProvider.when('/module/one/list_all', {templateUrl: 'partials/moduleOne/list.html', controller: 'ModuleOneCtrl'});    
    }]);

然后继续为每个模块创建这些文件中的每一个，每个模块应该是3个文件...如果你想要一个模块，你可以在一个控制器文件中包含多个控制器，与工厂相同。

angular.module('module.two', []).config([ .... config module for each module with url routes and html source , etc...

Answer 2

您可以使用ng-include，但我会说使用ui-router而不是ngRoute会更好。 ui-router允许你使用多个命名视图和嵌套视图，这可能是你想要的。例如

<body ng-app="myApp">
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>
</body>

配置

中的

var mypApp = angular.module("myApp",[ui-router]);
myApp.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
    .state('empty', {
        url:'/',
        views: {
            'header': {
                templateUrl: 'apps/header.html',
                controller: headController
            },
            'content': {
                templateUrl: 'apps/content.html'.
                controller: contentController
            },
            'footer': {
                templateUrl : 'apps/footer.html',
                controller: footerController
            }
        }
    })
    .state('test',{
        url:'/test',
        views: {
            'header': {
                templateUrl: 'apps/headertest.html'
                controller: headtTestController
            },
            'content': {
                templateUrl: 'apps/contenttest.html',
                controller: contenTesttController
            },
            'footer': {
                templateUrl : 'apps/footertest.html',
                controller: footerTestController
            }
        }
    })
}]);

这是关于如何将应用划分为多个ui视图的基本示例，您可以使用具有控制器的每个视图类似地分配您的应用。

AngularJS加载部分视图

2 个答案: