多个网页上的Angular应用/小部件

Angular app/widget on multiple web pages

本文关键字：应用 小部 Angular 网页      更新时间：2023-09-26

我正在构建一个类似于google hangouts的聊天应用程序。到目前为止，我已经设法把它做好了。我现在遇到的唯一问题是当我改变url和应用程序保持固定或在其他网页上重新启动时，在其他页面上运行angular应用程序/小部件。我将如何结构或把应用程序到一个网站。

应用在angular应用的index.html中是这样的:

这里是一个图像:http://s12.postimg.org/jkgraguod/live_review_one.png

我现在想有相同的应用程序/小部件运行在另一个页面后，它加载例如review .html

我使用laravel (webservice)的帖子和得到。到目前为止，这个应用程序是angular的，是独立的，我想保持这种状态。

如果你想让我更清楚，请随时问:)

所有文件添加到plunk: http://plnkr.co/edit/yDoUfw?p=info

app.js中的代码(routes)

app.config(函数(routeProvider美元){

    $routeProvider
    .when('/chat-rooms', {
        templateUrl: 'partials/chat-rooms.html',
        controller: 'ChatRoomsCtrl'
    })
    .when('/chat-room/:chatRoom', {
        templateUrl: 'partials/chat-room.html',
        controller: 'ChatRoomCtrl'
    })
    .when('/chat-room-pop/:chatRoom', {
        templateUrl: 'partials/chat-room-pop.html',
        controller: 'ChatRoomCtrl'
    });
});

我的index.html页面。

<head>
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link href="css/hanger.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="chatApp">
    <div class="page-header">
        <h2>live review single page</h2>
    </div>
    <div ng-view class="container"></div>
    <script src="https://code.jquery.com/jquery-git2.min.js"></script>
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-scroll-glue/src/scrollglue.js"></script>
    <script src="libs/angular-clear/angular.dcb-clear-input.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="libs/hanger/hanger.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/chat-rooms.js"></script>
    <script src="scripts/controllers/chat-room.js"></script>
    <script src="scripts/services/message.js"></script>
    <script src="scripts/services/chat-room.js"></script>
    <script src="scripts/services/webservice.js"></script>
</body>

所有文件添加到plunk: http://plnkr.co/edit/yDoUfw?p=info

您是否考虑过为您的客户端路由查看ui-router ?它支持多个命名视图，这意味着你的"顶级"页面模板可以包括一个ui-view为你的聊天小部件和一个ui-view为你的动态页面内容，如评论等。

这里有一个例子(和ui-router文档的链接):https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views.

我强烈推荐用它来替代AngularJS的开箱即用路由——它是如此的可配置，并且支持非常好的层次结构。

据我所知，您希望在任何地方运行一些html片段。我会创建一个指令聊天应用程序和控制器设置一些cfg为它。因此，您可以在一个页面或多个页面中多次使用它(如果每个聊天都与相同的api接口对话，则每个聊天都将显示相同的内容)。

之后的聊天页看起来像

<div class="chatpage">
 <my-chat-directive api="{{chat.apiPoint}}" ng-repeat="chat in chats" />
</div>
相关文章：