如何使用 Angular js 示例解决 routeProvider 问题？答案

【问题标题】：how to solve routeProvider issues with angular js sample?如何使用 Angular js 示例解决 routeProvider 问题？
【发布时间】：2013-10-30 13:38:31
【问题描述】：

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

【问题讨论】：

标签： visual-studio angularjs routes

【解决方案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>

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

【讨论】：

【解决方案2】：

来自 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']);

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

【讨论】：

【解决方案3】：

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 属性，因为您在路由中定义了控制器。您确实需要主 html 文件中某处的 ng-view 属性，以便 Angular 知道在哪里插入模板。

【讨论】：