多个网页上的 Angular 应用程序/小部件答案

【问题标题】：Angular app/widget on multiple web pages多个网页上的 Angular 应用程序/小部件
【发布时间】：2015-07-17 09:22:53
【问题描述】：

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

该应用在我的 index.html 中的 Angular 应用中看起来像这样。

这是一张图片：http://s12.postimg.org/jkgraguod/live_review_one.png

我现在希望在加载后在其他页面上运行相同的应用程序/小部件，例如reviews.html

我正在使用 laravel (webservice) 发布和获取。到目前为止，该应用程序是有角度的，独立的，我想保持这种状态。

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

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

app.js 中的代码（路由）

app.config(function($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

【问题讨论】：

所以这个聊天实际上看起来像一个小部件，对吧？如果你有一个控制器和一个专门用于这部分的模板，你可以简单地使用 ng-include 和 ng-controller 添加它。
你能提供一些关于你是如何实现这个聊天的线索吗？
我们似乎在同一个页面上 :) 让我试一试，如果我失败了，我会发布一些代码。到目前为止谢谢你
告诉我你是否可以，这样我就可以发布这个建议作为答案。
没问题！会做。我应该在接下来的 30 分钟内回复

标签： javascript angularjs html web

【解决方案1】：

您是否考虑过为您的客户端路由寻找 ui-router？它支持多个命名视图，这意味着您的“顶级”页面模板可以包含用于聊天小部件的 ui-view 和用于动态页面内容的 ui-view，例如评论等。

这里有一个示例（以及指向 ui-router 文档的链接）：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views。

我强烈推荐它作为开箱即用的 AngularJS 路由的替代品 - 它非常可配置并且支持非常好的层次结构。

【讨论】：

@Scripta55 我绝对认为这是处理问题的好方法。您可以拥有一个带有永久聊天的全局模板。在这里面你将有不断变化的内容。您可以添加一项服务来管理聊天的可见性。这是一个不错的选择。
谢谢，我会调查并反馈反馈

【解决方案2】：

据我了解您的愿望，您想在任何地方运行一些 html。我会创建一个指令聊天应用程序，并且控制器会为其设置一些 cfg。所以你会在一个页面中多次（如果每个聊天都与相同的 api 接口对话，每个将显示相同的内容）或多个页面。

之后聊天页面会是这样的

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

【讨论】：

谢谢，我会调查并反馈反馈