javascript - 請(qǐng)教AngularJS的ngRoute問(wèn)題：為何這段程序無(wú)法執(zhí)行？問(wèn)題出在哪？
問(wèn)題描述
/** index.html **/<!DOCTYPE html><html ng-app='exampleApp'><head> <title>Products</title> <script src='http://www.baoyu77737.com/wenda/angular.js'></script> <script src='http://www.baoyu77737.com/wenda/angular-route.js'></script> <script src='http://www.baoyu77737.com/wenda/products.js'></script> <link href='http://www.baoyu77737.com/wenda/bootstrap.css' rel='stylesheet' /> <link href='http://www.baoyu77737.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（略） **/
程序無(wú)法執(zhí)行（如圖）：
問(wèn)題解答
回答1：$routeProvider定義路徑時(shí)，不應(yīng)該以'/'開(kāi)頭
用stateProvider
相關(guān)文章：
1. javascript - 使用form進(jìn)行頁(yè)面跳轉(zhuǎn)，但是很慢，如何加一個(gè)Loading？2. python 計(jì)算兩個(gè)時(shí)間相差的分鐘數(shù)，超過(guò)一天時(shí)計(jì)算不對(duì)3. angular.js - 輸入郵箱地址之后， 如何使其自動(dòng)在末尾添加分號(hào)？4. javascript - 后臺(tái)管理系統(tǒng)左側(cè)折疊導(dǎo)航欄數(shù)據(jù)較多，怎么樣直接通過(guò)搜索去定位到具體某一個(gè)菜單項(xiàng)位置，并展開(kāi)當(dāng)前菜單5. docker-machine添加一個(gè)已有的docker主機(jī)問(wèn)題6. docker-compose中volumes的問(wèn)題7. angular.js - angularjs 注入模塊報(bào)錯(cuò) 很怪異... 求解惑8. javascript - ES6規(guī)范下 repeat 函數(shù)報(bào)錯(cuò) Invalid count value9. javascript - html5的data屬性怎么指定一個(gè)function函數(shù)呢？10. html5 - 為什么使使用vue cli 腳手架，post-css 沒(méi)有自動(dòng)對(duì)css3屬性自動(dòng)添加瀏覽器前綴呢？
網(wǎng)公網(wǎng)安備