marcoslin / angularAMD

Facilitate use of RequireJS in AngularJS
http://marcoslin.github.io/angularAMD
MIT License
734 stars 171 forks source link

angularAMD + UI Router + Multiple named views #156

Closed hassancode closed 9 years ago

hassancode commented 9 years ago

Hi, I am just exploring angularAMD to use in my project, its been working great, but just not sure how should i configure for multiple named views,

about.html:

The About Page

This page demonstrates multiple and named views.

ColumnOne View

ColumnTwo View

app.config.js:

.state('about', angularAMD.route({ url: '/about', templateUrl: 'app/partials/about.html', 'columnOne@about': { template: 'Look I am a column!' }, 'columnTwo@about': { templateUrl: 'app/partials/table-data.html', controller: 'scotchController' } }));

I cannot show the columnone and columntwo besides about html.

MikeGraf commented 9 years ago

If I had to guess without looking at all the code I would recommend trying this:

angular.state('about', {
    url: '/about',
    templateUrl: 'app/partials/about.html',
    'columnOne@about': { template: 'Look I am a column!' },
    'columnTwo@about': angularAMD.route({
        templateUrl: 'app/partials/table-data.html',
        controller: 'scotchController'
    })
});

If you don't have a controller for the other two views you don't need to use angularAMD.route() with them.

If this doesn't work - set up a plunker with your problem and link it.

Best, Mike

hassancode commented 9 years ago

I am sorry Mike, the code I posted above was missing views {}, and I also applied angularAMD.route only where needed as you said, we don't need if we don't have controller to the view as below:

.state('about', { url: '/about', views: { // the main template will be placed here (relatively named) '': { templateUrl: 'app/partials/about.html' },

                        // the child views will be defined here (absolutely named)
                        'columnOne@about': { template: 'Look I am a column!' },

                        // for column two, we'll define a separate controller 
                        'columnTwo@about': angularAMD.route({
                            templateUrl: 'app/partials/table-data.html',
                            controller: 'scotchController',
                            controllerAs: 'table',
                            controllerUrl: 'app/partials/scotch.controller'
                        })
                    }

                });

Thanks alot Mike, closing the issue now.