文章详情页

javascript - 请教AngularJS的ngRoute问题：为何这段程序无法执行？问题出在哪？

【字号：大中小】日期：2022-12-20 16:28:02浏览：18作者：猪猪

问题描述

/** index.html **/<!DOCTYPE html><html ng-app='exampleApp'><head> <title>Products</title> <script src='https://www.haobala.com/wenda/angular.js'></script> <script src='https://www.haobala.com/wenda/angular-route.js'></script> <script src='https://www.haobala.com/wenda/products.js'></script> <link href='https://www.haobala.com/wenda/bootstrap.css' rel='stylesheet' /> <link href='https://www.haobala.com/wenda/bootstrap-theme.css' rel='stylesheet' /></head><body ng-controller='defaultCtrl'><p class='panel panel-primary'> <h3 class='panel-heading'>Products</h3> <p ng-view></p></p></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（略） **/

程序无法执行（如图）： javascript - 请教AngularJS的ngRoute问题：为何这段程序无法执行？问题出在哪？

问题解答

回答1：

$routeProvider定义路径时，不应该以'/'开头 javascript - 请教AngularJS的ngRoute问题：为何这段程序无法执行？问题出在哪？

回答2：

用stateProvider

JavaScript

上一条：javascript - 移动端触摸事件你们都用什么插件?下一条：javascript - 在移动端input type="number" 键盘没法弹起

相关文章：

1. 为什么我ping不通我的docker容器呢？？？2. docker start -a dockername 老是卡住，什么情况？3. docker镜像push报错4. 新手学习vue和node.js的困惑5. 关docker hub上有些镜像的tag被标记““This image has vulnerabilities””6. 请问连接文件怎么写7. docker容器呢SSH为什么连不通呢？8. 求解答：访问不了虚拟服务器的问题？9. macos - mac下docker如何设置代理10. dockerfile - 为什么docker容器启动不了？