How to stop the redirecting to a page when it was not triggered by an click event

Question

I am trying to develop an single page web application using angular js. Now when i click a AddFilm button it redirects to the AddNewFilm.html where a message will be displayed and buttons will be hidden in the current view ,for routing i used the $routeProvider, but the problem is when i manually type the url as http://localhost:8088/fms/#/AddNewFilm it is dispaly the message and also the buttons also.

My question is can we specify the condition in the myApp.config or myApp.controller inorder to route to a url only when an button is clicked.

Welcome.html is



    
        
        Film Management System
        
        
        
        
        
    

    
        

        
            Add film

            Modify  Film

            Search Film

            Remove Film

            View All Films

            Add Actor

            Modify Actor

            Search Actor

            Remove Actor

            View All Actors

            Home

app.js

var myApp = angular.module('myApp', ['ngRoute']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('myCtrl', function($scope,$window) 
{
    $scope.showButtons = function() 
    {
        $scope.action.buttonClicked.addFilm = false
        $scope.action.buttonClicked.modifyFilm = false
        $scope.action.buttonClicked.searchFilm = false
        $scope.action.buttonClicked.removeFilm = false
        $scope.action.buttonClicked.getAllFilms = false
        $scope.action.buttonClicked.addActor = false
        $scope.action.buttonClicked.modifyActor = false
        $scope.action.buttonClicked.searchActor = false
        $scope.action.buttonClicked.removeActor = false
        $scope.action.buttonClicked.getAllActors = false
    }

    $scope.action = 
    {
            buttonClicked: {},
            addFilm: function()
            {
                $scope.action.buttonClicked.addFilm = true
            },
            modifyFilm: function()
            {
                $scope.action.buttonClicked.modifyFilm = true
            },
            searchFilm: function()
            {
                $scope.action.buttonClicked.searchFilm = true
            },
            removeFilm: function()
            {
                $scope.action.buttonClicked.removeFilm = true
            },
            getAllFilms: function()
            {
                $scope.action.buttonClicked.getAllFilms = true
            },
            addActor: function()
            {
                $scope.action.buttonClicked.addActor = true
            },
            modifyActor: function()
            {
                $scope.action.buttonClicked.modifyActor = true
            },
            searchActor: function()
            {
                $scope.action.buttonClicked.searchActor = true
            },
            removeActor: function()
            {
                $scope.action.buttonClicked.removeActor = true
            },
            getAllActors: function()
            {
                $scope.action.buttonClicked.getAllActors = true
            }
    }
  $scope.message =
  {
            modifyFilm: 'Hello from ModifyFilm',
            addFilm: 'Hello from AddNewFilm',
            searchFilm: 'Hello from searchFilm',
            removeFilm: 'Hello from removeFilm',
            getAllFilms: 'Hello from getAllFilms',
            modifyActor: 'Hello from ModifyActor',
            addActor: 'Hello from AddNewActor',
            searchActor: 'Hello from searchActor',
            removeActor: 'Hello from removeActor',
            getAllActors: 'Hello from getAllActors'
  };
});

myApp.config(function($routeProvider) {
      $routeProvider

      .when('/AddNewFilm', {
        templateUrl : 'AddNewFilm.html',
        controller  : 'myCtrl'
      })

      .when('/ModifyFilm', {
        templateUrl : 'ModifyFilm.html',
        controller  : 'myCtrl'
      })

      .otherwise({redirectTo: '/'});
    });

AddNewFilm.html


ModifyFilm

{{message.addFilm}}

can view it at https://plnkr.co/edit/RXkFAw3Z1ehlt8rJZa5W?p=info

dizel3d · Accepted Answer

Yes, you just need to redirect to main page, when myCtrl when location is changing and there isn't any clicked button:

myApp.controller('myCtrl', function($scope,$window,$location) 
{
    // watch for location changing
    $scope.$on('$locationChangeStart', function() {
        var d = $scope.action.buttonClicked;

        // if there isn't any clicked button
        if (!Object.keys(d).map(function(k) { return d[k]; }).some(angular.identity)) {
            // redirect to main page
            $location.url('/');
        }
    });

    ...
}

And you shouldn't specify myCtrl as controller in when statement. It's wrong.

How to stop the redirecting to a page when it was not triggered by an click event

Answers (1)

Related Questions