Multiple ng:view on the same page.

25,579 views
Skip to first unread message

Khurram

unread,
Sep 14, 2011, 6:54:39 AM9/14/11
to AngularJS
To build my next app I'm evaluating a number of JS frameworks and
AngularJS scores higher than any other framework.
I would like ask a number of design question.

1. Can we use multiple <ng:view> on the same page to render different
partials on different <ng:view> tags. For example If an app where
Parent menu item renders a partial in <ng:view> tag. The partial
itself has a number of navigation links and each needs to be open in
their own ng:view tags.

2. What is the best way for Inter-Controller communication. For
example if UserController wants to dispatch an UpdateUser event to
ProductController, what is the standard way in AngularJS. (kind of
observer pattern)

Misko Hevery

unread,
Sep 14, 2011, 1:52:40 PM9/14/11
to ang...@googlegroups.com
See inline

On Wed, Sep 14, 2011 at 3:54 AM, Khurram <teg...@gmail.com> wrote:
To build my next app I'm evaluating a number of JS frameworks and
AngularJS scores higher than any other framework.
I would like ask a number of design question.

1. Can we use multiple <ng:view> on the same page to render different
partials on different <ng:view> tags. For example If an app where
Parent menu item renders a partial in <ng:view> tag. The partial
itself has a number of navigation links and each needs to be open in
their own ng:view tags.

<ng:view> is tied to $resource, and right now you can only have one. But you can have as many <ng:includes> as you want, but you have to do the wiring yourself.
 

2. What is the best way for Inter-Controller communication. For
example if UserController wants to dispatch an UpdateUser event to
ProductController, what is the standard way in AngularJS. (kind of
observer pattern)

Turn your long lived data into a service and inject it into the controllers.
 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.


Witold Szczerba

unread,
Sep 14, 2011, 2:47:16 PM9/14/11
to ang...@googlegroups.com
See inline:

On 14 September 2011 19:52, Misko Hevery <mi...@hevery.com> wrote:
> On Wed, Sep 14, 2011 at 3:54 AM, Khurram <teg...@gmail.com> wrote:
>>
>> 1. Can we use multiple <ng:view> on the same page to render different
>> partials on different <ng:view> tags. For example If an app where
>> Parent menu item renders a partial in <ng:view> tag. The partial
>> itself has a number of navigation links and each needs to be open in
>> their own ng:view tags.
>
> <ng:view> is tied to $resource, and right now you can only have one. But you
> can have as many <ng:includes> as you want, but you have to do the wiring
> yourself.

Little correction: <ng:view> is tied to $route, not $resource.
As to wiring - it is very straightforward in Angular :)

Regards,
Witold Szczerba

Khurram

unread,
Sep 14, 2011, 3:16:27 PM9/14/11
to AngularJS
I dont get your reply.

I know the basic functionality of $route and <ng:view>.

I'm curious how we can use two different <ng:view> on the same page to
load two different partials.

Witold Szczerba

unread,
Sep 14, 2011, 3:29:17 PM9/14/11
to ang...@googlegroups.com
That is the point: as Misko said - you cannot use <ng:view> for that,
use <ng:include> instead.

Magrelo

unread,
Sep 14, 2011, 4:40:41 PM9/14/11
to AngularJS
You can have a <ng:include src="bind_to_url"></ng:include> that binds
to a variable on your controller. Then you can change this variable as
you want.


Thiago

Igor Minar

unread,
Sep 14, 2011, 11:39:50 PM9/14/11
to ang...@googlegroups.com
right, but we will support multiple ng:views per $route definition. check back in a few weeks.

/i

ItsLeeOwen

unread,
Apr 13, 2012, 10:09:07 PM4/13/12
to ang...@googlegroups.com
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







Igor Minar

unread,
Apr 14, 2012, 1:48:30 AM4/14/12
to ang...@googlegroups.com
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views




--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

Söderlind

unread,
Apr 14, 2012, 11:23:02 AM4/14/12
to ang...@googlegroups.com
Try this:  http://jsfiddle.net/johaa1993/xsbWd/2/

Use it with ng-include. Note that you can check if its a number by using regexp or a text or whatever(*).

Cary

unread,
May 6, 2012, 4:34:15 PM5/6/12
to ang...@googlegroups.com
Igor - this is really a necessary feature.  What's your ETA on supporting multiple views for routing?


On Saturday, April 14, 2012 12:48:30 AM UTC-5, Igor Minar wrote:
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.
/i

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.
/i

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.
/i

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

Cary

unread,
May 6, 2012, 4:36:37 PM5/6/12
to ang...@googlegroups.com
Söderlind - can you fix your JSFiddle link?  I'd like to take a look.
Thanks

carste...@gmail.com

unread,
Jul 2, 2012, 1:22:53 PM7/2/12
to ang...@googlegroups.com
First of all: congrats on the framework and the 1.0 release!

We do want the routing to be more sophisticated
Are you thinking roughly in this kind of direction? Looks promising...

it's just not going to happen for 1.0
Really just my 2 cents, but: may I suggest to then take the feature out of angular-seed until you're done?
Like I just did, angular-seed is probably one of the first places people get their hands dirty with, when using Angular the first time.
The usage of route/view there then makes one think that views are a root concept in angular and really the next question that comes to mind, is how to multiply/nest views, then.

On Saturday, April 14, 2012 7:48:30 AM UTC+2, Igor Minar wrote:
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

numan

unread,
Aug 3, 2012, 9:02:53 PM8/3/12
to ang...@googlegroups.com
Hi Igor, now that 1.0 is out, is this feature in there or has it been moved to later releases?



On Saturday, April 14, 2012 1:48:30 AM UTC-4, Igor Minar wrote:
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

war...@gmail.com

unread,
Aug 4, 2012, 6:45:22 AM8/4/12
to ang...@googlegroups.com
Really interested too.

roytr...@gmail.com

unread,
Aug 17, 2012, 3:04:52 PM8/17/12
to ang...@googlegroups.com, war...@gmail.com
+1

ebeltr...@gmail.com

unread,
Oct 25, 2012, 4:16:22 PM10/25/12
to ang...@googlegroups.com
+1

Partap Davis

unread,
Oct 25, 2012, 7:49:15 PM10/25/12
to ang...@googlegroups.com, ebeltr...@gmail.com
+1

On Thursday, October 25, 2012 1:16:22 PM UTC-7, ebeltr...@gmail.com wrote:
+1

peter....@gmail.com

unread,
Nov 1, 2012, 8:34:07 AM11/1/12
to ang...@googlegroups.com
Is there any progress on supporting multiple views bound to the routing path? The workaround using ng-controller, manually parsing the routing path and binding the template via ng-include seems very cumbersome, if it works at all... 


On Sunday, May 6, 2012 10:34:15 PM UTC+2, Cary Landholt wrote:
Igor - this is really a necessary feature.  What's your ETA on supporting multiple views for routing?

On Saturday, April 14, 2012 12:48:30 AM UTC-5, Igor Minar wrote:
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

On Saturday, April 14, 2012 12:48:30 AM UTC-5, Igor Minar wrote:
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

On Saturday, April 14, 2012 12:48:30 AM UTC-5, Igor Minar wrote:
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

On Saturday, April 14, 2012 12:48:30 AM UTC-5, Igor Minar wrote:
no. not yet. I experimented with it a bit but it got quite complicated and we decided to put on it for 1.0.

We do want the routing to be more sophisticated, it's just not going to happen for 1.0

/i

On Fri, Apr 13, 2012 at 7:09 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:
Has this feature been implemented?  In this example, I'm looking to route specific urls/templates to specific ng-views







--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/d_FhDCmhXdUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

dlpor...@gmail.com

unread,
Dec 9, 2012, 12:23:01 PM12/9/12
to ang...@googlegroups.com
I've been exploring angular got a grew days note Anne think it is very promising. However, until it supports multiple ng-views, I cannot seriously consider it for enterprise application.

Waiting with bated breath for this feature.

Thanks for ask you're work.

dlpor...@gmail.com

unread,
Dec 9, 2012, 12:26:16 PM12/9/12
to ang...@googlegroups.com
I've been exploring angular for a few days now and think it is very promising. However, until it supports multiple ng-views, I cannot seriously consider it for enterprise application development.

Waiting with bated breath for this feature.

Thanks for all you're work.

Ignore the previous post

Michael Bielski

unread,
Dec 10, 2012, 11:01:57 AM12/10/12
to ang...@googlegroups.com, dlpor...@gmail.com
I've been using Angular for several months now and found that I can get along just fine with only one ng-view on the page. Using ng-include as Misko suggested works very well and makes it easier to have things like navigation in a single file that can be updated once and propagated through the entire application. When you add in the ability to change what is referenced by an ng-include programmatically, the possibilities are now endless. For example:

<div ng-include="template" id="modalContainer" class="modal fade">
</div>

Now you can simply change the value of "template" and control what goes into your modal. Set "template" to a URL and tell the modal to show. Viola! Content that was loaded on-the-fly! When you're done, tell the modal to close and then clear the value of "template". Poof! It's gone! The whole thing is lightweight and flexible, just like Angular apps should be.

Maxence Warzecha

unread,
Dec 10, 2012, 11:33:49 AM12/10/12
to ang...@googlegroups.com, dlpor...@gmail.com
After several months working with Angular, I don't feel the need of mutliple ng-view anymore. I think that it may help but not so important after all (at least in my case!).


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.



--
Maxence Warzecha | - 120, rue Dupont des Loges | F-57100 Thionville

Cary Landholt

unread,
Dec 10, 2012, 10:46:58 PM12/10/12
to ang...@googlegroups.com, dlpor...@gmail.com
Like some of the others have commented, at first I thought this would be a really big pain.  But working with Angular for several months, I've not had a problem.

edwardt...@gmail.com

unread,
Jan 10, 2013, 12:12:21 PM1/10/13
to ang...@googlegroups.com, dlpor...@gmail.com
I would like to use ng-includes to get around the need for multiple (specifically: nested) views. However, I do have a requirement to be able to update the urls accordingly, like when using angular routes. Is there any way to do this?

Bretto

unread,
Jan 13, 2013, 5:59:20 PM1/13/13
to ang...@googlegroups.com, dlpor...@gmail.com, edwardt...@gmail.com
Yes, I had to circumvent this shortcoming too, point your route to a generic partial and a controller,in the partial have an ng-include and point to a property on that scope, in the controller setup that property from the  $routeParams. Does this makes sense ?

Bretto

unread,
Jan 13, 2013, 7:46:20 PM1/13/13
to ang...@googlegroups.com
Partial:

<div id="experiment-wrap" ng-include="'experiment/'+appModel.currentItem.id"/>

Controller:

controllers.controller('ExperimentCtrl', function($scope, $rootScope, $log, AppModel, $routeParams, $location, LAYOUT){

        $scope.appModel.currentItem = getItemById($routeParams.id);
}

Routes:

when('/experiment/:id', {controller:'ExperimentCtrl', templateUrl:'partial/include-experiment'}).


does this help ?


On Wednesday, 14 September 2011 20:54:39 UTC+10, Batman wrote:
To build my next app I'm evaluating a number of JS frameworks and
AngularJS scores higher than any other framework.
I would like ask a number of design question.

1. Can we use multiple <ng:view> on the same page to render different
partials on different <ng:view> tags. For example If an app where
Parent menu item renders a partial in <ng:view> tag. The partial
itself has a number of navigation links and each needs to be open in
their own ng:view tags.

lu...@goonbee.com

unread,
Jan 31, 2013, 9:54:35 AM1/31/13
to ang...@googlegroups.com
I've written a small stateManager which does a kind of very simple "routing" allowing for nested views, deep linking, etc

Dave Merrill

unread,
Jan 31, 2013, 9:58:49 PM1/31/13
to ang...@googlegroups.com
Looks very interesting.

Sorry for the lazy question, but I haven't had a chance to look much at the code, and I see that the repo contains both jQuery and ruby. Are they for the demo and/or build, or are they needed to use this in an app?

Thanks,
Dave

Luka Mirosevic

unread,
Feb 1, 2013, 1:01:08 AM2/1/13
to ang...@googlegroups.com
The ruby code is just to bootstrap the demo (and serve the partials from haml).

In your app all you'd have to do is copy the code of the actual service (the factory method) into your app. It's only about 70 lines iirc. 

Luka
--
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 angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Dave Merrill

unread,
Feb 1, 2013, 7:31:18 AM2/1/13
to ang...@googlegroups.com
Does it require jQuery, or is that also just for the demo?

Thanks,
Dave

Luka Mirosevic

unread,
Feb 1, 2013, 1:33:26 PM2/1/13
to ang...@googlegroups.com
Just for the demo. 

It was actually just used for selecting the title element (once) so I've refactored that to use native js only and remove the jQuery dependency from the demo.

Luka

Dave Merrill

unread,
Feb 1, 2013, 2:44:13 PM2/1/13
to ang...@googlegroups.com
Thanks for clarifying. If it was just for that one thing, removing the dependency's a good idea (:-).

Dave

Allen Emanuel

unread,
Jul 5, 2013, 4:42:19 AM7/5/13
to ang...@googlegroups.com
I too stuck up with this problem and i found Angularjs-ui-router which solve this problem as of now.
Reply all
Reply to author
Forward
0 new messages