이 질문은 나에게도 매우 중요합니다. 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)을 사용하는 것처럼 보입니다. AJAX로 물건을 얻기 위해 fetchCode 함수를 변경하는 것을 제외하고는 똑같이 할 것이라고 생각합니다.