AngularJS加载部分视图

我正在开发一个带有angularJS的模块化应用程序。AngularJS加载部分视图

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

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

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

2016-02-11 skd

你看过这里吗？ https://docs.angularjs.org/api/ng/directive/ngInclude或http://stackoverflow.com/questions/13943471/angularjs-ng-include – jcc

我建议你使用新的组件指令（https：/ /docs.angularjs.org/guide/component）在Angular 1.5中。这个指令为你提供类似的功能，比如ui-views，它是内置的。 – fabwu

我会用“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个文件...如果您想要为一个模块使用工厂，则可以在一个控制器文件中包含多个控制器。

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

来源

2016-02-11 20:38:13 FRECIA

你可以使用NG-包括这一点，但我要说它能够更好地使用UI的路由器，而不是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的意见，你可以与具有控制器的每个视图同样devide您的应用程序。

来源

2016-02-11 20:09:15 Nijeesh

AngularJS加载部分视图

回答

相关问题