请教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(略) **/

程序无法执行(如图):
...全文
162 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhoupc88 2017-05-02
  • 打赏
  • 举报
回复
引用 1 楼 puydxp 的回复:
按照你的代码,可以运行,运行以后会显示tabview的内容,不过,由于浏览器cache的问题,有时候,更新的js和html不一定能及时刷新,试试清除一下浏览器缓存测试一下。
原来如此,非常感谢您!!
puydxp 2017-04-30
  • 打赏
  • 举报
回复
puydxp 2017-04-30
  • 打赏
  • 举报
回复
按照你的代码,可以运行,运行以后会显示tabview的内容,不过,由于浏览器cache的问题,有时候,更新的js和html不一定能及时刷新,试试清除一下浏览器缓存测试一下。
Visual Studio Code 是由微软开发的一款免费、开源、跨平台的现代化轻量级代码编辑器,自发布以来迅速成为全球开发者最受欢迎的工具之一。它结合了编辑器的轻便性和集成开发环境(IDE)的强大功能,支持多种编程语言和开发场景,核心特点: 1. 跨平台支持 可在 Windows、macOS 和 Linux 上运行,保持一致的用户体验。 2. 轻量级与高性能 启动速度快,占用资源少,适合处理大型项目或低配置设备。 3. 智能代码补全 内置 IntelliSense(智能感知),提供代码提示、参数信息、快速修复等功能,支持 JavaScript、TypeScript、Python、C++ 等主流语言。 4. 内置终端 直接在编辑器内打开集成终端(支持 PowerShell、CMD、Bash 等),方便执行命令行操作。 5. 调试工具 内置调试器,支持断点、变量监视、调用堆栈查看等,无需离开编辑器即可调试代码。 6. Git 集成 直接通过侧边栏管理 Git 仓库,支持提交、分支切换、冲突解决等操作。 7. 丰富的扩展生态系统 通过 Extensions Marketplace 可安装数千款插件,扩展功能包括: 语言支持:如 Java、Go、Rust 等。 主题与图标:自定义界面风格。 工具集成:如 Docker、Kubernetes、数据库连接等。 效率工具:如 REST Client、Live Server 等。 8. 自定义与主题 支持修改键盘快捷键、界面主题、文件图标等,打造个性化开发环境。 9. 多光标编辑 按住 Alt(Windows/Linux)或 Option(macOS)点击可添加多个光标,同时编辑多处代码。 10. 远程开发支持 通过 Remote - SSH、Remote - Containers 等扩展,可直接连接远程服务器或开发容器,实现无缝协作。

87,997

社区成员

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

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