AngularJS 加载局部 View

Question

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

有一个菜单允许在多个 View 中导航。 (我正在使用 ngRoute)

每个 View 都分为几个部分，每个部分都应该加载一个独立的模块(我们称之为“模块”atm)。这些模块将使用 API 检索动态数据，并且这些模块可以在多个 View 中使用。

哪种方法最好？将自定义指令与模板和 Controller 一起使用？

Answer 1

我会用“module.(module #)”创建模块，这样你就可以分隔所有的 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 个文件...如果你想为一个模块添加多个 Controller ，例如在一个 Controller 文件中，与工厂相同。

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