AngularJS加载部分视图


AngularJS loading partial views

我正在用AngularJS开发一个模块化应用程序。

有一个菜单允许在多个视图中导航。(我正在使用ngroute)

每个视图分为几个部分，每个部分应该加载一个独立的模块(我们称之为"模块"ATM)。这些模块将使用API检索动态数据，这些模块可以在多个视图中使用。

哪种方法最好？对每个模板和控制器使用自定义指令？

enter image description here

相关讨论

我将使用"module.(module)"创建模块，这样您就可以分离所有JS文件。因为你使用的是ngroute：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
    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"},
         }
        }
      });
    }]);

以及模块的配置：

1
2
3
4
5
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个文件…如果要为一个模块包括多个控制器，例如，在一个控制器文件中可以包含多个控制器，与工厂相同。

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

您可以使用ng include，但我认为最好使用ui路由器而不是ngroute。UI路由器允许您使用多个命名视图和嵌套视图，这可能是您想要的。例如

1
2
3
4
5
<body ng-app="myApp">
   
   
   
</body>

配置中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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视图的基本示例，您可以使用具有控制器的每个视图对应用程序进行类似的划分。