I've started playing around with AngularJS and I'm having some trouble dealing with routing to nested sub-views.
My site has a basic two column layout like so:
[Main 1] [Main 2] [Main 3]
--------------------------------------
A | Content for A goes into this frame.
B |
C |
D |
E |
The side menu links (a, b, c, d, e) will be dynamically generated when you navigate to the page via the main menu (main 1, main 2, main 3).
Ie, navigating to the main1 link will make a request to /main1 which will return the JSON array of links.
When the user clicks one of those links, it will make the request to /main1/a and load the data into the content frame.
The way I'm currently doing this is:
index.html:
<body>
<a href="/main1">Main 1</a>
<div ng-view></div>
</body>
app.js:
angular.module('test', [
'test.controllers'
])
.config([
'$routeProvider',
function($routeProvider)
{
$routeProvider
.when('/main1', {
templateUrl: '/partials/main1.html',
controller: 'Main1Ctrl'
})
.when('/main1/:id', {
templateUrl: '/partials/main1.html',
controller: 'Main1Ctrl'
})
}
]);
And this is where I get stuck. My Main1Ctrl controller currently looks like:
angular.module('test.controllers', [])
.controller('Main1Ctrl', [
'$scope',
'$routeParams',
'Data',
function($scope, $routeParams, Data)
{
$scope.submenu = Data.query();
}
]);
The problems I'm having is how to assign $scope.content.
If no ID is specified in the URL, I'll need to wait for the submenu to render before I can grab the first ID out of the list (if no content is requested, it'll default to the first submenu item).
If the user specifies an ID in the URL, I want the /main1 and /main1/:id requests to fire off in parallel. The user shouldn't need to wait for the menu to load before they see their content.
Is this even a good way to handle this type of layout?
I've leveraged the route provider and variables to create a global object that you can access anywhere. You can then use ng-show/hide, ng-switch, or ui-if to show or hide or switch the applicable sections of your application to attain multi level deep linking.
check out this plunker i built. It will show you exactly how to do it.