Angular app/widget on multiple web pages

Question

I am building a chat application similar to google hangouts. I have managed to get it right so far. The only problem i am experiencing now is having the angular app/widget run on other pages when i change url's and the app remaining fixed or being restarted on the other web page. how would i have to structure or place the app onto a site.

The app looks like this on my index.html in the angular app.

here is an image: http://s12.postimg.org/jkgraguod/live_review_one.png

I would now like to have the same app/widget run on another pages after it loads e.g reviews.html

I am using laravel (webservice) for posts and gets. the app is in angular, standalone thus far and i would like to keep it that way.

If you would like me to be more clear please feel free to ask :)

All Files Added to plunk: http://plnkr.co/edit/yDoUfw?p=info

code in 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'
    });

});

My index.html page.

<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>

All Files Added to plunk: http://plnkr.co/edit/yDoUfw?p=info

So this chat actually look like a widget right ? If you have a controller and a template dedicated to this part you could add it simply using ng-include and ng-controller where you want it to be. — Okazari
– Okazari, Commented Jul 17, 2015 at 9:38
Could you provide some clue about how you implemented this chat ? — Okazari
– Okazari, Commented Jul 17, 2015 at 9:42
We seem to be on the same page :) let me give it a try, if i fail i will post up some code. Thank you thus far — Scripta55
– Scripta55, Commented Jul 17, 2015 at 9:43
Tell me if it was ok for you so i can post this advice as an answer. — Okazari
– Okazari, Commented Jul 17, 2015 at 9:44
Sure thing! will do. I should have response in the next 30mins — Scripta55
– Scripta55, Commented Jul 17, 2015 at 9:50

Nat Wallbank · Accepted Answer · 2015-07-17 11:25:09Z

2

Have you considered looking at ui-router for your client-side routing? It supports multiple named views, which means that your 'top-level' page template can include a ui-view for your chat widget and a ui-view for your dynamic page content, e.g. reviews, etc.

There's an example (and links to the ui-router docs) here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views.

I can highly recommend it as a replacement for the out-of-the-box AngularJS routing - it's so configurable and supports really nice hierarchies.

answered Jul 17, 2015 at 11:25

Nat Wallbank

1,45713 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Okazari Over a year ago

@Scripta55 I definitly think this is a good way to handle the problem. You could have a global template with the permanent chat. Inside this you will have the changing content. You could add a service to manage the visibility of the chat. That's a good way to go.

Scripta55 Over a year ago

thanks, i will look into this and return with feedback

Schemiii · Accepted Answer · 2015-07-17 10:36:32Z

1

As far as i understand your desire, you want to run some pieces of html in any place. I'd create a directive chat-app and a controller sets some cfg for it. So you would have it multiple times in one page(if each chat talks to the same api interface, each will display the same content) or multiple pages.

after that a chat-page would look like

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

answered Jul 17, 2015 at 10:36

Schemiii

3665 silver badges15 bronze badges

1 Comment

Scripta55 Over a year ago

thanks, i will look into this and return with feedback

Collectives™ on Stack Overflow

Angular app/widget on multiple web pages

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related