CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-router
amacdonald
amacdonald

Reputation: 157

Loading multiple templates/controllers on one route

I'm working on a small project and it's been a while since I've worked with Angular. I'm trying to separate all my templates/controllers so I don't have one gigantic file, but I want to be able to access them all on the one page. I'm using Angular UI router, and trying to have them all load on the same route. It doesn't seem to work. Does anyone have any idea how I can load everything on one route but still keep everything separate? Currently it's only loading the first controller/template listed in my routing file (createCompanyController) and not the others.

Here is my routes.js file:

(function() {
    angular.module('myApp', ['ui.router'])
        .config(['$stateProvider', function($stateProvider) {

            var applicationStates = [{
                name: 'homepage',
                url: '/app',
                templateUrl: 'partials/CreateCompany/createCompany.html',
                controller: 'createCompanyController',
                controllerAs: 'createCompanyCtrl'
            },
                {
                    name: 'guestbook',
                    url: '/app',
                    templateUrl: 'partials/CreatePerson/createPerson.html',
                    controller: 'createPersonController',
                    controllerAs: 'createPersonCtrl'
                },
                {
                    name: 'states',
                    url: '/app',
                    templateUrl: 'partials/ListCompanies/listCompanies.html',
                    controller: 'listCompaniesController',
                    controllerAs: 'listCompaniesCtrl'
                }];

            applicationStates.forEach(function(state) {
                $stateProvider.state(state);
            });
        }])
})();

And the index.html file I'm using:

<html ng-app='myApp'>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='app.less' type='text/css' rel='stylesheet/less'>
</head>
<body  class="container" ng-cloak>
<div class='row'>
    <div class='span12'>
        <div ui-view></div>
    </div>
</div>
</body>
</html>

(All my script tags are there, I just removed them from this post to make space). If anyone can help me out I'd be very grateful.

Upvotes: 1

Views: 340

Answers (2)

Younux
Younux

Reputation: 284

You can use Multiple Named Views

    $stateProvider.state('app', {
        url: '/app',
        views: {
            '': {
                templateUrl: 'home/home.html'
            },
            'homepage@app': {
                name: 'homepage',
                templateUrl: 'partials/CreateCompany/createCompany.html',
                controller: 'createCompanyController',
                controllerAs: 'createCompanyCtrl'
            },
            'guestbook@app': {
                 name: 'guestbook',
                 templateUrl:'partials/CreatePerson/createPerson.html',
                 controller: 'createPersonController',
                 controllerAs: 'createPersonCtrl'
            },
           'states@app': {
                 name: 'states',                
                 templateUrl:'partials/ListCompanies/listCompanies.html',
                 controller: 'listCompaniesController',
                 controllerAs: 'listCompaniesCtrl'
            }
        }

And the index.html

    <html ng-app='myApp'>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='app.less' type='text/css' rel='stylesheet/less'>
    </head>
    <body  class="container" ng-cloak>
    <div class='row'>
        <div class='span12'>
            <div ui-view="homepage"></div>
            <div ui-view="guestbook"></div>
            <div ui-view="guestbook"></div>
        </div>
    </div>
    </body>
    </html>

Upvotes: 1

Inder
Inder

Reputation: 170

The answer to your question is "Angular Components" (available from angular 1.5 version onward).

Component => Template + Controller

Angular Route which would contain all templates => combination of components (in your case CreateCompany, CreatePerson and ListCompanies components all in one route's template)

All you need to do is:

  • Create components (controller + template for CreateCompany, CreatePerson and ListCompanies) instead of routes.
  • Create a single route "/app" and define the template for this route as below

HomePage.html

<div class='row'>
    <div class='span12'>
        <create-company></create-company>
        <create-person></create-person>
        <list-companies></list-companies>
    </div>
</div>

Fiddle: https://jsfiddle.net/vuas3wbq/2/

Reference link for Angular components: https://docs.angularjs.org/guide/component

Upvotes: 0

Related Questions