Here is my index.html
<!DOCTYPE html>
<html data-ng-app="BookApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-2.1.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css"/>
<title>My Book</title>
</head>
<body>
<div class="container">
<div data-ng-view=""></div>// I suspect this line is wrong
</div>
</body>
Here is my app.js
var NoteApp = angular.module("BookApp", ["ngResource"]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'book.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function($scope, $location) {
$scope.book = "test pass";
};
Here is my book.html
<h1>Hello: {{book}}</h1>
When U launches the application, nothing is displayed. How can I debug this? what could be wrong? I even did an ng-view, but VS Studio says: "The attribute should be followed by = sign" ... but what do I need to assign using = sign?
Here is the exception
Unprepared error: [$ injector: modulerr] Unable to instantiate BookApp module due to: Error: [$ injector: unpr] Unknown provider: $ routeProvider
I made the following changes by adding ngRoute
var TodoApp = angular.module("TodoApp", ["ngResource","ngRoute"])
The problem is solved, but what is the best practice?
source
share