I'm wondering if this can be achieved in Angular or if i'm maybe stuck in
the more old school jQuery app, frame of mind...
I have a HTML page. Say, *studio.html*. It has a header and menu bar that
are common between all the views on that domain, e.g:
routes:
studio
studio/about
studio/contact
studio/etc
All have the same header and menu, just the content changes.
So my *studio.html *looks like this:
<div id="wrapper">
<div class="row studio-fluid-row-reset" id="leftMenu"
left-column-menu></div>
<div id="studioHeader" studio-header></div>
<div id="studioContent" studio-content>
<!-- respective content here -->
</div>
</div>
My *Studio Module, *looks like this:
// ROUTES
angular.module('Studio', ['app.controllers', 'app.services'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/studio', {
templateUrl: 'views/studio.html',
controller: 'studioCtrl'
});
$routeProvider.when('/studio/about', {
templateUrl: 'views/studio.html',
controller: 'aboutCtrl'
});
}])
//COMMON DIRECTIVES
.directive('studioHeader', ['aService', function (aService) {
function link($scope, element) {
//blahh
}
return {
templateUrl:
'views/fragments/studio/studioHeader.fragment.html',
controller: 'studioHeaderCtrl',
link: link
}
}])
.directive('leftColumnMenu', [function () {
function link($scope, element) {
// blahhh
}
return {
templateUrl:
'views/fragments/studio/leftColumnMenu.fragment.html',
controller: 'leftColumnMenuCtrl',
link: link
}
}])
How would i achieve having the *studioContent *div be replaced by the
content directive associated with the respective route? I have tried
defining respective directives on each routes controller, but as they have
duplicate names ('*studioContent*') Angular moans.
Am i missing something? Is this, not just possible but event a suggested
part of the Angular work flow?
I'm concerned about seeing a flicker in the UI on screen when changing
between routes with the same layout/design.
Enlighten me, someone :P
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
