Load different angular controller at click of a button

Question

I am working on a Single Page Application. Page A , Page B are partials. We have a button "btnA" on "Page A" rendered using "controllerA". At click of "btnA" we need to perform "serviceA.somework()" and at successful completion, load "Page B" using "controllerB" with some params.

Is following the best way to achieve this?

within controllerA.onClickBtnA() { $location.path(PageB).search({param:'value'})}

This is a rather open question but I can't see why this is bad? In this scenario the viewmodel/controller is the glue between all logic. — skubski
– skubski, Commented Sep 7, 2015 at 11:49

Joy · Accepted Answer · 2015-09-09 00:44:23Z

1

$routeProvider is the best choice for your scenario. You should not load the controller manually in any way. The Angular router does the job for you.

A simple example from the angular official API page: http://plnkr.co/edit/foLnNL7koXzUYavnYFFw?p=preview.

Update

Your proposal is basically doing what $routeProvider does. $routeProvider provides:

RegExp in path definition
Browsing history
A resolve function to control access to current path
Place to define your controller and template for each path
Mechanism to deal with path parameters
...

And it is well tested and supported. You'd better have a try.

edited Sep 9, 2015 at 0:44

answered Sep 8, 2015 at 3:30

Joy

9,60011 gold badges50 silver badges99 bronze badges

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

1 Comment

Divs Over a year ago

Thanks. Can you please point out what will be the major pros in this option with the cons in the one posted in the original question?

Collectives™ on Stack Overflow

Load different angular controller at click of a button

1 Answer 1

Update

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related