AngularJS Routing including multiple JS files and directories

Question

Im fairly new to Angular and have a problem with the routing, I set it up quite simply but it is still not working.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />


</head>
<body ng-app="app">
<div>{{1+1}}
    <ng-view>Loading...</ng-view>
</div>

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script></script>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="components/billing/billing.js"></script>

<script>

</script>
</body>
</html>

app.js:

'use strict';

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

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/billing', {templateUrl: 'components/billing/billing.html',   controller: BillingCtrl})
        .otherwise({redirectTo: '/billing'});
}]);

components/billing/billing.js:

'use strict';

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

billing.controller('BillingCtrl', [function($scope) {
        var model = {
            user: "Adam",
            items: [{ action: "Buy Flowers", done: false },
                { action: "Get Shoes", done: false },
                { action: "Collect Tickets", done: true },
                { action: "Call Joe", done: false }]
        };

        $scope.todo = model;
}]);

components/billing/billing.html:

<div>Hello world {{todo.user}}</div>

From what I have read, it should include the billing.html in the ng-view since it is the default routing. But all I get is 'Loading...'.

Any help is very much appreciated!

score 1 · Accepted Answer · answered Jan 24 '15 at 23:28

1

When you specify a controller for a route, it should be the name of the controller (as a string), not a reference to a controller function.

$routeProvider
    .when('/billing', {
       templateUrl: 'components/billing/billing.html',
       controller: "BillingCtrl"
    })

(Notice the quotes around BillingCtrl)

answered Jan 24 '15 at 23:28

New Dev

48,427
12
87
129

A follow up question, if I specify the controller this way do I still need an ng-controller attribute on the billing.html? Currently it seems like I can't access the scope variables. – Stefan Jan 25 '15 at 00:07
No, you don't. Either specify here or specify via `ng-controller`. – New Dev Jan 25 '15 at 00:09
Any idea why the angular within the billing.html is not evaluated then? Tried both: {{todo.user}} and {{1+1}} – Stefan Jan 25 '15 at 00:19
`{{1+1}}` should work without any controller. So, perhaps you have another issue. Check the console for errors – New Dev Jan 25 '15 at 00:23
True dat. I get a 'Error: $scope is undefined' – Stefan Jan 25 '15 at 00:37
You forgot to explicitly annotate your controller: `["$scope", function($scope){..}]` – New Dev Jan 25 '15 at 00:39

AngularJS Routing including multiple JS files and directories

1 Answers1