Using Angular.js to create multiple views displaying different parts of the same model?

Question

I'm learning Angular right now and I'm practicing by writing a simple application that uses ngRoute based on this example.

<-- index.html -->
<html>
    <head> ... </head>
    <body>
        <div ng-view></div>
    </body>
</html>

The code from the example displays information about various "Javascript Projects". My question is, how would I create yet another view that displays information about this model?

Say, for example, that I wanted to create one more ngView further down the page that only displays the project names without their descriptions? (See the example)

It seems like I would have to distinguish them from each other somehow. Maybe like this?

<body>
    <div ng-view="fullView"></div>
    ...
    <div ng-view="projectNameView"></div>
</body>

But I don't see anything like that in the documentation, so I think that's probably incorrect. Then I thought maybe I am supposed to use a separate controller like this:

<body>
    <div ng-controller="fullViewController">
        <div ng-view></div>
    </div>
    ...
    <div ng-controller="projectNameViewController">
        <div ng-view></div>
    </div>
</body>

But then the ngViews still seem to be undistinguished from each other.

What is the right way to do this? Once I have an idea from the index.html side, I think I can work out the javascript/module side myself - I just need a little nudge in the right direction.

Jakemmarsh · Accepted Answer · 2013-12-05 16:35:42Z

2

You may want to look into ui-router: http://github.com/angular-ui/ui-router.

It provides nested views and easier state management than the default Angular router.

answered Dec 5, 2013 at 16:35

Jakemmarsh

4,68112 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

artur grzesiak · Accepted Answer · 2013-12-05 16:48:28Z

2

Actually only one ng-view is supported per route and for sure that is a down-side of this approach.

As @Jakemmarsh pointed http://github.com/angular-ui/ui-router is option worth considering. Though you have to be aware of:

Warning: UI-Router is pre-beta and under active development. As such, while this library is well-tested, the API is subject to change. Using it in a project that requires guaranteed stability is not recommended.

Some directives that maybe helpful of achieving multiple templates on a single page are:

ng-include -- it includes template/html from a different file.
ng-switch -- switches rendering of html on some conditon.
ng-if -- renders if condition is met.

answered Dec 5, 2013 at 16:48

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

Collectives™ on Stack Overflow

Using Angular.js to create multiple views displaying different parts of the same model?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related