0

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

3 回答 3

2

从 JoeyP 的帖子修改以使其工作：

索引.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>

应用程序.html

<div>

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

yum.html

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

注意：代码需要在网络服务器（例如 Apache）上运行才能运行。

于 2015-03-26T18:28:19.733 回答
0

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

请参阅此答案： 无法实例化模块 [$injector:unpr] 未知提供者：$routeProvider

您需要添加此依赖项：

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

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

PStemplate: "yum"是完全有效的，如template: "<p>yum</p>"
（JoeyP 认为你正在尝试做templateUrl: "yum.html"）

于 2014-10-14T20:56:41.200 回答
0

app.html并yum.html在页面加载后通过角度获取。因此，在您的示例中http://localhost/pizza应该指向包含上述代码的页面，并且 yum.html（以及 app.html）应该位于项目的根目录中。

加载时，如果您点击“/”，则加载 Angular 将下载 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 属性，因为您在路由中定义了控制器。您确实需要ng-view主 html 文件中某处的属性，因此 Angular 知道在哪里插入模板。

于 2013-10-21T21:49:22.073 回答