多个Angularjs应用程序（驱动Portlet）

邹胜泫

2023-03-14

问题内容：

我有一个用例，需要加载单独的角度应用程序。

基于几个堆栈溢出问题和这个google线程，它是可行的。但是，我无法使其正常工作。

查看文档：

http://docs.angularjs.org/api/angular.bootstrap

看来您需要提供该元素（在该元素上获得句柄的正确方法是什么？），然后如何将其绑定回config，controller等。这如何与路由一起使用？IE碰撞如何工作，即应用程序a和应用程序b分别将/
foo映射到/fooa.html和/foob.html …或每个应用程序描述自己的.otherwise？

谢谢！

问题答案：

因此，鉴于要求将其作为服务驱动的内容，我能看到的唯一方法是在角度和标准html实践之间进行混合。实际上，您需要从通用书籍中提取一页，并使用iframe包含每个单独的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上，您都希望拥有一个完全独立的应用程序（包括资源的加载）。

<!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>

与使用通用应用程序库相比，这种方法的加载效率较低，但是目前尚不可行。angular-ui的ui-
router团队中有关于控制独立视图的讨论，这可能对您来说是一个可行的解决方案，但目前尚未实现，您可以在https://github.com/angular-
ui/ui上
关注讨论。-router /
issues / 84和满足您的需求。现在，在https://github.com/angular-ui/ui-
router/issues/160上的ui-
router问题列表上，还有一个专门针对此问题的问题。

此设计的有用插件：http
://plnkr.co/edit/sPoK3I?p=preview

多个Angularjs应用程序（驱动Portlet）

相关阅读

相关文章

相关问答

相关工具

相关文档