/** 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（略） **/程式無法執行（如圖）：
