Rob*_*ian 8 javascript angularjs
我有一个用例需要加载单独的角度应用程序.
基于几个堆栈溢出问题和这个谷歌线程,它是可行的.但是,我无法让它发挥作用.
看文档:
http://docs.angularjs.org/api/angular.bootstrap
看起来你需要提供元素(在元素上获取句柄的正确方法是什么？),然后如何将它与配置,控制器等联系起来.这对路由有何影响？IE如何冲突工作,即app a和app b map/foo分别为/fooa.html和/foob.html ......或者每个应用程序都描述了自己的.otherwise？
谢谢!
因此,鉴于要求这是一个服务驱动的内容,我能看到这样做的唯一方法是角度和标准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上,您将需要一个完全独立的应用程序(包括加载资源).
<!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问题列表中,现在还有一个专门针对此问题.
这个设计的工作plunker:http://plnkr.co/edit/sPoK3I？p = preview
| 归档时间： |
|
| 查看次数： |
6454 次 |
| 最近记录： |