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加載部分視圖

回答

相關問題