AngularJS, $routeProvider

Question

I'm trying to learn how routes work in AngularJS to make a little application that allows users to login and write comments in a live feed. However the whole concept of routes is a bit blurry for me atm and i can't get this right.

My standard index.html containing an ng-view and necessary scripts.

 <!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

    <script src="//cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
    <script src="//cdn.firebase.com/libs/angularfire/0.8.2/angularfire.js"></script>
    <script src="//cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
    <script src="controller.js"></script>

    <title>Test Login App</title>
</head>
<body>
<div class="container">
    <div ng-view></div>
</div>
</body>
</html>

My controller containing module and routeprovider.

    var myApp = angular.module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'firebase',
    'firebase.utils',
    'simpleLogin'
]);

myApp.config(function($routeProvider) {
        $routeProvider.
            when('/', { controller: handleCtrl, templateUrl: 'handler.html' }).
            when('/chatt', { controller: MyController, templateUrl: 'chat.html' }).
            when('/login', { controller: loginCtrl, templateUrl: 'login.html' }).
            otherwise({ redirectTo: '/handler' });
});

myApp.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}])

myApp.controller('MyController', ['$scope', '$firebase',
    function($scope, $firebase) {
        //CREATE A FIREBASE REFERENCE
        var ref = new Firebase("https://ivproj.firebaseio.com/");

        // GET MESSAGES AS AN ARRAY
        $scope.messages = $firebase(ref).$asArray();

        //ADD MESSAGE METHOD
        $scope.addMessage = function(e) {

            //LISTEN FOR RETURN KEY
            if (e.keyCode === 13 && $scope.msg) {
                //ALLOW CUSTOM OR ANONYMOUS USER NAMES
                var name = $scope.name || 'anonymous';

                //ADD TO FIREBASE
                $scope.messages.$add({
                    from: name,
                    body: $scope.msg
                });

                //RESET MESSAGE
                $scope.msg = "";
            }
        }
    }
]);

The $routeprovider function should direct me to handler that is a simple .html file containing two buttons that in turn redirects to other htmls.

score 1 · Answer 1 · answered Oct 08 '14 at 16:00

1

I think you have the syntax of the otherwise call in your config section wrong. Change what you have for this instead:

otherwise('/handler');

hope this helps...

answered Oct 08 '14 at 16:00

Fordio

3,410
2
14
18

I think you can go with both actually. – seb Oct 08 '14 at 16:05

score 1 · Answer 2 · edited May 23 '17 at 10:25

you are missing '' in controller part. correct code should look like -

myApp.config(function($routeProvider) {
        $routeProvider.
            when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
            when('/chatt', { controller: 'MyController', templateUrl: 'chat.html' }).
            when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
            otherwise({ redirectTo: '/handler' });
});

Make sure that you are referring the correct path in templateUrl.

and look at my earlier post to get a better idea - How to navigate in Angular App

Hmm, ye that worked although i had to remove the html5mode as well. — seb, Oct 08 '14 at 16:11

Raju Mandapati · Accepted Answer · 2014-10-08T17:40:19.990

myApp.config(function($routeProvider) {
    $routeProvider.
        when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
        when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
        when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
        otherwise({ redirectTo: '/handler' });
});

The $routeProvider.when() method in the above code actually creates a route with the given configuration. And the three .when()'s are creating three different routes.

But in your $routeProvider.otherwise('/handler'), you are telling angular to go to a route called /handler if the user tries to navigate anywhere outside the configured routes.

The mistake you are doing here is, you did not define a route at /handler. So you need to first define that route and then use it in .otherwise().

Try changing your configuration to reflect the below.

myApp.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.
        when('/handler', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
        when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
        when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
        otherwise({ redirectTo: '/handler' });
});

Yep that made it work, silly how long i was stuck on this part. thanks for the explanation as well. — seb, Oct 08 '14 at 16:15
Is there a way that allows me to keep my html5Mode on so i don't need to refer to paths via '#/some' ? — seb, Oct 08 '14 at 16:36

AngularJS, $routeProvider

3 Answers3