AngularJS How do I switch views from a controller function

Question

I am trying to use the ng-click feature of AngularJS to switch views  How would I go about doing this with the code below   index html    lt div ng-controller  Cntrl  gt           lt div ng-click  someFunction    gt              click me          lt div gt       lt div gt    controller js    function Cntrl   scope             scope someFunction   function                  code to change view

User · Answer

Without doing a full revamp of the default routing (#/ViewName) environment, I was able to do a slight modification of Cody's tip and got it working great.

the controller

.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
            ...
            this.goToView = function(viewName){
                $location.url('/' + viewName);
            }
        }]
    );

the view

...
<li ng-click="general.goToView('Home')">HOME</li>
...

What brought me to this solution was when I was attempting to integrate a Kendo Mobile UI widget into an angular environment I was losing the context of my controller and the behavior of the regular anchor tag was also being hijacked. I re-established my context from within the Kendo widget and needed to use a method to navigate...this worked.

Thanks for the previous posts!

User · Answer

In order to switch between different views  you could directly change the window location  using the  location service   in index html file   lt div ng-controller  Cntrl  gt           lt div ng-click  changeView  edit    gt              edit          lt  div gt           lt div ng-click  changeView  preview    gt              preview          lt  div gt   lt  div gt    Controller js  function Cntrl   scope  location             scope changeView   function view                location path view      path not hash                   and configure the router to switch to different partials based on the location   as shown here https   github com angular angular-seed blob master app app js    This would have the benefit of history as well as using ng-view    Alternatively  you use ng-include with different partials and then use a ng-switch as shown in here   https   github com ganarajpr Angular-UI-Components blob master index html

User · Answer

There are two ways for this   If you are using ui-router or  stateProvider  do it as    state go  stateName      remember to add  state service in the controller   if you are using angular-router or  routeProvider  do it as    location path  routeName      similarily include  location service in your controller

User · Answer

This little function has served me well         goto view        useage -   scope gotoView  your path here   boolean open in new window       scope gotoView   function  st view  is newWindow                 console log  going to view             st view   window location           if  is newWindow                         window open  window location origin    window location pathname               st view    blank                      else                        window location hash          st view                       You dont need the full path  just the view you are switching to

User · Answer

The method used for all previous answers to this question suggest changing the url which is not necessary  and I think readers should be aware of an alternative solution   I use ui-router and  stateProvider to associate a state value with a templateUrl which points to the html file for your view   Then it is just a matter of injecting the  state into your controller and calling  state go  state-value   to update your view   What is the difference between angular-route and angular-ui-router

User · Answer

I ve got an example working   Here s how my doc looks    lt html gt   lt head gt       lt link rel  stylesheet  href  css main css  gt       lt script src    ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs angularjs 1 0 3 angular min js  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs angularjs 1 0 3 angular-resource min js  gt  lt  script gt       lt script src  js app js  gt  lt  script gt       lt script src  controllers ctrls js  gt  lt  script gt   lt  head gt   lt body ng-app  app  gt       lt div id  contnr  gt           lt ng-view gt  lt  ng-view gt       lt  div gt   lt  body gt   lt  html gt    Here s what my partial looks like      lt div id  welcome  ng-controller  Index  gt       lt b gt Welcome  Please Login  lt  b gt       lt form ng-submit  auth    gt           lt input class  input login username  type  text  placeholder  username    gt  lt br gt           lt input class  input login password  type  password  placeholder  password    gt  lt br gt           lt input class  input login submit  type  submit  placeholder  login     gt       lt  form gt   lt  div gt    Here s what my Ctrl looks like   app controller  Index   function  scope   routeParams   location        scope auth   function             location url   map                 app is my module   var app   angular module  app     ngResource    config function  routeProvider       Hope this is helpful

User · Answer

Firstly you have to create state in app js as below   state  login           url             templateUrl   views login html         controller   LoginCtrl          and use below code in controller    location path  login       Hope this will help you

User · Answer

The provided answer is absolutely correct  but I wanted to expand for any future visitors who may want to do it a bit more dynamically -   In the view -    lt div ng-repeat  person in persons  gt       lt div ng-click  changeView person   gt          Go to edit      lt div gt   lt div gt    In the controller -    scope changeView   function person       var earl     editperson     person id       location path earl       Same basic concept as the accepted answer  just adding some dynamic content to it to improve a bit   If the accepted answer wants to add this I will delete my answer

[javascript] AngularJS : How do I switch views from a controller function?

Examples related to javascript

Examples related to angularjs

Examples related to ngroute