CODEWITHSUNDEEP
javascriptajaxangularjs
Uri Goren
Uri Goren

Reputation: 13672

Nested Views in Angular JS

I am trying to update a part of a view within another view.

But the link keeps overwriting the outer ng-view

How Do I update an ng-view within an ng-view ?

Upvotes: 2

Views: 458

Answers (2)

artch
artch

Reputation: 4545

This library should perfectly fit your needs:

http://angular-route-segment.com

Demo site: http://angular-route-segment.com/src/example/

It is much, much simpler to use than ui-router. Sample routes config looks like this: 

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/prefs',    's1.prefs').
when('/section1/:id',      's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).

within().

    segment('home', {
        templateUrl: 'templates/section1/home.html'}).

    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).

    within().

        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

        segment('edit', {
             templateUrl: 'templates/section1/item/edit.html'}).

        up().

    segment('prefs', {
        templateUrl: 'templates/section1/prefs.html'}).

    up().

segment('s2', {
    templateUrl: 'templates/section2.html',
    controller: MainCtrl});

Upvotes: 4

alexk
alexk

Reputation: 1528

You should get ui-router for that. I believe it's the only module that lets you do nested views.

source code: https://github.com/angular-ui/ui-router

instructions how to use: https://github.com/angular-ui/ui-router/wiki

Upvotes: 0

Related Questions