AngularJS not displaying template

Question

I started learning AngularJS so I created two html pages:

index.html

<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-resource.js"></script>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <script src="Scripts/app.js"></script>
        <title>Angular Tutorial</title>
    </head>

    <body>
        <div class="container">
               <div ng-view></div>
        </div>
    </body>

</html>

and list.html

<input type="text" ng-model="test">
<h1>Hello: {{test}}</h1>

The app.js looks like this

var TodoApp = angular.module("TodoApp", ["ngResource"]).
    config(function ($routeProvider) {
        $routeProvider.
            when('/', { controller: ListCtrl, templateUrl: "list.html" }).
            otherwise({ redirectTo: '/' });
    });


var ListCtrl = function ($scope, $location)
{
    $scope.test = "testing";        
};

Unfortunately, when I open the index.html page it is blank. What can be the cause of the problem?

Uncaught Error: [$injector:modulerr] Failed to instantiate module TodoApp due to: Error: [$injector:unpr] Unknown provider: $routeProvider errors.angularjs.org/1.3.12/$injector/unpr?p0=%24routeProvider at localhost:65019/Scripts/angular.js:63:12 at localhost:65019/Scripts/angular.js:3997:19 at getService (localhost:65019/Scripts/angular.js:4144:39).. — omegasbk
– omegasbk, Commented Feb 5, 2015 at 15:20
Added the ngRoute to dependencies, it works like a charm now, thank you for the response! :) — omegasbk
– omegasbk, Commented Feb 5, 2015 at 15:23

squiroid · Accepted Answer · 2015-02-05 15:23:41Z

5

As you mentioned the error:-

1) Add angular-route.js file in main page.

2) Add 'ngRoute' dependency in angular main app.

Doc:-https://docs.angularjs.org/tutorial/step_07

answered Feb 5, 2015 at 15:23

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

Comments

Non · Accepted Answer · 2015-02-05 15:29:11Z

1

also you need to mention the controller in your HTML with ng-controller="ListCtrl" to initialize it.

And do not declare your controller that way, you must do

todoApp.controller('ListCtrl', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {

  $scope.test = "testing";

}]);

answered Feb 5, 2015 at 15:29

Non

8,62920 gold badges80 silver badges130 bronze badges

1 Comment

omegasbk Over a year ago

I've been watching the tutorial from 2013., I suppose there are some version differences then :/ Thank you for the feedback!

Yaniv Efraim · Accepted Answer · 2015-02-05 15:16:43Z

0

It seems that you are missing the controller's definition:

TodoApp.controller('ListCtrl', ListCtrl);

This should fix your issue

answered Feb 5, 2015 at 15:16

Yaniv Efraim

6,7219 gold badges56 silver badges98 bronze badges

1 Comment

omegasbk Over a year ago

The controller is defined in the module config, but thank you very much for the response anyway, I found the solution :)

Zouzias · Accepted Answer · 2015-02-05 15:28:40Z

0

You can also take a look at yeoman. It will help you to start with angularjs in zero time.

http://yeoman.io/codelab.html

answered Feb 5, 2015 at 15:28

Zouzias

2,3601 gold badge23 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS not displaying template

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Related