3

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?

iShareHappyCode
  • 255
  • 2
  • 7
  • 22
  • 1
    from angular 1.2.0, ngRoute has been moved to its own module. What version of angular are you using? – Khanh TO Feb 09 '14 at 09:31
  • take a look at my answer here: http://stackoverflow.com/questions/20974214/angularjs-ng-view-not-working/20974273#20974273 – Khanh TO Feb 09 '14 at 09:32
  • Does Visual Studio support AngularJS? – jeff_kile Feb 09 '14 at 09:33
  • 1
    @jeff_kile: Visual Studio is just an editor, not an environment to run code. – Khanh TO Feb 09 '14 at 09:34
  • Issue resolved, but what is the best practice? – iShareHappyCode Feb 09 '14 at 09:37
  • Read http://docs.angularjs.org/guide/directive and http://docs.angularjs.org/guide/ie – JB Nizet Feb 09 '14 at 09:40
  • regarding the comment about Visual Studio. what was answer is correct but maybe you were asking if you can integrate a visual studio project with angularjs. If that was the route that you were going then I suggest looking this visual studio template: http://www.asp.net/single-page-application/overview/templates/breezeangular-template and/or read my investigation here: http://blog.beolle.com/2014/05/aspnet-mvc4-with-javascript-framework.html – Carlos G. May 07 '14 at 13:46
  • 2
    @jeff_kile: Visual Studio is absolutely an environment to run code. I recommend Dan Walin's excellent introduction, AngularJS Fundamentals In 60-ish Minutes, https://www.youtube.com/watch?v=i9MHigUZKEM in which Dan uses Visual Studio as both an editor and an environment to run code to teach the fundamentals of AngularJS. – StackOverflowUser Sep 13 '14 at 08:24

0 Answers0