Question

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

应用程序在我的index.html中的角度应用程序中看起来像这样。

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

我现在希望在加载例如reviews.html

后，在其他页面上运行相同的应用/小部件

我正在使用laravel（webservice）进行发布和获取。该应用程序是有角度的，独立的到目前为止，我想保持这种方式。

如果您希望我更清楚，请随意问:)

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

app.js（routes）中的

代码

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>

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

Answer 1

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

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

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

Answer 2

据我了解你的愿望，你想在任何地方运行一些HTML。我创建了一个指令chat-app，并且控制器为它设置了一些cfg。所以你可以在一个页面中多次（如果每个聊天与同一个api界面对话，每个都会显示相同的内容）或多个页面。

之后，聊天页面看起来像

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

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

2 个答案: