javascript - Soalan tentang ngRoute AngularJS: Mengapa program ini tidak boleh dilaksanakan? Apa masalahnya?
世界只因有你
世界只因有你 2017-05-16 13:37:03
0
2
548
/** 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(略) **/

Program tidak boleh dilaksanakan (seperti yang ditunjukkan dalam gambar):

世界只因有你
世界只因有你

membalas semua(2)
黄舟

$routeProvider seharusnya tidak bermula dengan "/" apabila menentukan laluan

世界只因有你

Gunakan stateProvider

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan