angularjs - Nested views and controllers -
i need make next hierarchy: got several user roles in app. interface of app consists of top navbar different tabs each role. each tab has master-detail view, entities presented , first entity loaded default.
before struggling authentication (i found articles http interceptors etc) wonder how simple thing: navigation system.
for example, let's hardcoded user role , admin role loaded default. have cp.html file top navigation is. when go '/' route if user logged should redirect him cp.html admin tabs. if user isn't logged should redirect him '/login' page.
this example of cp.html:
<div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li><a href="#/desktop">desktop</a></li> <li><a href="#/companies">companies</a></li> <li><a href="#/users">users</a></li> </ul> </div> </div> <div ng-include src="include"> </div>
and home ('/') controller:
function homecontroller($scope, $routeparams, $location) { if ($routeparams.tab) { $scope.include = '/templates/' + $routeparams.tab + '.html'; } else { $scope.include = '/templates/companies.html'; } }
and main app.js:
app.config(['$routeprovider', function($routeprovider) { $routeprovider .when('/', { templateurl: 'templates/cp.html', controller: homecontroller }) .when('/:tab', { templateurl: 'templates/cp.html', controller: homecontroller })
so here depending on :tab parameter can include different .html templates. how deal controllers? let's want go companies tab. want have navbar + companies content. if click on companies tab file included stay @ homecontroller. if use ng-controller directive, how can id of company? in typical example have /companies/:companyid route. if use route in routeprovider should put templateurl? moreover, when click on companies tab don't change url, include companies.html.
i'm totally confused nested views , routes in angularjs. don't want use third party libraries though, trying figure out myself how deal this...
thanks in advance
take @ angular ui-router, think it's looking for. try their example app well.
Comments
Post a Comment