AngularJS: Show view without replacing existing view when a route is changed

Question

I have a view in which I am listing out existing contacts.

route : /contacts
controller : contacts.list
view : /templates/list.html

I have another view in which I want to add a new contact

route : /contacts/add
controller : contacts.add
view : /templates/add.html

Using route, I am able to show either of these when needed.

But the challenge I am facing is to show the add form page in a popup when clicked on Add button instead of replacing list view.

Basically I want to link "Add" with the /contacts/add URL which will load the view in a popup and bind the controller to it, instead of replacing the entire view.

Please help me in how to think in Angular to achieve this.

Following is what I have currently.

var myModule =
  angular
    .module('myModule', [])
      .config(['$routeProvider', function config($routeProvider){
        $routeProvider
         .when('/contacts', {
           controller : 'contacts.list',
           templateUrl : 'templates/contacts/list.html'
         })
         .when('/cotnacts/add', {
           controller : 'contacts.add',
           templateUrl : 'templates/contacts/add.html'
         });
    }]);

This is a possible duplicate. See http://stackoverflow.com/questions/13812962/modal-window-with-custom-url-in-angularjs — Raghavendra, Jul 05 '14 at 05:32

score 0 · Accepted Answer · answered Jul 05 '14 at 05:41

0

You might want to map angular routes to custom events and not really using <ng-view>

See this: www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

answered Jul 05 '14 at 05:41

Raghavendra

5,281
4
36
51

AngularJS: Show view without replacing existing view when a route is changed

1 Answers1