问题描述
我有一个需要单独的角度应用加载一个用例。
I have a use case that requires the loading of separate angular applications.
href=\"https://groups.google.com/forum/#!msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ\">这个谷歌线程，这是可行的。但是，我无法得到它的工作。
Based on several stack overflow questions and this google thread, it's doable. However, I can't get it to work.
综观文档：
http://docs.angularjs.org/api/angular.bootstrap
看起来你需要提供元（什么是得到元件上的手柄以正确的方式？），然后如何配合回配置，控制器等而如何将与路线这项工作？ IE浏览器如何做碰撞的工作，即应用程序A和附录二图/富来/fooa.html和/foob.html分别...或者每个应用程序描述自己的。否则？
It looks like you need to provide the element (what is the right way to get a handle on the element?), and then how to tie it back to config, controllers, etc. And how would this work with routes? IE how does collision work, ie app a and app b map /foo to /fooa.html and /foob.html respectively... or each app describes its own .otherwise?
谢谢！
推荐答案
所以，考虑到这是服务驱动的内容，我可以看到这样做是种角度和标准的HTML规范之间的混合的唯一途径的要求。有效的，你会想从plunker本书采取了页面，并使用iframe包含每个portlet中。
So given the requirement that this be a service driven content the only way I can see to do this is kind of a mix between angular and standard html practices. Effectively you'll want to take a page from the plunker book and use Iframes to contain each individual portlet.
<!doctype html> <html lang="en">
<body ng-app="plunker" ng-controller="MainCtrl">
<!-- define foo -->
<div>
<ul class="menu">
<li><a href="#" ng-click="fooRoute='#/foo1'">foo1</a></li>
<li><a href="#" ng-click="fooRoute='#/foo2'">foo2</a></li>
</ul>
<iframe seamless="true" ng-src="foo.index.html{{fooRoute}}"></iframe> </div>
<div>
<ul class="menu">
<li><a href="#" ng-click="barRoute='#/bar1'">bar1</a></li>
<li><a href="#" ng-click="barRoute='#/bar2'">bar2</a></li>
</ul>
<iframe seamless="true" ng-src="bar.index.html{{barRoute}}"></iframe> </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script src="app.js"></script> </body> </html>
然后在每个Portlet的你会希望有一个完全独立的应用程序（包括资源的负载）。
Then on each of these portlets you'll want to have a completely separate application (including the loading of resources).
<!doctype html>
<html lang="en">
<body ng-app="fooApp">
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
var app = angular.module('fooApp', ['fooApp.controllers']);
// Configure the app
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo1', {template: '<h1>Foo</h1><h2>foo1</h2>', controller: 'MyCtrl1'});
$routeProvider.when('/foo2', {template: '<h1>Foo</h1><h2>foo2</h2>', controller: 'MyCtrl2'});
}]);
angular.module('fooApp.controllers', []).
controller('MyCtrl1', [function () {
console.log("fooApp.MyCtrl1 invoked.");
}])
.controller('MyCtrl2', [function () {
console.log("fooApp.MyCtrl2 invoked.");
}]);
</script>
</body>
</html>
这是加载少一点效率比使用通用的应用基础，但目前这是不可行的。有一个在角UI的UI路由器团队有关控制的独立见解谈这可能是你一个可行的解决方案，但目前尚未实现，你可以按照在讨论https://github.com/angular-ui/ui-router/issues/84和附和你的需要。还有现在的问题专门针对这个UI路由器的问题清单上的https://github.com/angular-ui/ui-router/issues/160.
This is a little less efficient for loading than utilizing a common application base but at the moment this isn't feasible. There is talk at the angular-ui's ui-router team about controlling independent views which may be a workable solution for you but it is currently not implemented, you can follow the discussion at https://github.com/angular-ui/ui-router/issues/84 and chime in with your need. There is also now an issue specifically for this on the ui-router issues list at https://github.com/angular-ui/ui-router/issues/160.
工作plunker：
Working plunker of this design: http://plnkr.co/edit/sPoK3I?p=preview
这篇关于多Angularjs应用（驾驶的Portlet）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！