0


Hey,
after quite some research I failed to find any good solution to my problem.

In Angular apps there seem to be the base index.html importing all the scripts and headers etc. This also contains declaration for ng-app which furthermore contains ng-view that's to be used with $routeProvider. My problem is that I would like to have two separate index.html -like html pages for different base views to be used with $routeProvider loading different scripts.

Let's imagine my web application consists of two main parts.
1. Front page: Header on top, some selections, footer. Header and footer is to be included in every view so we will put them to index.html.
2. Chat screen. Completely different style and we want it without the header and footer that are now in the index.html.

index.html 

<html>
<head> *Headers be here* </head>
<body ng-app="MainApp">
    <!--header-->
    <div ng-view></div>
    <!--footer-->
    <script> *Scripts be here* </script>
</body>
</html>

chatView.html 

<html>
<head> *Headers be here* </head>
<body ng-app="Chat">
    <div ng-view></div>
    <script> *Scripts be here* </script>
</body>
</html>

app.js

angular.module('App', ['ngRoute','MainApp','Chat'])
  .config(function ($routeProvider) {
      $routeProvider...
  });
});
angular.module('MainApp', ['ngRoute'])
  .config(function ($routeProvider) {
      $routeProvider...
      //Routes to mainApp views.
  });
});
angular.module('Chat', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider...
        //Route to chat view.
    });
});

So the main issue here is that I don't know how to split the ng-app into two different pages (ng-apps) I can use as the base template for rendering views. I've been reading angular is mostly meant to be used in single page applications but I believe this should be doable without nasty hacks.
The code in my app.js example also doesn't work on my computer when I'm trying to run something similar. I'm not sure how to do the injections - and I read it might not be possible to define $routeParams in more than one module in the whole application.

And additionally, not to make it too easy, I need a working communication between the chat- and main-modules. The same authenticated login and session should be present in both, whereas also redirecting between these two will occur most times.

Improve this question

2 Answers 2

Reset to default
2

Okey, so I managed to find a satisfying solution eventually.

As Matt pointed out: "The point of Angular is to create Single Page Applications, which means using a single ng-app, and a single index.html."

This means I'm not able to have multiple index.html -like files, but only one. So I needed a new approach to my problem and I focused on controlling my index.html file better. In order to do this I switched from using ngRoutes into ui.routes.

The final solution is following:

index.html

<html>
    <head>***</head>
    <body ng-app="App">

        <div ui-view="header"></div>
        <div ui-view="content"></div>
        <div ui-view="footer"></div>

        <!-- Scripts -->
    </body>
</html>

app.js 

angular.module('App', [
    'ui.router'
    ])
    .config( function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('home', {
                url: '/home', 
                views: {
                    'header' : { templateUrl: 'views/header.html' },
                    'content': { templateUrl: 'views/home.html' },
                    'footer' : { templateUrl: 'views/footer.html' }
                }
            })
            .state('chat', {
                url: '/chat', 
                views: {
                    'header' : {},
                    'content': { templateUrl: 'views/chat.html' },
                    'footer' : {}
                }
            });
    });

This way I can keep the templates nice and clean as my router takes care of injecting headers and footers when required.
Only thing is that index.html still loads all the chat scripts for home view and vice versa, but I guess I just have to live with that.

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

Comments

1

The point of Angular is to create Single Page Applications, which means using a single ng-app, and a single index.html. You have made it clear with your last paragraph that both of your modules require inter communication, which means there should definitely be only a single ng-app used.

The way you solve this problem is to use routing to determine which templates, and controllers are used at which time. I prefer ui-router, but depending on your requirements, $routeProvider may be fine as well.

Essentially, you setup routes, such as /home and /chat, which when requested cause angular to load the different templates. For example:

$routeProvider
.when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController',
})
.when('/chat', {
    templateUrl: 'chat.html',
    controller: 'ChatController'
});

If you wanted to split main and chat up as different modules, both injecting $routeProvider and setting up their own routes, that should be fine, but you will need a parent app modules that handles loading of everything else (the actual thing you put in ng-app). It looks like you have tried this, except that you need to think of index.html as just wrapper for your templates (i.e. doesn't include any template information itself, other than the point to load route templates). So you keep the same one for both main and chat.

Improve this answer

1 Comment

Thank you for the answer. It clarifies some things for me. The reason I wanted to split Chat and the rest of the App to different modules in the first place was that in most views there will be a header/footer while in the chat views not - they will be very different in the overall design. So the best way to go is just take the header+footer out the index.html view and put more code in the injected templates and do the fracturing there? I was hoping I could keep the heavy outlines out the templateUrls.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.