この質問も私にとって非常に重要です。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);
}
};
})
例としてToDoリストを使用します。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属性は、アプリの実行には重要ではありません。これは、アプリの左側に表示されるソースコード用です。
基本的に、関数fetchCodeを使用するappRunというディレクティブがあります。
.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ホームページは、例/ウィジェットごとに完全に別個の角度アプリケーション（ng-app）を使用しているように見えます。私は同じことをするつもりだと思いますが、fetchCode関数を変更してAJAXで何かを取得する点が異なります。