Visual studio 如何使用angular js示例解决routeProvider问题？

我刚刚开始尝试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>

//创建一个新模块
var-app=angular.module（“app”，[]）；
app.config（函数（$routeProvider）{
$routeProvider.when（“/”{
templateUrl:“app.html”，
控制器：“AppCtrl”
})
.当（“/比萨饼”{
模板：“yum”
})
});
app.controller（“AppCtrl”，函数（$scope）{
$scope.model={
信息：“这是我的应用程序”
}
});

app.html

和

yum.html

在页面加载后由angular获取。因此，在您的示例中

http://localhost/pizza

应指向包含上述代码的页面，并且yum.html（以及app.html）应位于项目的根目录中

加载时，angular将在点击“/”时下载app.html，在点击“/”时下载yum.html。这里有一个例子

index.html

（不包括

、

、

等）

yum.html

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

<p>
 MMMM, pizza
</p>

嗯，披萨

---

不需要ng控制器属性，因为您在路由中定义了控制器。您确实需要主html文件中的

ng view

属性，以便angular知道在何处插入模板。

来自egghead.io的John确实需要更新其教程的这一部分

看看这个答案：

您需要添加此依赖项：

var-app=angular.module（“app”，['ngRoute']）


注意：模板：“yum”

是完全有效的，如模板“yum

”

---

（乔伊普认为您正在尝试执行

模板URL:“yum.html”

）

根据乔伊普的帖子进行修改以使其生效：

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>

//创建一个新模块
var-app=angular.module（“app”，[]）；
app.config（函数（$routeProvider）{
$routeProvider.when（“/”{
templateUrl:“app.html”，
控制器：“AppCtrl”
})
.当（“/比萨饼”{
templateUrl:“yum.html”//OP中有一个输入错误
})
。否则（{
重定向到：'/'
});
});
app.controller（“AppCtrl”，函数（$scope）{
$scope.message=“这是我的应用程序”；
});

app.html

<div>

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

{{message}}

yum.html

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

嗯，披萨

注意：代码需要在web服务器（例如Apache）上运行才能正常工作

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