Javascript 多个Angularjs应用程序（驱动portlet）_Javascript_Angularjs

Javascript 多个Angularjs应用程序（驱动portlet）

javascript angularjs

Javascript 多个Angularjs应用程序（驱动portlet）,javascript,angularjs,Javascript,Angularjs,我有一个用例，需要加载单独的角度应用程序基于几个堆栈溢出问题，并且，它是可行的。然而，我不能让它工作查看文档：看起来您需要提供元素（在元素上获取句柄的正确方法是什么？），然后如何将其绑定到配置、控制器等，以及这如何与路由一起工作？IE碰撞是如何工作的，IE应用程序a和应用程序b分别将/foo映射到/fooa.html和/foob.html。。。或者每个应用都有自己的描述，否则呢谢谢你有两个选择：如果将它们创建为angular.module（），则无法将模块彼此连接起来如果您使用t

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

基于几个堆栈溢出问题，并且，它是可行的。然而，我不能让它工作

查看文档：

看起来您需要提供元素（在元素上获取句柄的正确方法是什么？），然后如何将其绑定到配置、控制器等，以及这如何与路由一起工作？IE碰撞是如何工作的，IE应用程序a和应用程序b分别将/foo映射到/fooa.html和/foob.html。。。或者每个应用都有自己的描述，否则呢

谢谢

你有两个选择：如果将它们创建为angular.module（），则无法将模块彼此连接起来

如果您使用templateURL创建指令来懒散地加载组件，您可以广播共享属性并收听它们，您可以在应用程序中使用相同的服务。

也许这对你来说是最好的。

想出来了。下面介绍如何成功地并行加载两个Angle应用程序。还可以看到，我为每个应用程序命名了相同的控制器，以表明依赖关系不会发生冲突（因为它们通过模块在每个相应的应用程序中都有作用域）：






//声明依赖于筛选器和服务的应用程序级模块
var app=angular.module（'fooApp'，['fooApp.controllers']）；
//配置应用程序
app.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（'/foo1'，{template:'Foofoo1'，controller:'MyCtrl1'}）；
$routeProvider.when（'/foo2'，{template:'Foofoo2'，controller:'MyCtrl2'}）；
}]);
angular.module（'fooApp.controllers'，[]）。
控制器（'MyCtrl1'，[函数（）{
log（“fooApp.MyCtrl1已调用”）；
}])
.controller（'MyCtrl2'，[函数（）{
log（“fooApp.MyCtrl2已调用”）；
}]);
//手动引导
var div=document.getElementById（'fooApp'）；
控制台日志（div）；
引导（div，['fooApp']）；




//声明依赖于筛选器和服务的应用程序级模块
var app=angular.module（'barApp'，['barApp.controllers']）；
//配置应用程序
app.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（'/bar1'，{template:'Barbar1'，controller:'MyCtrl1'}）；
$routeProvider.when（'/bar2'，{template:'Barbar2'，controller:'MyCtrl2'}）；
}]);
angular.module（'barApp.controllers'，[]）。
控制器（'MyCtrl1'，[函数（）{
log（“barApp.MyCtrl1已调用”）；
}])
.controller（'MyCtrl2'，[函数（）{
log（“barApp.MyCtrl2已调用”）；
}]);
//手动引导
var div=document.getElementById（'barApp'）；
控制台日志（div）；
角度引导（div，['barApp']）；

剩下的唯一问题是如何处理路由冲突。

因此，考虑到这是一个服务驱动的内容的要求，我能看到的唯一方法是混合使用角度和标准html实践。实际上，您需要从plunker手册中获取一个页面，并使用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中的每一个上，您都希望有一个完全独立的应用程序（包括资源的加载）


var app=angular.module（'fooApp'，['fooApp.controllers']）；
//配置应用程序
app.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（'/foo1'，{template:'Foofoo1'，controller:'MyCtrl1'}）；
$routeProvider.when（'/foo2'，{template:'Foofoo2'，controller:'MyCtrl2'}）；
}]);
angular.module（'fooApp.controllers'，[]）。
控制器（'MyCtrl1'，[函数（）{
log（“fooApp.MyCtrl1已调用”）；
}])
.controller（'MyCtrl2'，[函数（）{
log（“fooApp.MyCtrl2已调用”）；
}]);

这对于加载来说比使用公共应用程序库的效率要低一些，但目前这是不可行的。angular ui的ui router团队讨论了控制独立视图的问题，这可能是一个可行的解决方案，但目前尚未实施，您可以在上进行讨论，并根据需要进行协调。现在，在的ui路由器问题列表中也有一个专门针对此的问题

这种设计的工作原理：

好的，所以我想出了如何使用angular ui路由器来实现这一点。关键在于angular ui路由器在不影响URL的情况下转换状态的能力

使其工作的步骤

首先使用到ID元素的手动引导
将ui路由器$stateProvider连接到每个应用程序，以驱动内部状态转换（路由）。
- 对于每个已定义的状态，必须在此处关闭url键，否则将通过更改每个状态转换的url来重置页面
在主控制器中设置状态功能以驱动状态更改

以下是使此工作正常的代码：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="angular-ui-states.min.js"></script>
    <script src="app.js"></script>
  </head>
<!-- define foo -->

<div id="fooApp" ng-controller="MainCtrl">

    <ul class="menu">
        <li><a href="#" ng-click="state('foo1')">foo1</a></li>
        <li><a href="#" ng-click="state('foo2')">foo2</a></li>
    </ul>
    <div ui-view>
    </div>

</div>

<script>
    // Declare app level module which depends on filters, and services
    var app = angular.module('fooApp', ['fooApp.controllers', 'ui.state']);

    // Configure the app
    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider
          .state('foo1',
          {
            template: '<h1>Foo</h1><h2>foo1</h2>', 
            controller: 'MyCtrl1'
          })
          .state('foo2',
          {
            template: '<h1>Foo</h1><h2>foo2</h2>', 
            controller: 'MyCtrl2'
          });
    }]);

    angular.module('fooApp.controllers', [])
            .controller('MainCtrl', ['$scope', '$state', function($scope, $state){
              $scope.state = function(name){
                console.log('Transition to state ' + name);
                $state.transitionTo(name);
              }
            }])
            .controller('MyCtrl1', [function () {
                console.log("fooApp.MyCtrl1 invoked.");
            }])
            .controller('MyCtrl2', [function () {
                console.log("fooApp.MyCtrl2 invoked.");
            }]);

    // manually bootstrap
    var div = document.getElementById('fooApp');
    console.log(div);
    angular.bootstrap(div, ['fooApp']);


</script>


<!-- define bar -->

<div id="barApp" ng-controller="MainCtrl">

    <ul class="menu">
        <li><a href="#" ng-click="state('bar1')">bar1</a></li>
        <li><a href="#" ng-click="state('bar2')">bar2</a></li>
    </ul>
    <div ui-view>
    </div>

</div>

<script>
    // Declare app level module which depends on filters, and services
    var app = angular.module('barApp', ['barApp.controllers', 'ui.state']);


    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider
          .state('bar1',
          {
            template: '<h1>Bar</h1><h2>bar1</h2>', 
            controller: 'MyCtrl1'
          })
          .state('bar2',
          {
            template: '<h1>Bar</h1><h2>bar2</h2>', 
            controller: 'MyCtrl2'
          });
    }]);

    angular.module('barApp.controllers', [])
            .controller('MainCtrl', ['$scope', '$state', function($scope, $state){
              $scope.state = function(name){
                console.log('Transition to state ' + name);
                $state.transitionTo(name);
              }
            }])
            .controller('MyCtrl1', [function () {
                console.log("barApp.MyCtrl1 invoked.");
            }])
            .controller('MyCtrl2', [function () {
                console.log("barApp.MyCtrl2 invoked.");
            }]);

    // manually bootstrap
    var div = document.getElementById('barApp');
    console.log(div);
    angular.bootstrap(div, ['barApp']);
</script>


</body>

</html>


安古拉斯普朗克
文件。写（“”）；




//声明依赖于筛选器和服务的应用程序级模块
var app=angular.module（'fooApp'，['fooApp.controllers'，'ui.state']）；
//配置应用程序
app.config（['$stateProvider'，函数
<!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>

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="angular-ui-states.min.js"></script>
    <script src="app.js"></script>
  </head>
<!-- define foo -->

<div id="fooApp" ng-controller="MainCtrl">

    <ul class="menu">
        <li><a href="#" ng-click="state('foo1')">foo1</a></li>
        <li><a href="#" ng-click="state('foo2')">foo2</a></li>
    </ul>
    <div ui-view>
    </div>

</div>

<script>
    // Declare app level module which depends on filters, and services
    var app = angular.module('fooApp', ['fooApp.controllers', 'ui.state']);

    // Configure the app
    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider
          .state('foo1',
          {
            template: '<h1>Foo</h1><h2>foo1</h2>', 
            controller: 'MyCtrl1'
          })
          .state('foo2',
          {
            template: '<h1>Foo</h1><h2>foo2</h2>', 
            controller: 'MyCtrl2'
          });
    }]);

    angular.module('fooApp.controllers', [])
            .controller('MainCtrl', ['$scope', '$state', function($scope, $state){
              $scope.state = function(name){
                console.log('Transition to state ' + name);
                $state.transitionTo(name);
              }
            }])
            .controller('MyCtrl1', [function () {
                console.log("fooApp.MyCtrl1 invoked.");
            }])
            .controller('MyCtrl2', [function () {
                console.log("fooApp.MyCtrl2 invoked.");
            }]);

    // manually bootstrap
    var div = document.getElementById('fooApp');
    console.log(div);
    angular.bootstrap(div, ['fooApp']);


</script>


<!-- define bar -->

<div id="barApp" ng-controller="MainCtrl">

    <ul class="menu">
        <li><a href="#" ng-click="state('bar1')">bar1</a></li>
        <li><a href="#" ng-click="state('bar2')">bar2</a></li>
    </ul>
    <div ui-view>
    </div>

</div>

<script>
    // Declare app level module which depends on filters, and services
    var app = angular.module('barApp', ['barApp.controllers', 'ui.state']);


    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider
          .state('bar1',
          {
            template: '<h1>Bar</h1><h2>bar1</h2>', 
            controller: 'MyCtrl1'
          })
          .state('bar2',
          {
            template: '<h1>Bar</h1><h2>bar2</h2>', 
            controller: 'MyCtrl2'
          });
    }]);

    angular.module('barApp.controllers', [])
            .controller('MainCtrl', ['$scope', '$state', function($scope, $state){
              $scope.state = function(name){
                console.log('Transition to state ' + name);
                $state.transitionTo(name);
              }
            }])
            .controller('MyCtrl1', [function () {
                console.log("barApp.MyCtrl1 invoked.");
            }])
            .controller('MyCtrl2', [function () {
                console.log("barApp.MyCtrl2 invoked.");
            }]);

    // manually bootstrap
    var div = document.getElementById('barApp');
    console.log(div);
    angular.bootstrap(div, ['barApp']);
</script>


</body>

</html>