Question

我刚开始尝试使用angular js并使用egghead.io视频。其中一个示例是关于routeProvider。我正在使用vs.net 2012运行它，但是当我点击时无法显示任何模板或消息：

http://localhost/app.html/pizza

这是app.html中的源代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                template: "yum"
            })
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.model = {
            message: "this is my app"
        }
    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">

</div>

Answer 1

从JoeyP的帖子中修改以使其有效：

的index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                templateUrl: "yum.html" // there was a typo here in the OP
            })

            .otherwise( {
            redirectTo: '/'
        });
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.message= "this is my app";

    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
  <div ng-view></div>
</div>

app.html

<div>

  <a href="#/pizza">Go get some pizza! </a> {{message}}
</div>

yum.html

<p>
 MMMM, pizza
 <a href="#/pizzaaaaaaaaa">more pizzaaaaaaaa</a>
</p>

注意：代码需要在web-server（例如Apache）上运行才能运行。

Answer 2

页面加载后，以角度取出

app.html和yum.html。因此，在您的示例中，http://localhost/pizza应指向包含上述代码的页面，yum.html（以及app.html）应位于项目的根目录中。

在加载角度下，如果点击“/”则下载app.html，如果点击“/ pizza”则下载yum.html。这是一个例子

index.html（不包括<html>，<head>，<body>等）

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                template: "yum.html" // there was a typo here in the OP
            })
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.model = {
            message: "this is my app"
        }
    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
  <div ng-view></div>
</div>

app.html

<div>
  <p ng-bind="model.app"><p>
  <a ng-href="/pizza">Go get some pizza!</a>
</div>

yum.html

<p>
 MMMM, pizza
</p>

由于您在路径中定义了控制器，因此不需要ng-controller属性。您确实需要主html文件中某处的ng-view属性，因此angular知道插入模板的位置。

Answer 3

来自egghead.io的John真的需要更新他教程的这一部分。

看到这个答案： Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider

您需要添加此依赖项：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

var app = angular.module("app", ['ngRoute']);

P.S。 template: "yum"完全有效，如template: "<p>yum</p>"中所示（JoeyP认为你正试图做templateUrl: "yum.html"）

如何用angular js sample解决routeProvider问题？

3 个答案: