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

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

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

这是一张图片：：

我现在想在加载例如reviews.html之后在其他页面上运行相同的app / widget

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

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

添加的所有文件： ://plnkr.co/edit/yDoUfw? 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>

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

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

这里有一个例子（以及指向ui-router文档的链接）：：。

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

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

之后会有一个聊天页面

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

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

问题描述

1楼

2楼