How to use "data-ng-view" in AngularJS [Best Practice]

javascript angularjs ng-view

iShareHappyCode · Feb 9, 2014 · Viewed 10k times · Source

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 run the application nothing is displayed. How can debug this? what may be wrong? I even trued ng-view, but VS Studio says "Attribute must be followed by = sign" ... but what i have to assign by using = sign?

Here is exception

Uncaught Error: [$injector:modulerr] Failed to instantiate module BookApp due to: Error: [$injector:unpr] Unknown provider: $routeProvider

I made following changes by adding ngRoute

var TodoApp = angular.module("TodoApp", ["ngResource","ngRoute"])

Issue resolved, but what is the best practice?

How to use "data-ng-view" in AngularJS [Best Practice]

Answer

Related questions