AngularJS would not switch view

Question

I am trying to switch the view, once the "Add" button is clicked (see code below). However, when I click on button "Add", the only thing that happens is that the "/addRecordType" is attached to the end of my URL in the browser, instead of resolving it to 'templates/add-record-type.html' as config instructs it to do. Why is this happening and how could I make it work? Thanks!

parserconfig.html

<!DOCTYPE html>
<html ng-app='parserconfigApp'>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.3.14/angular-route.min.js"></script>

    <title>Parser Config</title>
</head>

<body>
<div ng-controller='ParserConfigController as parserConfig'>
    <button ng-click="changeView('addRecordType')">Add</button>
</div>
    <script type="text/javascript" src="parserconfigApp.js"></script>
</body>
</html>

parserconfigApp.js

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

app.controller('ParserConfigController', ['$scope', '$location', function($scope, $location){        
    $scope.changeView = function(view) {
        $location.path(view);
    }
}]);


app.controller('AddRecordTypeController', ['$scope', function($scope){
}]);


app.config('$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/recordTypeList', {
                templateUrl: '/parserconfig.html',
                controller: 'ParserConfigController'
            }).
            when('/addRecordType', {
                templateUrl: 'templates/add-record-type.html',
                controller: 'AddRecordTypeController'
            }).
            otherwise({
                redirectTo: '/recordTypeList'
            });
    });

score 0 · Answer 1 · answered Jul 06 '15 at 22:35

when('/addRecordType', {
    templateUrl: 'templates/add-record-type.html',
    controller: 'AddRecordTypeController'
}).

Should be

when('/addRecordType', {
    templateUrl: '/templates/add-record-type.html', // Slash added
    controller: 'AddRecordTypeController'
}).

BhavO · Answer 2 · 2015-07-06T22:50:39.527

0

Use location.url instead

        this.changeView = function(viewName){
            $location.url('/' + viewName);
        }

Or you could use ui-router which is an enhanced angular router, popular alternative to angular-route

http://www.ng-newsletter.com/posts/angular-ui-router.html

edited Jul 06 '15 at 22:50

answered Jul 06 '15 at 22:41

BhavO

2,406
1
11
13

That did not fix the issue. I wonder if you have you tried it? – jazzblue Jul 06 '15 at 22:46
I've seen this work with other examples, can't try anything now, on mobile phone. – BhavO Jul 06 '15 at 22:51

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

Sorry my other answer was less helpful, I think this may be your solution.

$location.path(view);

Is only going to change your URL, without actually loading the new route. If you immediately use

$scope.$apply()

You should then move to that route.

See here for more info

edited May 23 '17 at 12:21

Community

1
1

answered Jul 07 '15 at 14:06

PBLC

259
2
12

AngularJS would not switch view

3 Answers3