请教AngularJS的ngRoute问题:为何这段程序无法执行?问题出在哪?

zhoupc88 2017-04-28 03:16:30

/** index.html **/
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Products</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="products.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
</head>
<body ng-controller="defaultCtrl">
<div class="panel panel-primary">
<h3 class="panel-heading">Products</h3>
<div ng-view></div>
</div>
</body>
</html>


/** products.js **/
angular.module("exampleApp", ["ngRoute"])

.config(function ($routeProvider) {
$routeProvider.when("/list", {templateUrl: "/tableView.html"});
$routeProvider.when("/edit", {templateUrl: "/editorView.html"});
$routeProvider.when("/create", {templateUrl: "/editorView.html"});
$routeProvider.otherwise({templateUrl: "/tableView.html"});
})

.controller("defaultCtrl", function ($scope, $location) {
$scope.currentProduct = null;

$scope.listProducts = function () {
$scope.products = [
{id: 0, name: "Dummy1", category: "Test", price: 1.25},
{id: 1, name: "Dummy2", category: "Test", price: 2.45},
{id: 2, name: "Dummy3", category: "Test", price: 4.25}
];
};

$scope.deleteProduct = function (product) {
$scope.products.splice($scope.products.indexOf(product), 1);
};

$scope.createProduct = function (product) {
$scope.products.push(product);
$location.path("/list");
};

$scope.updateProduct = function (product) {
for (var i = 0; i < $scope.products.length; i++) {
if ($scope.products[i].id === product.id) {
$scope.products[i] = product;
break;
}
}
$location.path("/list");
};

$scope.editOrCreateProduct = function (product) {
$scope.currentProduct = product ? angular.copy(product) : {};
$location.path("/edit");
};

$scope.saveEdit = function (product) {
if (angular.isDefined(product.id)) {
$scope.updateProduct(product);
} else {
$scope.createProduct(product);
}
};

$scope.cancelEdit = function () {
$scope.currentProduct = {};
$location.path("/list");
};

$scope.listProducts();
});


/** tableView.html(略) **/


/** editorView.html(略) **/

程序无法执行(如图):
...全文
151 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhoupc88 2017-05-02
  • 打赏
  • 举报
回复
引用 1 楼 puydxp 的回复:
按照你的代码,可以运行,运行以后会显示tabview的内容,不过,由于浏览器cache的问题,有时候,更新的js和html不一定能及时刷新,试试清除一下浏览器缓存测试一下。
原来如此,非常感谢您!!
puydxp 2017-04-30
  • 打赏
  • 举报
回复
puydxp 2017-04-30
  • 打赏
  • 举报
回复
按照你的代码,可以运行,运行以后会显示tabview的内容,不过,由于浏览器cache的问题,有时候,更新的js和html不一定能及时刷新,试试清除一下浏览器缓存测试一下。

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧