这个问题对我来说也很重要。AngularJS主页上有一些示例（您可以将其称为小部件），因此我浏览了它们的源代码以尝试查看它们如何分隔小部件。
首先，他们从不声明“ ng-app”属性。他们使用
function bootstrap() {
if (window.prettyPrint && window.$ && $.fn.popover && angular.bootstrap &&
hasModule('ngLocal.sk') && hasModule('ngLocal.us') && hasModule('homepage') && hasModule('ngResource')) {
$(function(){
angular.bootstrap(document, ['homepage', 'ngLocal.us']);
});
}
}
确保所有内容均正确加载。想法很简洁，但是奇怪的是，他们将ng-app属性压在您身上太多了，甚至根本没有使用它。无论如何，这是他们随应用程序加载的主页模块-http: //angularjs.org/js/homepage.js
其中有一个名为appRun的指令
.directive('appRun', function(fetchCode, $templateCache, $browser) {
return {
terminal: true,
link: function(scope, element, attrs) {
var modules = [];
modules.push(function($provide, $locationProvider) {
$provide.value('$templateCache', {
get: function(key) {
var value = $templateCache.get(key);
if (value) {
value = value.replace(/\#\//mg, '/');
}
return value;
}
});
$provide.value('$anchorScroll', angular.noop);
$provide.value('$browser', $browser);
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
});
if (attrs.module) {
modules.push(attrs.module);
}
element.html(fetchCode(attrs.appRun));
element.bind('click', function(event) {
if (event.target.attributes.getNamedItem('ng-click')) {
event.preventDefault();
}
});
angular.bootstrap(element, modules);
}
};
})
我将以“待办事项”列表为例。对于html，他们有
<div app-run="todo.html" class="well"></div>
然后在页面底部
<script type="text/ng-template" id="todo.html">
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</script>
他们还有
<style type="text/css" id="todo.css">
<script id="todo.js"> </script>
使用了代码，但是这些脚本上的id属性对于运行应用程序并不重要。那只是为了在应用程序左侧显示源代码。
基本上，他们有一个名为appRun的指令，该指令使用函数fetchCode
.factory('fetchCode', function(indent) {
return function get(id, spaces) {
return indent(angular.element(document.getElementById(id)).html(), spaces);
}
})
来获取代码。然后，他们使用angular.bootstrap（）创建一个新的应用程序。他们还可以通过应用运行来加载模块。JavaScript项目示例的初始化方式如下
<div app-run="project.html" module="project" class="well"></div>
希望这会有所帮助。我仍然不确定什么是“最佳”技术，但看来AngularJS主页只是为每个示例/小部件使用了完全独立的Angular应用程序（ng-app）。我想我会做同样的事情，除了更改fetchCode函数以使用AJAX获取内容。