search

Home  >  Q&A  >  body text

javascript - Question about AngularJS's ngRoute: Why can't this program be executed? What's the problem?

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

The program cannot be executed (as shown in the picture):

世界只因有你世界只因有你2756 days ago556

reply all(2)I'll reply

  • 黄舟

    黄舟2017-05-16 13:39:03

    $routeProvider should not start with "/" when defining the path

    reply
    0
  • 世界只因有你

    世界只因有你2017-05-16 13:39:03

    Use stateProvider

    reply
    0
  • Cancelreply