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!

New Dev · Accepted Answer · 2015-01-24 23:28:43Z

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, 2015 at 23:28

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stefan Over a year ago

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.

New Dev Over a year ago

No, you don't. Either specify here or specify via ng-controller.

Stefan Over a year ago

Any idea why the angular within the billing.html is not evaluated then? Tried both: {{todo.user}} and {{1+1}}

New Dev Over a year ago

{{1+1}} should work without any controller. So, perhaps you have another issue. Check the console for errors

Stefan Over a year ago

True dat. I get a 'Error: $scope is undefined'

|

Collectives™ on Stack Overflow

AngularJS Routing including multiple JS files and directories

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related