1

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.

Improve this question

2 Answers 2

Reset to default
1

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

1 Comment

Oh, I thought Components were an Angular 2 feature. I could definitely use a fiddle if you have the time and would greatly appreciate it.

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.