如何使用 Angular js 示例解决 routeProvider 问题？
Posted
技术标签:
【中文标题】如何使用 Angular js 示例解决 routeProvider 问题？【英文标题】：how to solve routeProvider issues with angular js sample? 【发布时间】：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>
【问题讨论】：
【参考方案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 知道在哪里插入模板。
【讨论】：
以上是关于如何使用 Angular js 示例解决 routeProvider 问题？的主要内容，如果未能解决你的问题，请参考以下文章
ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？
ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？
ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？
Staying Sharp with Angular.js Logic in Our Routes