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

javascript angularjs ngroute
The_Brink picture The_Brink · Jun 12, 2012 · Viewed 272.3k times · Source

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

 <div ng-controller="Cntrl">
        <div ng-click="someFunction()">
            click me
        <div>
    <div>

controller.js

  function Cntrl ($scope) {
        $scope.someFunction = function(){
            //code to change view?
        }
    }

Answer

ganaraj picture ganaraj · Jun 12, 2012

In order to switch between different views, you could directly change the window.location (using the $location service!) in index.html file

<div ng-controller="Cntrl">
        <div ng-click="changeView('edit')">
            edit
        </div>
        <div ng-click="changeView('preview')">
            preview
        </div>
</div>

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 )

Related questions

Angular 1 - get current URL parameters

I want to extract data from current URL and use it in controller. For example I have this url: app.dev/backend/surveys/2 Bits that I want to extract: app.dev/backend/ :type / :id Is there anything in Angular that …

Read More
Angular routes contain #! in the url instead of #

Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #. For example, www.webiste.com/#/login becomes www.website.com/#!/login I have to enable the …

Read More
Angular js - check if current url matches the route (with dynamic url params)

i'm simply doing setting this: app.config(['$routeProvider',function($routeProvider) { $routeProvider .when('/asd/:id/:slug',{ templateUrl:'views/home/index.html', controller:'Home', publicAccess:true, sessionAccess:true }); :id and :slug are dynamic params. Now i would like to check …

Read More