logo标签列表

AngularJS 加载部分视图。

angularjs
3

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

有一个菜单，可以通过多个视图进行导航。(我使用ngRoute)

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

哪种方法是最好的？使用自定义指令为每个模块创建一个模板和控制器吗？

enter image description here

你看过这里吗？https://docs.angularjs.org/api/ng/directive/ngInclude 或者 https://dev59.com/TGYr5IYBdhLWcg3wH2vK - jcc
1
我建议您在Angular 1.5中使用新的组件指令（https://docs.angularjs.org/guide/component）。这个指令提供了类似ui-views的功能，并且是内置的。 - fabwu
2个回答
2
我会创建带有“模块名.(模块号码)”的模块，以便您可以分离所有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...
0
你可以使用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视图，您可以类似地划分您的应用程序，每个视图都有一个控制器。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接