AngularJS Routes strange behaviour

Question

I'm trying to reproduce an example of AngularJS app in the book. My problem : when I go on index.html, nothing happens, and I am redirected on index.html#/ I don't understand... Thank you

Index.html

<html ng-app="AMail">
    <head>
        <meta charset="utf-8">
        <title>Title...</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/custom.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <h1>A-Mail</h1>
        <div ng-view></div>
    </body>
</html>

List.html

<table>
    <tr>
        <td><strong>Sender</strong></td>
        <td><strong>Subject</strong></td>
        <td><strong>Date</strong></td>
    </tr>
    <tr ng-repeat="message in messages">
        <td>{{message.sender}}</td>
        <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
        <td>{{message.date}}</td>
    </tr>
</table>

Controller.js

// Creates a module for our core AMail services
var aMailServices = angular.module('AMail', []);

// Set up our mappings between URLs, templates, and controllers
function emailRouteConfig($routeProvider){
    $routeProvider.
    when('/', {
        controller: ListController,
        templateURL: 'list.html'
    }).
    // Notice that for the detail view, we specify a parameterized URL component
    // by placing a colon in front of the id
    when('/view/:id', {
        controller: DetailController,
        templateURL: 'detail.html'
    }).
    otherwise({
        redirectTo: '/'
    });
}

// Set up our route so the AMail service can find it
aMailServices.config(emailRouteConfig)

// Some fake emails
messages = [{
        id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
        date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
        message: 'Hey, we should get together for lunch sometime and catch up.'
        +'There are many things we should collaborate on this year.'
    }, {
        id: 1, sender: 'maria@somecompany.com',
        subject: 'Where did you leave my laptop?',
        date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
        message: 'I thought you were going to put it in my desk drawer.'
        +'But it does not seem to be there.'
    }, {
        id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',
        date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
        message: 'Nobody panic, but my pet python is missing from her cage.'
        +'She doesn\'t move too fast, so just call me if you see her.'
    }
];

// Publish our messages for the list template
function ListController($scope){
    $scope.messages = messages;
}

// Get the message id from the route (parsed from the URL) and use it to
// find the right message object
function DetailController($scope, $routeParams){
    $scope.message = messages[$routeParams.id];
}

Thank you

Angularjs is running in hashbang mode. Check here how can you change it http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting — Chandermani, Aug 25 '13 at 12:48

score 1 · Answer 1 · answered Apr 21 '14 at 13:27

1

Use the templateUrl function instead of templateURL in your Controller.js file.

Official $routeProvider docs

answered Apr 21 '14 at 13:27

grant

4,325
2
24
20

score 0 · Answer 2 · answered Aug 25 '13 at 15:42

0

I would start out by upgrading the version of angularjs you are using. Simply change the tag from

to

Then start testing views without parameters to see if the behavior persists.

answered Aug 25 '13 at 15:42

Pbrain19

1,975
2
14
11

AngularJS Routes strange behaviour

2 Answers2